Chapitre 6: Les menus

Il y a trois grandes familles dans les menus, il y a les menus vertical, les menus horizontal et les menus horizontal et vertical.

 

Les menus vertical

C'est menu sont probablement les plus simples à faire pour un débutant car ils sont la même structure que les listes à puce vous trouverez tout plein de script sur le web du plus simple au plus esthétique.

Les menus horizontal

C'est menu sont un peu plus compliqués à faire mais tout aussi beau vous trouverez un tutoriel sur le site css.mammouthland.net à cette adresse: css.mammouthland.net/menu-horizontal-deroulant-en-css.php

Les menus horizontal et vertical

C'est menu divise la navigation en deux parties, les pages principaux sont sur le menu horizontal tandis que les sous-pages sont dans le menu vertical toutefois il arrive que les pages principaux se retrouvent aussi dans le menu vertical bon après vous faite ce que vous voulait c'est votre site/blog pas le mien :).

Vous trouverez sur le web des milliers de scripts pour chacun de ces menus il ne vous reste plus qu'à trouver le vôtre ! Maintenant que l'on connaît les différentes familles il nous faut comprendre comment sont organisés les menus chez Jimdo.

Anatomie d'un menu Jimdo

Voici le code HTML d'un menu Jimdo, n'oubliez pas vote bouée vous pourriez bien vous noyer dans ce code ^^.

 

Certains y verront que Chinois et d'autres y verra de l'HTML, pour ceux qui y voie du chinois voici la traduction de ce code. Comme on peut le voir chaque liste à puces et identifier par un id et une classe, ayant pour valeur mainNav + le chiffre du niveau mais il n'y a pas que les listent les liens aussi son identifié par une Class ayant pour valeur level_ + le chiffre du niveau, sous Jimdo il n'y a que 3 niveaux navigation quelle que soit la version utilisée, on peut représenter se menu ainsi:

 

  • niveau 1
    • niveau 2
      • niveau 3

Mais ce n'est pas tout imaginons que nous soyons sur ma page photo et que dans mon menu il y a un lien pointant vers cette page et bien souvenaient vous je vous ai dit que chaque lien porter une Class qui avait pour valeur level_ + le chiffre du niveau et bien lorsque l'on se trouve sur une page du menu une valeur vient s'ajouter dans cette classe, cette valeur se nomme current.

Alors certain me diront à quoi elle sert . Et bien dans notre CSS on pourrait y appliquer un style lorsque notre visiteur se trouvera sur cette page par exemple changée la couleur du lien et plus encore.

 

Je vous entends venir me dire c'est bien joli tout sa mais comment je fais pour adapter le code de tout à l'heure ?

 

Déjà reprenons le code HTML de notre menu et ajoutons-y les identifiants que l'a vu tout a l'heure sans oublier de mettre notre <span> obtient donc:

Ne reste plus qu'à modifier notre CSS en conséquence:

Vous remarquerez que j'ai caché le niveau 2 puisque dans mon site le niveau 2 sera affiché dans ma sidebar.


Et bien voilà on finit le travail en local ne reste plus qu'a transféré tout ça sur Jimdo alors rendez-vous dans le prochain chapitre...

Newsletter
Inscription Newsletter