Mega-Nav
Ce component peut être utilisé pour créer un seul ou plusieurs panneaux de navigation.
Demo
Cliquez sur les différents boutons dans la navbar pour tester cet élément.
Installation
Importez dans votre projet
import { SlidingNav } from "@overdog/fn"
Créez une instance et initialisez-la
Le Sélecteur de l'instance doit wrapper le ou les boutons qui ouvrent votre (vos) navs. Si vous avez seulement un bouton, le sélecteur doit quand même être un parent du bouton.
new SlidingNav("#nav-buttons-group", {
// your options here
}).init()
Ajoutez les variants Tailwind dans la section plugins de votre fichier de config
module.exports = {
// ...
plugins: [
plugin(function ({ addVariant }) {
addVariant("nav-open-1", "[data-fn-nav-open='1'] &")
addVariant("nav-open-2", "[data-fn-nav-open='2'] &") // only if needed
addVariant("nav-open-3", "[data-fn-nav-open='3'] &") // only if needed
addVariant("nav-open-sidepanel", "[data-fn-nav-open='sidepanel'] &") // only if needed
})
]
}
Vous avez seulement besoin d'ajouter les variants que vous utilisez. Modifier selon vos besoins.
Body scroll lock
Pour un effet "body lock" qui empêche le scroll lors de l'ouverture d'un menu, ajoutez un ou plusieurs variants de cette manière.
addVariant("body-nav-open-1", "&[data-fn-nav-open='1']")
addVariant("body-nav-open-2", "&[data-fn-nav-open='2']") // another example
// add a variant for all the nav that needed to lock the scroll on body
Ajoutez ensuite sur votre body la classe désirée. Vous pouvez également ajouter un préfix de breakpoint.
<body class="body-nav-open-1:overflow-hidden body-nav-open-2:overflow-hidden">
Le lock du scroll sur le body est géré par élément afin de permettre de modifier le comportement selon le breakpoint et/ou selon le panneau de navigation. Par exemple, un panneau peut être pleine hauteur avec le lock du scroll et un autre, seulement
40vh
avec le scroll disponible.
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 gap-4 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>
<button data-fn-nav-button="2" class="rounded-full bg-white h-10 w-10" type="button" aria-label="Button 2" aria-haspopup="true" aria-expanded="false">2</button>
<button data-fn-nav-button="3" class="rounded-full bg-white h-10 w-10" type="button" aria-label="Button 3" aria-haspopup="true" aria-expanded="false">3</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-[#2B3D4F]
nav-open-1:translate-y-0 nav-open-1:transition-transform nav-open-1:duration-300 nav-open-1:ease-nav-in"
>
</nav>
<nav
data-fn-nav-panel="2"
class="fixed z-30 top-0 left-0 w-full h-full -translate-y-full overflow-y-scroll overflow-x-hidden bg-[#f1f1f1]
nav-open-2:translate-y-0 nav-open-2:transition-transform nav-open-2:duration-300 nav-open-2:ease-nav-in"
>
</nav>
<nav
data-fn-nav-panel="3"
class="fixed z-30 top-0 left-0 w-full h-full -translate-y-full overflow-y-scroll overflow-x-hidden bg-[#e3e3e3]
nav-open-3:translate-y-0 nav-open-3:transition-transform nav-open-3:duration-300 nav-open-3:ease-nav-in"
>
</nav>
</div>
Options
-
NameTypeDefaultDescription
-
delayBetweenOpeningsinteger450Délais en millisecondes entre l'ouverture des panneaux si plusieurs.
-
backTransitionstring"transition:transform 0.25s;transition-timing-function:cubic-bezier(0.42, 0, 1, 1);"Style applied for back transition to avoid FOUC
-
overlaySelectorCSS SelectornullSi vous souhaitez ajouter un overlay