Installation
Importez la fonction dans votre projet
import { MenuTwoPanel } from "@overdog/fn"
Créez une instance et initialisation
new MenuTwoPanel("#menu-two-panel", {
// options goes here
}).init()
Ajoutez les variants Tailwind dans la section plugins de votre fichier de config
Note : si vous utilisez plusieurs éléments de Overdog FN qui nécessitent les mêmes variants, vous les ajoutez seulement une fois.
module.exports = {
// ...
plugins: [
plugin(function ({ addVariant }) {
addVariant("is-open", "&[data-fn-is-open]")
addVariant("parent-is-open", "[data-fn-is-open] &")
})
]
}
Note : si vous souhaitez une mega-nav comme dans l'exemple, n'oubliez pas d'importer également la mega-nav et d'ajouter les variants Tailwind CSS correspondants. Voir la section Mega-Nav pour les détails.
Twig template Code
<div class="relative bg-white w-full h-[100px] z-40 border-b border-[#e3e3e3]">
<div id="nav-buttons-group" class="container flex items-center h-full justify-end">
<button data-fn-nav-button="1" class="rounded-full bg-gray-400 h-12 w-12 z-50" type="button" aria-label="Button 1" aria-haspopup="true" aria-expanded="false">1</button>
</div>
<nav
data-fn-nav-panel="1"
class="fixed z-30 top-0 left-0 w-full h-full -translate-y-full overflow-y-scroll overflow-x-hidden bg-white
nav-open-1:translate-y-0 nav-open-1:transition-transform nav-open-1:duration-300 nav-open-1:ease-nav-in"
>
<div class="container pt-44" role="navigation" aria-label="{{ 'Main menu'|t }}">
<ul id="menu-two-panel" class="relative" role="menubar">
{# item 1 #}
<li class="md:w-2/5" role="none" data-fn-menu-item>
<button
class="block p-4 text-left w-full bg-[#e3e3e3] mb-quarter parent-is-open:bg-slate-500 parent-is-open:text-white"
data-fn-target="submenu-1"
aria-haspopup="true"
aria-expanded="false"
aria-controls="submenu-1">
Fruits
</button>
<div
id="submenu-1"
data-fn-submenu
class="h-0 opacity-0 md:absolute md:w-3/5 transition-height md:transition-opacity duration-300 right-0 top-0 overflow-hidden parent-is-open:opacity-100"
>
<ul role="menubar" class="pb-4 md:p-[0_1rem_1rem_4rem]">
<li><a href="#" role="menuitem">Banana</a></li>
<li><a href="#" role="menuitem">Apple</a></li>
</ul>
</div>
</li>
{# item 2 #}
<li class="md:w-2/5" role="none" data-fn-menu-item>
<button
class="block p-4 text-left w-full bg-[#e3e3e3] mb-quarter parent-is-open:bg-slate-500 parent-is-open:text-white"
data-fn-target="submenu-2"
aria-haspopup="true"
aria-expanded="false"
aria-controls="submenu-2">
Meat
</button>
<div
id="submenu-2"
data-fn-submenu
class="h-0 opacity-0 md:absolute md:w-3/5 transition-height md:transition-opacity duration-300 right-0 top-0 overflow-hidden parent-is-open:opacity-100"
>
<ul role="menubar" class="pb-4 md:p-[0_1rem_1rem_4rem]">
<li><a href="#" role="menuitem">Steak</a></li>
<li><a href="#" role="menuitem">Ham</a></li>
</ul>
</div>
</li>
{# item 3 #}
<li class="md:w-2/5" role="none" data-fn-menu-item>
<button
class="block p-4 text-left w-full bg-[#e3e3e3] mb-quarter parent-is-open:bg-slate-500 parent-is-open:text-white"
data-fn-target="submenu-3"
aria-haspopup="true"
aria-expanded="false"
aria-controls="submenu-3">
Legumes
</button>
<div
id="submenu-3"
data-fn-submenu
class="h-0 opacity-0 md:absolute md:w-3/5 transition-height md:transition-opacity duration-300 right-0 top-0 overflow-hidden parent-is-open:opacity-100"
>
<ul role="menubar" class="pb-4 md:p-[0_1rem_1rem_4rem]">
<li><a href="#" role="menuitem">Tomato</a></li>
<li><a href="#" role="menuitem">Brocoli</a></li>
<li><a href="#" role="menuitem">Potato</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
Options
-
NameTypeDefaultDescription
-
collapseBreakpointstring"767px"Largeur de l'écran pour le changement du layout en accordéons
-
currentLinkSelectorstring"[data-fn-uri='current']"Si vous avez un état de lien "actif" lors du chargement d'une page, cette classe modifier ou sélecteur peut être utilisé pour que le menu soit déjà ouvert au submenu correspondant.
-
hideCurrentOnMobilebooleanfalseSi vous utilisez le current selector sur page load, cela conserve les panneaux de menus fermés en mobile.
-
closeActiveOnClickbooleanfalseEn desktop, si on re-clique sur un bouton de menu actif, il ferme le sous-menu.