Skip to main content

Menu 2-panel

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