From b138f60fc9f897c92c5976c6a389ce94d4434b30 Mon Sep 17 00:00:00 2001 From: Antoine Date: Wed, 15 Feb 2023 16:01:46 +0100 Subject: [PATCH] Refining Mobile menu starter with submenus --- css/app.css | 110 +++++++++++++++++++++++++++- header.php | 4 +- resources/css/components/header.css | 88 ++++++++++++++++++++-- resources/img/arrow_down_white.svg | 3 + resources/img/arrow_right_white.svg | 3 + 5 files changed, 196 insertions(+), 12 deletions(-) create mode 100644 resources/img/arrow_down_white.svg create mode 100644 resources/img/arrow_right_white.svg diff --git a/css/app.css b/css/app.css index 2da512a..0d08452 100644 --- a/css/app.css +++ b/css/app.css @@ -982,25 +982,101 @@ article>*:not(.entry-content), padding-right: 2rem; } -.close_btn { - display: none; +/* li.current-page-parent, + li.current-page-ancestor */ + +.primary-menu-container li.current-page-parent > a, + .primary-menu-container li.current_page_item > a { + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(20 184 166 / var(--tw-text-opacity)); } -.menu-navlink { +@media (min-width: 960px) { + .primary-menu-container li.current-page-parent > a, + .primary-menu-container li.current_page_item > a { + --tw-text-opacity: 1; + color: rgb(14 165 233 / var(--tw-text-opacity)); + } +} + +/* Highlight using list element */ + +.primary-menu-container li.menu-item { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; text-transform: uppercase; } +.primary-menu-container li.menu-item:hover > a { + cursor: pointer; + --tw-text-opacity: 1; + color: rgb(20 184 166 / var(--tw-text-opacity)); +} + +@media (min-width: 960px) { + .primary-menu-container li.menu-item:hover > a { + --tw-text-opacity: 1; + color: rgb(14 165 233 / var(--tw-text-opacity)); + } +} + +/* submenus */ + +.primary-menu-container li:has(.sub-menu) .sub-menu { + position: absolute; + display: none; +} + +.primary-menu-container li:has(.sub-menu) > a::after { + transform: translateY(-2px) rotate(-90deg); + content: ""; + display: inline-block; + height: 10px; + width: 10px; + margin-left: 20px; + background-image: url("../resources/img/arrow_down_white.svg"); + background-repeat: no-repeat; + background-size: contain; + transition: all 0.3s ease-out; +} + +.primary-menu-container li:has(.sub-menu):hover > a::after, .primary-menu-container li:has(.sub-menu):focus > a::after { + transform: translateY(-2px) rotate(0deg); +} + +.primary-menu-container li:has(.sub-menu):hover .sub-menu, .primary-menu-container li:has(.sub-menu):focus .sub-menu { + display: block; +} + +.close_btn { + display: none; +} + +/* RESPONSIVE */ + @media (max-width: 960px) { + .primary-menu-container { + margin-top: 0px; + margin-bottom: 0px; + max-height: 100vh; + } + + .primary-menu-container li:has(.sub-menu) .sub-menu { + margin-left: auto; + margin-right: auto; + /* position: static !important; */ + position: static; + } + #primary-menu { position: absolute; left: 0px; margin-top: 0px; --tw-bg-opacity: 1; background-color: rgb(14 165 233 / var(--tw-bg-opacity)); - transition: all 0.3s ease-in-out; + transition: all 0.3s ease-out; transform: translateY(-110vh); z-index: 800; height: -webkit-fit-content; @@ -1036,6 +1112,7 @@ article>*:not(.entry-content), /* BURGER MENU */ #primary-menu body:has(header.burger_menu_active) { + max-height: 100vh; overflow: hidden; } @@ -1062,6 +1139,31 @@ article>*:not(.entry-content), } } +@media (max-width: 960px) and (hover: none) { + body { + background-color: red !important; + } + + /* ul { + @apply w-max mx-auto; + } */ + + .primary-menu-container li.menu-item { + margin-left: auto; + margin-right: auto; + text-align: left !important; + } + + .primary-menu-container li:has(.sub-menu) > a::after { + display: none; + } + + .primary-menu-container li:has(.sub-menu) .sub-menu { + padding-left: 3rem; + display: block; + } +} + /* ########### BLOCKS ############ */ /* Home */ diff --git a/header.php b/header.php index 89abe37..398ae8b 100644 --- a/header.php +++ b/header.php @@ -19,9 +19,9 @@
- +
-
+
diff --git a/resources/css/components/header.css b/resources/css/components/header.css index f0d4e65..76a37aa 100644 --- a/resources/css/components/header.css +++ b/resources/css/components/header.css @@ -1,22 +1,75 @@ .primary-menu-container { @apply mx-auto max-w-screen-xl px-8; + /* Highlight using list element */ + /* li.current-page-parent, + li.current-page-ancestor */ + li.current-page-parent > a, + li.current_page_item > a { + @apply font-bold + text-secondary + lg:text-primary; + } + + li.menu-item { + @apply font-medium text-sm uppercase; + &:hover > a { + @apply cursor-pointer + text-secondary + lg:text-primary; + } + } + /* submenus */ + li:has(.sub-menu) { + .sub-menu { + position: absolute; + display: none; + } + > a::after { + transform: translateY(-2px) rotate(-90deg); + content: ""; + display: inline-block; + height: 10px; + width: 10px; + margin-left: 20px; + background-image: url("../resources/img/arrow_down_white.svg"); + background-repeat: no-repeat; + background-size: contain; + transition: all 0.3s ease-out; + } + } + li:has(.sub-menu):hover, + li:has(.sub-menu):focus { + > a::after { + transform: translateY(-2px) rotate(0deg); + } + .sub-menu { + display: block; + } + } } .close_btn { display: none; } -.menu-navlink { - @apply font-medium - text-sm - uppercase; -} +/* RESPONSIVE */ @media (max-width: 960px) { + .primary-menu-container { + @apply my-0 max-h-screen; + li:has(.sub-menu) { + .sub-menu { + @apply mx-auto; + /* position: static !important; */ + position: static; + } + } + } + #primary-menu { @apply bg-primary mt-0 left-0 absolute; - transition: all 0.3s ease-in-out; + transition: all 0.3s ease-out; transform: translateY(-110vh); z-index: 800; height: fit-content; @@ -42,6 +95,7 @@ } /* BURGER MENU */ body:has(header.burger_menu_active) { + @apply max-h-screen; overflow: hidden; } @@ -68,3 +122,25 @@ } } } +@media (max-width: 960px) and (hover: none) { + body { + background-color: red !important; + } + /* ul { + @apply w-max mx-auto; + } */ + .primary-menu-container { + li.menu-item { + @apply mx-auto !text-left; + } + li:has(.sub-menu) { + > a::after { + display: none; + } + .sub-menu { + @apply block pl-12; + display: block; + } + } + } +} diff --git a/resources/img/arrow_down_white.svg b/resources/img/arrow_down_white.svg new file mode 100644 index 0000000..73eb54d --- /dev/null +++ b/resources/img/arrow_down_white.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/img/arrow_right_white.svg b/resources/img/arrow_right_white.svg new file mode 100644 index 0000000..25409bb --- /dev/null +++ b/resources/img/arrow_right_white.svg @@ -0,0 +1,3 @@ + + +