Previous
Menu 4-panel
Ce component peut être utilisé pour créer un seul ou plusieurs panneaux de navigation.
Cliquez sur les différents boutons dans la navbar pour tester cet élément.
import { SlidingNav } from "@overdog/fn"
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()
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.
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">
40vh
avec le scroll disponible.
<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>