Compare commits
No commits in common. "5df1252076c27b1683766c9743156b23bde26fa4" and "869509820c08a58aa966725ddede5d78ad5a51ae" have entirely different histories.
5df1252076
...
869509820c
|
|
@ -12,7 +12,7 @@ require_once(__DIR__ . '/includes/social-networks.php');
|
||||||
require_once(__DIR__ . '/includes/forms.php');
|
require_once(__DIR__ . '/includes/forms.php');
|
||||||
require_once(__DIR__ . '/includes/rapport-activites.php');
|
require_once(__DIR__ . '/includes/rapport-activites.php');
|
||||||
require_once(__DIR__ . '/includes/equipe.php');
|
require_once(__DIR__ . '/includes/equipe.php');
|
||||||
require_once(__DIR__ . '/includes/navwalker.php');
|
|
||||||
|
|
||||||
// require_once(__DIR__ . '/includes/widget.php');
|
// require_once(__DIR__ . '/includes/widget.php');
|
||||||
// require_once( __DIR__ . '/includes/taxonomy.php');
|
// require_once( __DIR__ . '/includes/taxonomy.php');
|
||||||
|
|
|
||||||
|
|
@ -1,93 +1,28 @@
|
||||||
<?php
|
<?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)) {
|
|
||||||
|
|
||||||
$output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
|
function start_lvl(&$output, $depth = 0, $args = null)
|
||||||
|
{
|
||||||
|
|
||||||
|
$tmp_class = "child-" . $depth;
|
||||||
|
|
||||||
|
$output .= "<ul class='" . $tmp_class . "'>";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
|
||||||
|
{
|
||||||
|
|
||||||
|
$output .= "<li>I like pie" . $item->title;
|
||||||
|
|
||||||
|
// var_dump($args);
|
||||||
|
}
|
||||||
|
|
||||||
|
function end_el(&$output, $item, $depth = 0, $args = null)
|
||||||
|
{
|
||||||
|
$output .= "...</li>";
|
||||||
}
|
}
|
||||||
|
|
||||||
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)
|
|
||||||
{
|
|
||||||
if (isset($args->li_class)) {
|
|
||||||
$classes[] = $args->li_class;
|
|
||||||
}
|
|
||||||
|
|
||||||
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)
|
|
||||||
{
|
|
||||||
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);
|
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
.secondary-menu-nav {
|
.secondary-menu-nav {
|
||||||
@apply max-w-screen-2xl w-full mx-auto flex justify-between items-center;
|
@apply max-w-screen-2xl w-full mx-auto flex justify-between items-center;
|
||||||
|
|
||||||
> ul {
|
ul {
|
||||||
@apply flex flex-col lg:flex-row justify-between gap-4;
|
@apply flex flex-col lg:flex-row justify-between gap-4;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
|
|
@ -38,71 +38,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* #### PARENT WITH CHILDREN */
|
|
||||||
li.menu-item-has-children {
|
|
||||||
@apply relative;
|
|
||||||
|
|
||||||
.sub-menu {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
&:has(button.menu-item__submenu-toggle[aria-expanded='true']) {
|
|
||||||
.sub-menu {
|
|
||||||
@apply block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #### SUBMENU */
|
|
||||||
|
|
||||||
button.menu-item__submenu-toggle {
|
|
||||||
@apply text-white;
|
|
||||||
&:hover,
|
|
||||||
&[aria-expanded='true'] {
|
|
||||||
@apply underline underline-offset-8 decoration-1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sub-menu {
|
|
||||||
@apply flex flex-col border border-white bg-primary absolute top-10 left-0 z-30;
|
|
||||||
width: 330px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
@apply border-b border-white;
|
|
||||||
a {
|
|
||||||
@apply py-6 px-4 block w-full;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
backdrop-filter: brightness(0.9);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
@apply border-b-0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li.has-page-icon {
|
|
||||||
.menu-item__content {
|
|
||||||
@apply flex items-center gap-4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.menu-item__content {
|
|
||||||
.menu-item__title {
|
|
||||||
@apply font-medium;
|
|
||||||
}
|
|
||||||
.menu-item__excerpt {
|
|
||||||
@apply opacity-80;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none !important;
|
|
||||||
|
|
||||||
.menu-item__title {
|
|
||||||
text-decoration: underline !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.secondary-menu-container {
|
.secondary-menu-container {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import initFooterShapes from './footer';
|
||||||
import handleScrollTop from './utilities/scroll-top';
|
import handleScrollTop from './utilities/scroll-top';
|
||||||
import handleInsidePageScrolling from './page-scrolling';
|
import handleInsidePageScrolling from './page-scrolling';
|
||||||
window.addEventListener('load', function () {
|
window.addEventListener('load', function () {
|
||||||
menuInit();
|
// menuInit();
|
||||||
initFooterShapes();
|
initFooterShapes();
|
||||||
handleScrollTop();
|
handleScrollTop();
|
||||||
handleInsidePageScrolling();
|
handleInsidePageScrolling();
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,61 @@
|
||||||
export default function menuInit() {
|
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 header = document.querySelector('#primary-header');
|
||||||
const primary_menu = header.querySelector('#primary-menu');
|
const primary_menu =
|
||||||
const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
|
header.querySelector('#primary-menu');
|
||||||
const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
|
const burgerMenuToggle = header.querySelector(
|
||||||
|
'#burger-menu-toggle'
|
||||||
console.log(submenuToggles);
|
);
|
||||||
|
const submenuToggles = primary_menu.querySelectorAll(
|
||||||
|
'.menu-item-submenu-toggle'
|
||||||
|
);
|
||||||
|
|
||||||
// #### Open/close burger nav
|
// #### Open/close burger nav
|
||||||
// burgerMenuToggle.addEventListener('click', function (e) {
|
burgerMenuToggle.addEventListener('click', function (e) {
|
||||||
// e.preventDefault();
|
e.preventDefault();
|
||||||
// header.classList.toggle('nav-open');
|
header.classList.toggle('nav-open');
|
||||||
// burgerMenuToggle.toggleAttribute('aria-expanded');
|
burgerMenuToggle.toggleAttribute('aria-expanded');
|
||||||
// gsap.from(primary_menu, {
|
gsap.from(primary_menu, {
|
||||||
// opacity: 20,
|
opacity: 20,
|
||||||
// y: '-100vh',
|
y: '-100vh',
|
||||||
// duration: 0.5,
|
duration: 0.5,
|
||||||
// ease: Power4.easeOut,
|
ease: Power4.easeOut,
|
||||||
// });
|
});
|
||||||
// });
|
});
|
||||||
|
|
||||||
// // #### Close nav when reaching the end of the menu with tab
|
// #### Close nav when reaching the end of the menu with tab
|
||||||
// document.addEventListener(
|
document.addEventListener(
|
||||||
// 'focusin',
|
'focusin',
|
||||||
// (e) => {
|
(e) => {
|
||||||
// const header = document.querySelector('#primary-header');
|
const header = document.querySelector(
|
||||||
// if (
|
'#primary-header'
|
||||||
// header.classList.contains('nav-open') &&
|
);
|
||||||
// !header.contains(document.activeElement)
|
if (
|
||||||
// ) {
|
header.classList.contains('nav-open') &&
|
||||||
// header.classList.remove('nav-open');
|
!header.contains(document.activeElement)
|
||||||
// burgerMenuToggle.setAttribute('aria-expanded', false);
|
) {
|
||||||
|
header.classList.remove('nav-open');
|
||||||
|
burgerMenuToggle.setAttribute(
|
||||||
|
'aria-expanded',
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
// burgerMenuToggle.focus();
|
burgerMenuToggle.focus();
|
||||||
// }
|
}
|
||||||
// },
|
},
|
||||||
// true
|
true
|
||||||
// );
|
);
|
||||||
|
|
||||||
submenuToggles.forEach((button) => {
|
submenuToggles.forEach((button) => {
|
||||||
button.addEventListener('click', function (e) {
|
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.setAttribute('aria-expanded', !isExpanded);
|
||||||
|
|
||||||
button.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu-open');
|
button.parentElement
|
||||||
|
.querySelector('.sub-menu')
|
||||||
|
.classList.toggle('sub-menu-open');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user