Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Handling secondary submenus

Browse Source
This commit is contained in:
Antoine M 2025-11-27 09:17:11 +01:00
parent 869509820c
commit b9c5f81146
3 changed files with 118 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
functions.php
View File

@ -12,7 +12,7 @@ require_once(__DIR__ . '/includes/social-networks.php');
require_once(__DIR__ . '/includes/forms.php');
require_once(__DIR__ . '/includes/rapport-activites.php');
require_once(__DIR__ . '/includes/equipe.php');
require_once(__DIR__ . '/includes/navwalker.php');
// require_once(__DIR__ . '/includes/widget.php');
// require_once( __DIR__ . '/includes/taxonomy.php');

95
includes/navwalker.php
View File

@ -1,28 +1,93 @@
<?php
class wp_nav_menu_walker extends Walker_Nav_menu
/* -----------------------------------------------------------
Walker to ReWrap li submenu parent with button instead of
-----------------------------------------------------------*/
function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
{
// #### MENU HOMEGRADE HEADER
if ($args->theme_location === "secondary" && in_array('menu-item-has-children', $item->classes, true)) {
function start_lvl(&$output, $depth = 0, $args = null)
{
$tmp_class = "child-" . $depth;
$output .= "<ul class='" . $tmp_class . "'>";
$output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
}
function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
return $output;
}
add_filter('walker_nav_menu_start_el', 'wrap_parent_menu_item_buttons', 10, 4);
/* ----------------------------------------------------------------
##### Adds option 'li_class' to 'wp_nav_menu
------------------------------------------------------------------*/
function tailpress_nav_menu_add_li_class($classes, $item, $args, $depth)
{
$output .= "<li>I like pie" . $item->title;
// var_dump($args);
if (isset($args->li_class)) {
$classes[] = $args->li_class;
}
function end_el(&$output, $item, $depth = 0, $args = null)
if (isset($args->{"li_class_$depth"})) {
$classes[] = $args->{"li_class_$depth"};
}
return $classes;
}
add_filter('nav_menu_css_class', 'tailpress_nav_menu_add_li_class', 10, 4);
/* ----------------------------------------------------------------
##### Adds option 'submenu_class' to 'wp_nav_menu'
------------------------------------------------------------------*/
function tailpress_nav_menu_add_submenu_class($classes, $args, $depth)
{
$output .= "...</li>";
if (isset($args->submenu_class)) {
$classes[] = $args->submenu_class;
}
if (isset($args->{"submenu_class_$depth"})) {
$classes[] = $args->{"submenu_class_$depth"};
}
return $classes;
}
add_filter('nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3);
/* ----------------------------------------------------------------
##### Inject ACF page_icon into submenu items
------------------------------------------------------------------*/
function carhop_add_submenu_item_icon($output, $item, $depth, $args)
{
// Only for submenu items (depth >= 1
if (!isset($args->theme_location) || $args->theme_location !== 'secondary' || $depth < 1 || !function_exists('get_field')) {
return $output;
}
// Try fetching the icon from the menu item itself, then fallback to linked object (e.g., page)
$pageIcon = get_field('page_icon', $item->object_id);
if (empty($pageIcon)) {
return $output;
}
$icon_html = '';
$excerpt_html = '';
// Attachment array with ID (ACF image field)
if (is_array($pageIcon) && isset($pageIcon['url'])) {
$icon_html = '<img src="' . esc_url($pageIcon['url']) . '" class="menu-item__icon-img" alt="" aria-hidden="true" />';
}
if (has_excerpt($item->object_id)) {
$excerpt_html = '<p class="menu-item__excerpt">' . get_the_excerpt($item->object_id) . '</p>';
}
return '<a class="menu-item__content" href="' . $item->url . '">' . $icon_html . '<div class="menu-item__content-inner"><p class="menu-item__title">' . $item->title . '</p>' . $excerpt_html . '</div></a>';
}
add_filter('walker_nav_menu_start_el', 'carhop_add_submenu_item_icon', 15, 4);

82
resources/js/header.js
View File

@ -1,61 +1,49 @@
export default function menuInit() {
let main_navigation =
document.querySelector('#primary-menu');
let main_navigation = document.querySelector('#primary-menu');
const header = document.querySelector('#primary-header');
const primary_menu =
header.querySelector('#primary-menu');
const burgerMenuToggle = header.querySelector(
'#burger-menu-toggle'
);
const submenuToggles = primary_menu.querySelectorAll(
'.menu-item-submenu-toggle'
);
const primary_menu = header.querySelector('#primary-menu');
const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
console.log(submenuToggles);
// #### Open/close burger nav
burgerMenuToggle.addEventListener('click', function (e) {
e.preventDefault();
header.classList.toggle('nav-open');
burgerMenuToggle.toggleAttribute('aria-expanded');
gsap.from(primary_menu, {
opacity: 20,
y: '-100vh',
duration: 0.5,
ease: Power4.easeOut,
});
});
// burgerMenuToggle.addEventListener('click', function (e) {
// e.preventDefault();
// header.classList.toggle('nav-open');
// burgerMenuToggle.toggleAttribute('aria-expanded');
// gsap.from(primary_menu, {
// opacity: 20,
// y: '-100vh',
// duration: 0.5,
// ease: Power4.easeOut,
// });
// });
// #### Close nav when reaching the end of the menu with tab
document.addEventListener(
'focusin',
(e) => {
const header = document.querySelector(
'#primary-header'
);
if (
header.classList.contains('nav-open') &&
!header.contains(document.activeElement)
) {
header.classList.remove('nav-open');
burgerMenuToggle.setAttribute(
'aria-expanded',
false
);
// // #### Close nav when reaching the end of the menu with tab
// document.addEventListener(
// 'focusin',
// (e) => {
// const header = document.querySelector('#primary-header');
// if (
// header.classList.contains('nav-open') &&
// !header.contains(document.activeElement)
// ) {
// header.classList.remove('nav-open');
// burgerMenuToggle.setAttribute('aria-expanded', false);
burgerMenuToggle.focus();
}
},
true
);
// burgerMenuToggle.focus();
// }
// },
// true
// );
submenuToggles.forEach((button) => {
button.addEventListener('click', function (e) {
let isExpanded =
button.getAttribute('aria-expanded') === 'true';
let isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
button.parentElement
.querySelector('.sub-menu')
.classList.toggle('sub-menu-open');
button.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu-open');
});
});
}