advancing on menu
This commit is contained in:
parent
5324245dd4
commit
a103e01286
103
css/app.css
103
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); */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
||||
}
|
||||
/* 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 {
|
||||
|
|
|
|||
|
|
@ -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); */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,22 @@
|
|||
<?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">
|
||||
|
|
@ -20,19 +36,111 @@
|
|||
|
||||
|
||||
</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">
|
||||
|
|
|
|||
59
template-components/header/menu-renovateur_old.php
Normal file
59
template-components/header/menu-renovateur_old.php
Normal 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>
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
"color": "#FFE5FD"
|
||||
},
|
||||
{
|
||||
"name": "Location",
|
||||
"name": "Location / Rénovation Circulaire",
|
||||
"slug": "location",
|
||||
"color": "#DF002B"
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user