From a103e01286c671572d72de3947a6f90f8f861c89 Mon Sep 17 00:00:00 2001 From: Antoine M Date: Tue, 4 Jul 2023 17:08:42 +0200 Subject: [PATCH] advancing on menu --- css/app.css | 103 +++++++++--- includes/navwalker.php | 71 ++++++++- resources/css/layout/menu-renovateur.css | 59 ++++++- .../home/home-header/home-header.css | 5 +- .../header/menu-renovateur.php | 148 +++++++++++++++--- .../header/menu-renovateur_old.php | 59 +++++++ theme.json | 2 +- 7 files changed, 389 insertions(+), 58 deletions(-) create mode 100644 template-components/header/menu-renovateur_old.php diff --git a/css/app.css b/css/app.css index 63465fd..bf605c8 100644 --- a/css/app.css +++ b/css/app.css @@ -1837,21 +1837,11 @@ article > *:not(.entry-content), } } -.menu-renovateur__main-elements { - display: flex; - width: 100%; - align-items: center; - justify-content: space-between; - --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); -} +/* &__main-elements { + @apply w-full bg-red-200 flex justify-between items-center; + } */ .menu-renovateur__navlist { - left: 50%; - top: 50%; - --tw-translate-x: -50%; - --tw-translate-y: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); justify-content: center; gap: 2rem; --tw-bg-opacity: 1; @@ -1860,17 +1850,16 @@ article > *:not(.entry-content), @media (min-width: 782px) { .menu-renovateur__navlist { - position: absolute; display: flex; } } -.menu-renovateur__navlist li .page_icon { +.menu-renovateur__navlist > li .page_icon { height: 50px; width: 50px; } -.menu-renovateur__navlist li { +.menu-renovateur__navlist > li { display: flex; align-items: center; justify-content: center; @@ -1879,10 +1868,83 @@ article > *:not(.entry-content), color: rgb(0 0 0 / var(--tw-text-opacity)); } -.menu-renovateur__navlist li .sub-menu { +@media (min-width: 960px) { + .menu-renovateur__navlist > li { + position: relative; + } +} + +/* Generic Submenu Item */ + +.menu-renovateur__navlist .sub-menu { + position: absolute; + bottom: 0px; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + transform: translateY(100%); + width: 100vw; + max-width: 48rem; + padding: 2rem; +} + +.menu-renovateur__navlist .sub-menu--closed { display: none; } +.menu-renovateur__navlist .sub-menu--open { + display: block; +} + +/* Conseils — Thamtiques Submenu Item */ + +.menu-renovateur__navlist li#menu-item-168 hr { + margin-top: 0.75rem; + margin-bottom: 1.5rem; +} + +.menu-renovateur__navlist li#menu-item-168 .sub-menu { + /* @apply hidden; */ +} + +.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; +} + +.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__item { + display: flex; + gap: 1rem; +} + +.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__thematique-icon { + max-width: 80px; +} + +.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__description { + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 400; + line-height: 1.3; +} + +/* Conseils — Thamtiques Submenu Item */ + +.menu-renovateur__navlist li#menu-item-169 .sub-menu { + /* @apply hidden; */ +} + +.menu-renovateur__navlist li#menu-item-169 .sub-menu__navlist { + display: flex; + gap: 1.25rem; +} + +.menu-renovateur__navlist li#menu-item-169 .sub-menu__navlist li { + -webkit-text-decoration-line: underline; + text-decoration-line: underline; + text-underline-offset: 4px; +} + @media (min-width: 782px) { .menu-renovateur__mobile-menu-toggle { display: none; @@ -2281,7 +2343,6 @@ article > *:not(.entry-content), /* Home */ .home-header { - position: relative; margin-left: auto; margin-right: auto; margin-bottom: 6rem; @@ -2346,10 +2407,8 @@ article > *:not(.entry-content), } .home-header__scroll-down-indicator__arrow { - -webkit-animation: bouncingArrow 1s infinite alternate - cubic-bezier(0.01, 0.61, 0.67, 0.99); - animation: bouncingArrow 1s infinite alternate - cubic-bezier(0.01, 0.61, 0.67, 0.99); + -webkit-animation: bouncingArrow 1s infinite alternate cubic-bezier(0.01, 0.61, 0.67, 0.99); + animation: bouncingArrow 1s infinite alternate cubic-bezier(0.01, 0.61, 0.67, 0.99); /* cubic-bezier(0.01, 0.61, 0.39, 1); */ /* cubic-bezier(0.18, 0.89, 0.3, 1); */ } diff --git a/includes/navwalker.php b/includes/navwalker.php index 6ac58ef..f94bec9 100644 --- a/includes/navwalker.php +++ b/includes/navwalker.php @@ -6,6 +6,9 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args) { + // write_log($item); + + // $item->classes = array_merge($item->classes, array('menu-item-' . $item->ID)); // #### MENU HOMEGRADE HEADER if ($args->theme_location === "homegrade" && $args->menu_id === "menu-homegrade-navlist" && in_array('menu-item-has-children', $item->classes, true)) { @@ -15,24 +18,38 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args) // #### MENU HOMEGRADE FOOTER if ($args->theme_location === "homegrade" && $args->menu_class === "menu-homegrade-footer" && in_array('menu-item-has-children', $item->classes, true)) { $output = '
' . $item->title . '
'; - write_log("YOOO ITEM"); - write_log($item); } + + if ($args->theme_location === "renovateur") { $page_icon = get_field('page_icon', $item->object_id); - // write_log($item); if (in_array('menu-item-has-children', $item->classes, true)) { $output = ''; } - if (isset($page_icon['url'])) { - write_log($page_icon['url']); + // #### ICONE DE PAGE FOR TOP LEVEL MENU ITEMS + if (isset($page_icon)) { $icon = ''; $link = $output; $output = $icon . $link; } + + write_log($output); + + // #### TAXONOMY : GET ICON & INFOS ABOUT TAX + + if ($item->type === "taxonomy") { + $term = get_term_by('id', $item->object_id, 'thematiques'); + $cover = get_field('taxonomy_pictures', "thematiques_" . $item->object_id); + + $output = ''; + $output .= ''; + $output .= '
' . $item->title . "
"; + $output .= '

' . $term->description . "

"; + $output .= ""; + } } if ($args->theme_location === "footer" && in_array('menu-item-has-children', $item->classes, true)) { @@ -41,3 +58,47 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args) return $output; } add_filter('walker_nav_menu_start_el', 'wrap_parent_menu_item_buttons', 10, 4); + +/* ----------------------------------------------------------- + Pass Specific submenus-classnames for menu renovateur + -----------------------------------------------------------*/ + + + +function customize_submenu_classnames($classes, $args, $depth) +{ + // Here we can additionally use menu arguments. + // if ($args->theme_location === "renovateur") { + // $default_class_name_key = array_search('sub-menu', $classes); + + // if (false !== $default_class_name_key) { + // unset($classes[$default_class_name_key]); + // } + // $classes[] = 'header-submenu'; + // $classes[] = "depth-{$depth}"; + // $classes[] = 'sub-menu'; + // $classes[] = 'test'; + // } + // write_log($classes); + // write_log($classes); + + return $classes; +} +add_filter('nav_menu_submenu_css_class', 'customize_submenu_classnames', 10, 3); + + +/* ----------------------------------------------------------- + TEST + -----------------------------------------------------------*/ + + +function wpdocs_unset_menu_items($menu_objects, $args) +{ + + if ($args->theme_location === "renovateur") { + // write_log($args); + // write_log($menu_objects); + return $menu_objects; + } +} +add_filter('wp_nav_menu_objects', 'wpdocs_unset_menu_items', 10, 2); \ No newline at end of file diff --git a/resources/css/layout/menu-renovateur.css b/resources/css/layout/menu-renovateur.css index fa095c5..405c40f 100644 --- a/resources/css/layout/menu-renovateur.css +++ b/resources/css/layout/menu-renovateur.css @@ -13,26 +13,71 @@ w-[190px] xl:w-[222px]; } - &__main-elements { + /* &__main-elements { @apply w-full bg-red-200 flex justify-between items-center; - } + } */ &__navlist { - @apply md:absolute md:flex justify-center gap-8 bg-green-200 - left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2; + @apply md:flex justify-center gap-8 bg-green-200; - li { + > li { .page_icon { @apply w-[50px] h-[50px]; } @apply text-black flex + lg:relative justify-center items-center font-bold; - - .sub-menu { + } + /* Generic Submenu Item */ + .sub-menu { + @apply absolute bottom-0 bg-white; + transform: translateY(100%); + @apply max-w-3xl w-screen p-8; + &--closed { @apply hidden; } + &--open { + @apply block; + } + } + + /* Conseils — Thamtiques Submenu Item */ + li#menu-item-168 { + hr { + @apply my-3 mb-6; + } + .sub-menu { + /* @apply hidden; */ + } + .sub-menu__navlist { + @apply grid grid-cols-2 gap-4; + &__item { + @apply flex gap-4; + } + + &__thematique-icon { + max-width: 80px; + } + &__description { + @apply text-sm font-normal; + line-height: 1.3; + } + } + } + /* Conseils — Thamtiques Submenu Item */ + li#menu-item-169 { + .sub-menu { + /* @apply hidden; */ + } + + .sub-menu__navlist { + @apply flex gap-5; + li { + @apply underline underline-offset-4; + } + } } } &__mobile-menu-toggle { diff --git a/template-blocks/home/home-header/home-header.css b/template-blocks/home/home-header/home-header.css index 4df3b14..d9c6294 100755 --- a/template-blocks/home/home-header/home-header.css +++ b/template-blocks/home/home-header/home-header.css @@ -1,7 +1,7 @@ .home-header { @apply max-w-screen-xl mx-auto px-6 lg:px-16 pt-16 xl:pt-20 mb-24 - relative + /* relative */ /* bg-red-100 */; /* aspect-ratio: 1.5; */ @@ -25,8 +25,7 @@ width: 80px; height: 80px; &__arrow { - animation: bouncingArrow 1s infinite alternate - cubic-bezier(0.01, 0.61, 0.67, 0.99); + animation: bouncingArrow 1s infinite alternate cubic-bezier(0.01, 0.61, 0.67, 0.99); /* cubic-bezier(0.01, 0.61, 0.39, 1); */ /* cubic-bezier(0.18, 0.89, 0.3, 1); */ } diff --git a/template-components/header/menu-renovateur.php b/template-components/header/menu-renovateur.php index 4d94174..2bc083b 100644 --- a/template-components/header/menu-renovateur.php +++ b/template-components/header/menu-renovateur.php @@ -1,38 +1,146 @@ term_id, array('order' => 'DESC')); +// echo '
';
+// print_r($menuitems);
+// echo '
'; ?> + + + + + + + + + +
- 'false', - 'theme_location' => 'renovateur', - 'li_class' => 'menu-navlink', - 'fallback_cb' => false, - 'menu_class' => "menu-renovateur__navlist", - ) - ); ?> - + + + + + + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/theme.json b/theme.json index 36f8ea4..7ad6ea0 100644 --- a/theme.json +++ b/theme.json @@ -85,7 +85,7 @@ "color": "#FFE5FD" }, { - "name": "Location", + "name": "Location / Rénovation Circulaire", "slug": "location", "color": "#DF002B" },