Créer un menu HTML/CSS

  la démarche progressive expliquée pour vos squelettes

Pour que le site utilise un bandeau de menus, il faut, à un emplacement de votre design de squelettes :
- insérer une boucle construisant les liens de menus
- gérer les styles CSS adéquats

Article publié le 10 août 2013, et actualisé en novembre 2021

   
 
 
 
 
 
 
Attention, cette page est encore en
  Provisoire (à compléter...)
 

Pour positionner un menu principal (horizontal) dans un bandeau en-dessous du bandeau-entete dans le design du site, il est pratique de créer un bloc <div id="...">, par exemple le bloc "menu" [1] : l’usage veut souvent qu’on le constitue dans une noisette, plus facile à ré-utiliser dans les pages de squelettes du site, par exemple créons :

  1. <div id="menu">
  2. #INCLURE{fond=inclure/barre-nav,env}
  3. </div>

Télécharger

Ceci suppose de créer la noisette correspondante pour fournir le contenu du menu, souvent bâti à partir d’une boucle sur les rubriques : lui passer le paramètre env [2] permettra d’utiliser éventuellement la rubrique courante pour gérer un affichage distinctif dans la branche active...

 Le Contenu du menu

Le premier menu construit est généralement la simple liste des rubriques principales du site, que Le Vocabulaire SPIP désigne plus précisément comme secteur.

En rajoutant en premier un lien explicite de retour vers l’accueil du site, la boucle classique devient :

  1. [(#REM)inclure/barre-nav.html  #nav]
  2. <ul class="menu-liste ">       
  3.                 <li class="menu-entree }" >
  4.                         <a href="#URL_SITE_SPIP" title="Revenir à l'accueil du site">
  5.                                                 Accueil</a>
  6.                 </li>
  7.         <BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}{tout}>
  8.                 <li class="menu-entree #EXPOSE{gris}" >
  9.                         <a href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut)"]>
  10.                                                 #TITRE</a>
  11.                 </li>
  12.         </BOUCLE_rubriques>
  13. </ul>  

Télécharger

Outre le critère {tout} qui permet d’avoir la totalité des secteurs définis en toutes circonstances [3], signalons deux particularités, l’usage de la balise #EXPOSE{gris} pour rajouter ce sélecteur sur la ligne de secteur actif [4], et les usages de styles assez standard menu-liste et menu-entrée sur les <li <a..></li> d’une liste des liens, qui faciliteront l’application de styles obtenus des divers plugins de menus, ou des vôtres.

 Appliquer des styles

La distribution de SPIP propose naturellement un grand nombre de styles standard, préparés pour vos squelettes : ceux-ci sont appliqués grâce aux sélecteurs CSS


Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

[1] Nus verrons ultérieurement certaines conséquences du nom de bloc retenu, en fonction des sélecteurs de styles de certains plugins, Zpip ou autres..

[3] Qu’il y ait des articles publiés ou non..

[4] Secteur transmis dans env Environnement d’un squelette..


Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.
   

Article publié le 10 août 2013, et actualisé en novembre 2021 Provisoire (à compléter...) .

Répondre à cet article