Skip to main content
ST FN

Menu 2-panel

Demo

Installation

Import the function into the JavaScript file of your project

import { MenuTwoPanel } from "@overdog/fn"

Create and initialize an instance

new MenuTwoPanel("#menu-two-panel", {
   // options goes here
}).init()

Add the Tailwind variants to the plugins section of your config file.

If you are using multiple elements from Overdog FN that require the same variants, you only need to add them once. You can also modify the data attributes added to each function using the attributes parameter {}.

module.exports = {
   // ...
   plugins: [
      plugin(function ({ addVariant }) {
         addVariant("is-open", "&[data-fn-is-open]")
         addVariant("parent-is-open", "[data-fn-is-open] &")
      })
   ]
}
Note: If you want a mega-nav like in the example, don't forget to also import the mega-nav and add the corresponding Tailwind CSS variants. Refer to the Mega-Nav section for details.

Twig template Code


<div class="relative w-full h-16 z-40 bg-blue-500">
   <div id="nav-buttons-group" class="container flex items-center h-full justify-end z-50 text-6">
        <button data-fn-nav-button="1" class="rounded-full bg-white h-10 w-10"  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