Menu le css

De Cms Made Simple France
Aller à : navigation, rechercher

Rappel élémentaire

Le CSS signifie Cascading Style Sheets ou également feuille de style. C'est une notion que vous devez connaitre avant d'aborder cette page. Si vous ne maitrisez pas cette notion, il faudra suivre une auto-formation sur le net qui regorge d'informations à ce sujet.

Le CSS dans les menus.

Les gabarits de menus permettent de structurer différemment les menus. Mais concrètement cela se traduit comment dans une page générée ?

prenons cette organisation de page :

  • Page mère #1
  • Page mère #2
  • Page mère #3
    • Page enfant #3.1
      • Page sous-enfant #3.1.1
    • Page enfant #3.2
    • Page enfant #3.3

Il y a plusieurs manières de le représenter en HTML


<ul>
  <li>Page mère #1</li>
  <li>Page mère #2</li>
  <li>Page mère #3
   <ul>
    <li>Page enfant #3.1
      <ul>
        <li>Page sous-enfant #3.1.1</li>
      </ul>
    </li>
    <li>Page enfant #3.2</li>
    <li>Page enfant #3.3</li>
   </ul>
  </li>
</ul>

La méthode des listes, qui est clairement celle recommandée.

<div>
  <div>Page mère #1</div>
  <div>Page mère #2</div>
  <div>Page mère #3
   <div>
    <div>Page enfant #3.1
      <div>
        <div>Page sous-enfant #3.1.1</div>
      </div>
    </div>
    <div>Page enfant #3.2</div>
    <div>Page enfant #3.3</div>
   </div>
  </div>
</div>

La méthode des div qui peut être une alternative viable

Page mère #1 </br>
Page mère #2 </br>
Page mère #3 </br>
 Page enfant #3.1 </br>
  Page enfant #3.1.1 </br>
 Page enfant #3.2 </br>
 Page enfant #3.3 </br>

Une autre méthode très minimaliste.

Nous voyons donc que la structure peut être multiple. Mais rien de tout cela ne permet réellement de faire un joli menu. C'est donc le CSS qui va jouer cette partie. En premier point il faudra modifier les gabarits pour qu'ils ajoutent autant de classe que nécessaire dans le code HTML.

Nous n'allons pas nous étendre sur comment modifier un gabarit dans cette page, vous pouvez retrouver plus d'information sur le sujet dans cette page dédiée : Modifier aisément ses gabarits.

Reprenons notre code corrigé, en sortie nous devons avoir par exemple ceci.

<ul class='ul_premier_niveau'>
  <li class='li_premier_niveau'>Page mère #1</li>
  <li class='li_premier_niveau'>Page mère #2</li>
  <li class='li_premier_niveau'>Page mère #3
   <ul class='ul_second_niveau'>
    <li class='li_second_niveau'>Page enfant #3.1
      <ul class='ul_troisieme_niveau'>
        <li class='li_troisieme_niveau'>Page sous-enfant #3.1.1</li>
      </ul>
    </li>
    <li class='li_second_niveau'>Page enfant #3.2</li>
    <li class='li_second_niveau'>Page enfant #3.3</li>
   </ul>
  </li>
</ul>

Le code CSS devra alors être composé ainsi :

.ul_premier_niveau{
  /* code CSS */
}
.ul_second_niveau{
  /* code CSS */
}
.ul_troisieme_niveau{
  /* code CSS */
}
.li_premier_niveau{
  /* code CSS */
}
.li_second_niveau{
  /* code CSS */
}
.li_troisieme_niveau{
  /* code CSS */
}

Ce code, vous pourrez l'ajouter dans les feuilles de style rattachées aux gabarits de votre page qui affiche le menu, ainsi à chaque affichage de la page, le CSS nécessaire au menu sera présent.

Exemple un peu plus poussé

Dans la réalité il y a bien plus de code HTML que celui dont j'ai fait la présentation. Nous allons donc compléter un petit peu le code.

Les liens

En effet, le code HTML exact dans le cas d'un menu faisant son travail serait plutôt :

<ul class='ul_premier_niveau'>
  <li class='li_premier_niveau'><a href="mapage.html">Page mère #1</a></li>
[...]
</ul>

avec par exemple

.ul_premier_niveau a{
  /* code CSS définissant la couleur*/
}

ce qui génèrera ceci :

Exemple.jpg

Pour ceux et celles qui souhaitent avoir une taille fixe des cases du menu, il faut ruser un peu plus

<ul class='ul_premier_niveau'>
  <li class='li_premier_niveau'><a href="mapage.html"><span>Page mère #1</span></a></li>
[...]
</ul>


avec par exemple

.ul_premier_niveau span{
  /* code CSS définissant la longueur*/
}

Les pages qui ne sont pas du contenu

Il n'y a pas que les pages à contenu qui pourront apparaitre dans le menu. D'autres entrée existent. Et si des pages de types liens interne / externes ne sont pas différentes (il y a un titre et un lien), d'autres en revanche sont un peu différents.

Ainsi le type de page Entête de section ne possèdera pas de lien :


<ul class='ul_premier_niveau'>
  <li class='li_premier_niveau'><span>Entête de section</span></li>
[...]
</ul>

Notez que notre CSS est déjà bon :)

L'autre point c'est le type Séparateur qui peut être utilisée pour faire ceci.

<ul class='ul_premier_niveau'>
  <li class='li_premier_niveau'>Page mère #1</li>
  <li class='li_premier_niveau'>Page mère #2</li>
  <li class='li_premier_niveau'>Page mère #3
   <ul class='ul_second_niveau'>
    <li class='li_second_niveau'>Page enfant #3.1
      <ul class='ul_troisieme_niveau'>
        <li class='li_troisieme_niveau'>Page sous-enfant #3.1.1</li>
      </ul>
    </li>


    <li class='li_separator'></li>


    <li class='li_second_niveau'>Page enfant #3.2</li>
    <li class='li_second_niveau'>Page enfant #3.3</li>
   </ul>
  </li>
</ul>

Le code CSS devra donc être du type :


.li_separator{
  /* code CSS pour représenter la séparation */
}

le résultat à obtenir peut être par exemple : Exemple.jpg

Notez que tous les exemples ci dessous sont rassemblées dans la page Trucs et Astuces