Ici & Là

01 Société 02 Histoire 03 Science 04 Science fiction 05 SPIP 06 NTIC 07 Sondages 08 Divers
La meilleure façon de réaliser ses rêves est de se réveiller (Paul Valéry)

Accueil > NTIC > Ergonomie > Navigation : liens, TagClouds, Iframe, PoPup, ... > Un menu animé déroulant responsive grâce à 2 plugins

Un menu animé déroulant responsive grâce à 2 plugins

vendredi 22 avril 2016, par François Daniel Giezendanner

Notez cet article
1 vote

Le squelette dist de la distribution de SPIP dans sa version 3.1 est suffisamment responsive pour fonctionner à pleine satisfaction des smartphones aux grands écrans d’ordinateurs.

Nous en améliorons la navigation en lui joignons le plugin Menu.

Pour l’habillage de ce Menu, nous lui associons le Plugin Menu animé déroulant. Cette association est 100% responsive.

 Plugin Menus

Le but du plugin ’Menus’ permet d’élaborer facilement des menus au moyen d’une interface conviviale, directement dans la partie privée.

Attention ! Ce plugin ne s’occupe pas de la manière dont seront affichés les menus. Il permet de les créer facilement et d’en générer le HTML.

Pour l’affichage, nous utilisons ici le plugin spécifique Menu animé déroulant.

Source :

 Plugin Menu animé déroulant

Souplesse et simplicité de cet afficheur de menus. Il utilise (tous ?) les potentiels des différents navigateurs : dégradés de couleurs, ombrage des boîtes et des textes ainsi qu’arrondis des coins, sans parler de la dynamique des boîtes de menu !

Pour les petits écrans, le plugin réagit différemment et permet d’afficher un menu déroulant vertical. Cerise sur le gâteau, le menu disparaît à l’impression, il sait se faire discret !

Menu animé n’est pourtant constitué que d’une simple (!) feuille de style (menu_anime.css). C’est elle qui fait tout le travail !
Ce plugin est un complément idéal au plugin menus mais il convient parfaitement à tous les menus contenant un sélecteur class="menu_anime".

Le plugin est conçu de manière à simplifier l’adaptation des couleurs et des dimensions à chaque site en particulier. Une méthode pour ce faire est décrite en détail en fin d’article.

L’idée originale de cet afficheur de menus revient à Catalin Rosu (son exemple). Ce plugin a été développé au départ de son élégant et talentueux maniement des feuilles de style.

Source :