advancing on menu

This commit is contained in:
Antoine M 2023-07-04 17:08:42 +02:00
parent 5324245dd4
commit a103e01286
7 changed files with 389 additions and 58 deletions

View File

@ -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); */
}

View File

@ -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 = '<h6 class="page-group-title">' . $item->title . '</h6>';
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 = '<button type="button" class="menu-item-submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
}
if (isset($page_icon['url'])) {
write_log($page_icon['url']);
// #### ICONE DE PAGE FOR TOP LEVEL MENU ITEMS
if (isset($page_icon)) {
$icon = '<img class="page_icon" src="' . $page_icon['url'] . '" alt=""/>';
$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 = '<a class="lol" href="' . $item->url . '">';
$output .= '<img class="thematique-icon" src="' . $cover['icon']['url'] . '"/>';
$output .= '<h6>' . $item->title . "</h6>";
$output .= '<p>' . $term->description . "</p>";
$output .= "</a>";
}
}
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);

View File

@ -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 {

View File

@ -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); */
}

View File

@ -1,38 +1,146 @@
<?php
$menu_name = 'renovateur';
$locations = get_nav_menu_locations();
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
// echo '<pre>';
// print_r($menuitems);
// echo '</pre>';
?>
<!-- MENU RENOV NEW -->
<!-- MENU RENOV ANCIEN -->
<div class="menu-renovateur">
<div class="website_logo">
<?php if (has_custom_logo()) { ?>
<?php the_custom_logo(); ?>
<?php the_custom_logo(); ?>
<?php } else { ?>
<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
<?php echo get_bloginfo('name'); ?>
</a>
<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
<?php echo get_bloginfo('name'); ?>
</a>
<p class="text-sm font-light text-gray-600">
<?php echo get_bloginfo('description'); ?>
</p>
<p class="text-sm font-light text-gray-600">
<?php echo get_bloginfo('description'); ?>
</p>
<?php } ?>
</div>
<?php
wp_nav_menu(
array(
'container' => 'false',
'theme_location' => 'renovateur',
'li_class' => 'menu-navlink',
'fallback_cb' => false,
'menu_class' => "menu-renovateur__navlist",
)
); ?>
<button id="search-module-toggle" class="menu-renovateur__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary " title="<?php echo __('Facebook', "homegrade-theme-terminologie") ?>"
href="<?php echo $social_networks['facebook_profile_url'] ?>">
<ul id="menu-menu-renovateur" class="menu-renovateur__navlist">
<?php
$count = 0;
$submenu = false;
foreach ($menuitems as $key => $item) :
// write_log("item");
// write_log($item);
$link = $item->url;
$title = $item->title;
// item does not have a parent so menu_item_parent equals 0 (false)
?>
<?php
/* -----------------------------------------------------------
IF NOT A SUBMENU
-----------------------------------------------------------*/
if (!$item->menu_item_parent) : ?>
<?php $parent_id = $item->ID; ?>
<!-- HAS SUBMENU -->
<?php if ($menuitems[$key + 1]->menu_item_parent == $item->ID) : ?>
<li id="menu-item-<?php echo $item->ID ?>" class="menu-item-has-children">
<button>
<?php echo $title; ?>
</button>
<!-- NO SUBMENU -->
<?php else : ?>
<li id="menu-item-<?php echo $item->ID ?>">
<a href=" <?php echo $link; ?>" class="title">
<?php echo $title; ?>
</a>
<?php endif; ?>
<?php endif; ?>
<?php
/* -----------------------------------------------------------
IF IS A SUBMENU
-----------------------------------------------------------*/
write_log($item);
// echo '<pre>';
// print_r(168);
// print_r(gettype($item->ID));
// echo '</pre>';
if ($parent_id == $item->menu_item_parent) : ?>
<?php if (!$submenu) : $submenu = true; ?>
<div class="sub-menu sub-menu--closed">
<?php /* NOS CONSEILS — TAXONOMY SUBMENU TITLE */
if ($item->menu_item_parent === "168") : ?>
<h5>Découvrez nos conseils par thématique</h5>
<hr>
<?php endif; ?>
<?php /* AIDES FINANCIERES SUBMENU TITLE */
if ($item->menu_item_parent === "169") : ?>
<h5>Quelles sont les aides financières disponibles pour votre logement ?</h5>
<hr>
<?php endif; ?>
<ul class="sub-menu__navlist">
<?php endif; ?>
<li class="sub-menu__navlist__item">
<?php
// #### IF IS TAXONOMY SUB-ITEM
if ($item->type === "taxonomy") :
$term = get_term_by('id', $item->object_id, 'thematiques');
$cover = get_field('taxonomy_pictures', "thematiques_" . $item->object_id);
?>
<img class="sub-menu__navlist__thematique-icon" src="<?php echo $cover['icon']['url'] ?>" alt="">
<div class="details">
<h6><?php echo $title; ?></h6>
<p class="sub-menu__navlist__description"><?php echo $term->description ?></p>
</div>
<?php else : ?>
<a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
<?php endif; ?>
</li>
<?php if ($menuitems[$count + 1]->menu_item_parent != $parent_id && $submenu) : ?>
</ul>
</div>
<?php $submenu = false;
endif; ?>
<?php endif; ?>
<?php if ($menuitems[$count + 1]->menu_item_parent != $parent_id) : ?>
</li>
<?php $submenu = false;
endif; ?>
<?php $count++;
endforeach; ?>
</ul>
<button id="search-module-toggle" class="menu-renovateur__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary " title="<?php echo __('Facebook', "homegrade-theme-terminologie") ?>" href="<?php echo $social_networks['facebook_profile_url'] ?>">
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/search-icon.svg' ?>" alt="">
</button>
<button id="mobile-menu-toggle" class="menu-renovateur__mobile-menu-toggle cta cta--outline cta--button">

View File

@ -0,0 +1,59 @@
<?php
$menu_name = 'renovateur';
$locations = get_nav_menu_locations();
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
// echo '<pre>';
// print_r($menuitems);
// echo '</pre>';
?>
<!-- MENU RENOV ANCIEN -->
<div class="menu-renovateur">
<div class="website_logo">
<?php if (has_custom_logo()) { ?>
<?php the_custom_logo(); ?>
<?php } else { ?>
<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
<?php echo get_bloginfo('name'); ?>
</a>
<p class="text-sm font-light text-gray-600">
<?php echo get_bloginfo('description'); ?>
</p>
<?php } ?>
</div>
<?php
wp_nav_menu(
array(
'container' => 'false',
'theme_location' => 'renovateur',
'li_class' => 'menu-navlink',
'fallback_cb' => false,
'show_parent' => true,
'menu_class' => "menu-renovateur__navlist",
)
);
?>
<button id="search-module-toggle" class="menu-renovateur__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary " title="<?php echo __('Facebook', "homegrade-theme-terminologie") ?>" href="<?php echo $social_networks['facebook_profile_url'] ?>">
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/search-icon.svg' ?>" alt="">
</button>
<button id="mobile-menu-toggle" class="menu-renovateur__mobile-menu-toggle cta cta--outline cta--button">
Menu
</button>
<!-- SEARCH MODULE -->
<?php get_template_part('template-components/header/search-module'); ?>
</div>

View File

@ -85,7 +85,7 @@
"color": "#FFE5FD"
},
{
"name": "Location",
"name": "Location / Rénovation Circulaire",
"slug": "location",
"color": "#DF002B"
},