Construire des menus de Hamburger coulissant accessibles avec Offcanvas
Le plugin Offcanvas gratuit est l'une des nombreuses ressources pour les navigations glissantes. Vous pouvez trouver un tas de plugins similaires en ligne, mais Offcanvas se distingue pour quelques raisons.
C'est une bibliothèque assez légère et bien qu'elle fonctionne sur jQuery, elle n'est pas très difficile à configurer . Cela est vrai pour le code JavaScripts et le code HTML, vous n'aurez donc pas besoin de modifier votre navigation par défaut.
Le plugin Offcanvas vous permet de désigner certaines zones où le menu devrait apparaître . Par défaut, il s'agit généralement du côté gauche ou droit de l'écran, mais vous pouvez également choisir le haut ou le bas de l'écran.Cela rend Offcanvas génial pour plus que de faire glisser des menus hamburger. Il peut être utilisé pour faire glisser des barres de notification ou même des champs d'inscription pour capturer des courriels .
Chaque panneau fonctionne de la même manière où l'utilisateur peut cliquer n'importe où sur la page pour masquer le menu coulissant . De plus, vous pouvez configurer des commandes de clavier conformes aux directives ARIA pour une bonne accessibilité Web.
Pour installer Offcanvas, vous avez juste besoin d' une copie de jQuery avec les fichiers Offcanvas CSS / JS . Vous pouvez les tirer via npm, bower ou directement depuis GitHub.
Aussi sur la page GitHub, vous verrez un peu d'exemple de code que vous pouvez retravailler en fonction de votre site web. Tout ce dont vous avez besoin pour la navigation coulissante est un
Ceci est déclenché par un lien d'ancrage pointant vers l'ID de votre menu coulissant. Voici un extrait du GitHub Offcanvas qui illustre un bref exemple:
... ...
Si vous êtes en mesure de retravailler légèrement le code HTML de votre page, vous ne devriez avoir aucun problème à le faire.
La fonction offcanvas()
prend même en charge les options de modification de la vitesse d'animation, de la classe par défaut et des fonctions de rappel pouvant s'exécuter après l'ouverture ou la fermeture du menu.
Pour en savoir plus et voir une démo en direct, consultez la page principale du plugin. Offcanvas est un excellent choix pour la navigation avec jQuery si vous aimez les menus hamburger.
Freebie: 15 modèles de Saint Valentin
Si vous n'avez pas encore compris, la Saint-Valentin est ce samedi. Que ce soit pour affaires ou pour votre usage personnel, vous avez probablement besoin de ressources inspirées de la Saint-Valentin. Eh bien, tu as de la chance.Nous avons fait équipe avec nos amis sur Freepik pour aider à célébrer la Saint-Valentin dans le style. All
10 appareils intelligents pour la domotique
Avez-vous déjà pensé à transformer votre maison en maison intelligente? N'aimerais-tu pas pouvoir éteindre les lumières que tu as laissées même après que tu sois au bureau? Ou allumer la climatisation avant de rentrer du travail? Les appareils Smart Home peuvent également vous permettre de surveiller la sécurité de votre maison, de déverrouiller les portes de vos amis pour un accès temporaire (même si vous n'êtes pas chez vous pour les recevoir) et même de rendre vos appareils plus intelligents.Bien que nous co