Skip to main content

Menu 4-panel

Ce menu à 4 panneaux se transforme en panneaux coulissants en mobile. Idéal pour les sites web à lourd contenu. Chaque panneau est activé via un attribut data-submenu et un ID permettant de modifier facilement votre structure HTML et de conserver la logique .

Installation

Importez dans votre projet

import { MenuFourPanel } from "@overdog/fn"

Créez et initialisez une instance

new MenuFourPanel("#menu-four-panel", {
   // your 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

{# 
-------------------------------------------------------------------
Example based on a Craft CMS structure with multiples levels
You can use it with any content modeling 
(categories, global entries field, etc.)
-------------------------------------------------------------------
#}

{% set pages = craft.entries.section('structurePets').all() %}


<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-[#dcdee6]
      nav-open-1:translate-y-0 nav-open-1:transition-transform nav-open-1:duration-300 nav-open-1:ease-nav-in"
   >
   {% if pages|length %}
      <div id="menu-four-panel" class="w-full mx-auto md:w-[90%] h-full px-[20px] relative" role="navigation" aria-label="{{ 'Main menu'|t }}">
         {# this UL is main menu level 1 #}
         <ul
            data-fn-menu-list 
            class="absolute left-0 min-h-full w-full md:w-1/4 pt-44 pb-4 px-[20px]"
            role="menubar" 
         >
         {% nav page in pages %}
            <li data-fn-menu-item role="none">
               {% ifchildren %}
               <button 
                  id="menu-button-{{ loop.index }}"
                  data-fn-submenu="submenu-{{ loop.index }}"
                  data-fn-menu-button="button-{{ loop.index }}"
                  class="items-center flex justify-between px-4 py-2 w-full after:content-['»'] after:shrink-0 after:text-0.7em is-open:bg-[#fff]"
                  aria-haspopup="true" 
                  aria-expanded="false">
                  {{ page.title }}
               </button>
               {# this UL is submenu level 2-3-4 #}
               <ul 
                  id="submenu-{{ loop.index }}" 
                  role="menubar"
                  data-fn-menu-list
                  class="absolute top-0 pt-44 pb-12 px-[20px] min-h-full bg-[#fff] w-[calc(100%-20px)] border-l border-[#e3e3e3]
                  translate-x-full transition-transform
                  is-open:translate-x-0
                  md:bg-transparent md:w-full md:left-full md:transform-none md:hidden md:border-0
                  md:is-open:block md:is-open:animate-fade-in md:is-open:transform-none"
               >
                  {# mobile back button for sliding panels #}
                  <li data-fn-menu-item role="none">
                     <button
                        data-fn-submenu="submenu-{{ loop.index }}" 
                        data-fn-menu-back="menu-button-{{ loop.index }}" 
                        class="bg-[#e3e3e3] mb-1 px-4 py-2 md:hidden">
                        {{ 'Retour'|t }}
                     </button>
                  </li>
                  {# Repeat the markup inside nav tag for all sub-levels item in the query #}
                  {% children %}
               </ul>
               {% endifchildren %}
               {# if page has no descendants - show a url instead of a parent button #}
               {% if page.hasDescendants() == false %}
                  <a 
                     role="menuitem" 
                     class="items-center flex justify-between px-4 py-2 w-full" 
                     href="{{ page.url }}">
                     {{ page.title }}
                  </a>
               {% endif %}
            </li>
         {% endnav %}
         </ul>
      </div>
   {% endif %}
   </nav>
</div>

Options