Last active
February 9, 2024 08:23
-
-
Save blift/da7b2245686639ca0d6d805833545030 to your computer and use it in GitHub Desktop.
Drilldown menu for Wordpress sub pages. For Sage by Roots + TailwindCSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Mobile Offcanvas Menu --> | |
<div id="offcanvas__open" class="block lg:hidden" aria-expanded="false"> | |
<span>Open</span> | |
</div> | |
<div id="offcanvas__menu" class="relative"> | |
<div class="offcanvas__container bg-blue-300 w-full h-full min-h-screen absolute top-0 left-0 z-40"> | |
<div class="p-8 relative"> | |
@if (has_nav_menu('secondary_navigation')) | |
<nav class="nav-secondary block lg:hidden" aria-label="{{ wp_get_nav_menu_name('secondary_navigation') }}"> | |
{!! wp_nav_menu(['theme_location' => 'secondary_navigation', 'menu_class' => 'nav flex flex-col', 'echo' => false]) !!} | |
</nav> | |
@endif | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Off canvas */ | |
#offcanvas__menu { | |
@apply hidden; | |
&.is-active { | |
@apply block; | |
} | |
} | |
/* Submenu */ | |
.nav-secondary { | |
.submenu__container { | |
@apply opacity-0 h-0 invisible transition-all; | |
&.is-active { | |
@apply p-8 opacity-100 h-auto visible absolute w-full h-full bg-red-500 left-0 top-0 min-h-screen; | |
} | |
ul { | |
@apply mt-6; | |
} | |
} | |
#submenu__close { | |
@apply w-full h-6 bg-blue-600 flex justify-end relative; | |
&:before { | |
@apply content-['<BACK'] absolute left-0; | |
} | |
} | |
li { | |
>a { | |
@apply relative w-full block bg-purple-500 mt-2; | |
} | |
} | |
li.menu-item-has-children { | |
>a { | |
&:after { | |
@apply content-['>'] absolute right-0; | |
} | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function OffCanvas() { | |
const offOPen = document.getElementById('offcanvas__open'); | |
const offMenu = document.getElementById('offcanvas__menu'); | |
const body = document.body; | |
const offNav = document.querySelectorAll('.nav-secondary ul .menu-item'); | |
// Aria expanded | |
const ariaMenu = () => { | |
if( offMenu.classList.contains('is-active') ) { | |
offMenu.ariaExpanded = true; | |
} else { | |
offMenu.ariaExpanded = false; | |
} | |
} | |
// Open menu | |
offOPen.addEventListener('click', function () { | |
offMenu.classList.toggle('is-active') | |
body.classList.toggle('overflow-y-hidden') | |
closeSubmenu() | |
ariaMenu() | |
}); | |
// Foreach li elements to find submenu | |
offNav.forEach(el => { | |
if (el.classList.contains('menu-item-has-children')) { | |
const submenuLink = el.firstChild; | |
const submenu = submenuLink.nextElementSibling; | |
// wrap function | |
const wrap = (el, wrapper) => { | |
el.parentNode.insertBefore(wrapper, el); | |
wrapper.appendChild(el); | |
} | |
// create div wrapper | |
let div = document.createElement('div'); | |
div.classList.add('submenu__container'); | |
// wrap ul submenu with div submenu__container | |
wrap(submenu, div) | |
// create span close button | |
let createCloseBtn = document.createElement('span'); | |
createCloseBtn.setAttribute('id', 'submenu__close'); | |
// Add close menu | |
submenu.before(createCloseBtn); | |
// Click on submenu link | |
submenuLink.addEventListener('click', function (e) { | |
e.preventDefault() | |
activeSubmenu(this.nextElementSibling) | |
}) | |
} | |
}); | |
// Activate submenu | |
const activeSubmenu = (submenu) => { | |
const textContent = submenu.previousElementSibling.textContent; | |
const close = submenu.firstChild; | |
let createMenuTitle = document.createElement('p'); | |
createMenuTitle.innerText = textContent; | |
// insert title | |
if (!close.firstChild) { | |
close.appendChild(createMenuTitle); | |
} | |
// add class to submenu | |
submenu.classList.toggle('is-active'); | |
} | |
// Close OffCanvas submenu | |
const closeSubmenu = () => { | |
let subMenus = document.getElementsByClassName('submenu__container'); | |
// for loop for all sub menus | |
for (let i = 0; i < subMenus.length; i++) { | |
// current sub menu | |
const currentSubMenu = subMenus[i]; | |
// current sub menu close | |
const closeMenu = currentSubMenu.firstChild; | |
// close event | |
closeMenu.addEventListener('click', function (e) { | |
e.preventDefault() | |
currentSubMenu.classList.remove('is-active'); | |
}); | |
} | |
} | |
} | |
export default OffCanvas |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1. Register new naviagation | |
'secondary_navigation' => __('Secondary Navigation', 'sage') | |
2. Coppy all files to your theme | |
3. Create new menu with sub pages, parent page as custom link with # in link. | |
- title in top bar is copied from link name, so it shouldn't be problem with multi langage. | |
- styles are prapred in .scss file to customize by yourself. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment