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
-
NameTypeDefaultDescription
-
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.