Menu horizontal déroulant

Le menu ci-dessous est un menu horizontal déroulant exclusivement réalisé avec CSS (aucun code javascript n'est utilisé). Il peut être réalisé sur un site Jimdo. Il suffit d'insérer le code HTML contenant le menu, ainsi que le code CSS.

Ce type de menu peut aisément remplacer le menu de navigation principale d'un site web dans le cas d'un site qui utilise un design personnalisé. Il faut par ailleurs savoir que ce menu n'autorise que deux niveaux de navigation. Il ne peut donc pas y avoir de sous-sous-page.

Exemple

Compatibilité

Ce menu est compatible avec les navigateurs web récent tel que: Firefox 3.6, Opera 10 et Google Chrome 4. Le menu a été testé avec Internet Explorer 5, il s'affiche correctement mais les menu secondaire (présent dans le menu déroulant) ne s'affichent pas. De ce fait, il est recommandé que les pages catégorie dispose de liens pour accéder au sous-menu.

Installation sur un design personnalisé

Ce menu peut tout aussi bien être utilisé en tant que menu principal si le site Jimdo utilise un design personnalisé, ou alors en tant que menu secondaire sur une partie d'un site. Pour installer ce menu en tant que menu principal il faut toutefois supprimer l'affichage du menu "ordinaire". Pour cela les codes du design personnel doit être comme suivant:

Code XHTML du menu "ordinaire":

<div class="cacher"><var>navigation[1|2|3]</var></div>

Code CSS du menu "ordinaire":

.cacher{display:none;}

1) Code XHTML du menu

La première étape pour utiliser ce menu consiste à créer les liens du menu sans style particulier. Pour cela, un code XHTML équivalent à une liste à puce sera utilisé. En voici un exemple:

 

<div id="menuTest">
    <ul id="mainNav1" class="mainNav1">
        <li><a href="http://template-velipart.jimdo.com/template-jimdo/" class="left level_1"><span>Template Jimdo</span></a></li>
        <li><a href="http://tonyarchambeau.com/blog/" class="level_1"><span>Blog Webmaster</span></a></li>
        <li><a href="http://template-velipart.jimdo.com/template-jimdo/" class="level_1 submenu"><span>Template Jimdo</span></a>
        <ul id="mainNav2" class="mainNav2">
            <li><a href="http://template-velipart.jimdo.com/template-jimdo/plus-de-choix/" class="current level_2"><span>Plus de choix</span></a></li>
            <li><a href="http://template-velipart.jimdo.com/template-jimdo/menu-horizontal-d%C3%A9roulant/" class="level_2"><span>Menu déroulant</span></a></li>
        </ul></li>
        <li><a href="http://www.infowebmaster.fr/" class="right level_1"><span>InfoWebMaster</span></a></li>
    </ul>
</div>

Pour bien comprendre le code ci-dessous et ne pas trop se perde dans tout ce code, il faut bien remarquer l'indentation par rapport au bord gauche. Voici en vrac les autres choses à savoir sur ce code:

  • les liens du niveau 1 (liens principaux) sont inclu dans la balise id="mainNav1" et class="mainNav1"
  • les liens du niveau 1 ont la balise "level_1"
  • les liens du niveau 2 (liens dans le menu déroulant) sont inclu dans la balise id="mainNav2" et class="mainNav2"
  • les liens du niveau 2 ont la balise "level_2"
  • Le premier lien du niveau 1 (lien à gauche dans le menu) possède l'attribut "left". Cela est utile pour donner un style particulier à ce lien (sur cet exemple: coin arrondis)
  • Le dernier lien du niveau 1 (lien à droite dans le menu) possède l'attribut "right". C'est également utile pour donner un style particulier à ce lien (sur cet exemple: coin arrondis)
  • Le lien du niveau 1 qui sert de menu déroulant possède l'attribut "submenu". Un style particulier peut ainsi lui être assigné pour reconnaitre les liens normaux des liens déroulants

2) Code CSS pour ajouter le style au menu

Une fois que la base du menu est réalisé, il faut ajouter le style pour transformer la liste en puce en menu horizontal déroulant. Pour cela, il faut ajouter dans le <head> (voir "paramètres Jimdo" > "modifier le head") de la page le code présenté ci-dessous:

 

<style type="text/css">
/*<![CDATA[*/
div#menuTest{ /* Design du menu en lui-même */
margin-top:6px;
margin-bottom:46px; /* Modifier la marge du bas si nécessaire */
margin-left:1%; /* Modifier la marge à gauche si nécessaire */
}
div#menuTest ul{
list-style-type:none;
text-align:center;
margin:0;
}
div#menuTest li{float:left;}
div#menuTest li a{ /* Design des liens */
display:block;
width:150px; /* Modifier la largeur des liens si nécessaire */
padding:3px;
text-align:center;
text-decoration:none;
text-shadow:0px 1px 0px #fff;
font-weight:bold;
color:#555;
background:#dedede;
border:1px solid #aaa;
}
div#menuTest li a.left{ /* Design du lien de gauche */
border-top-left-radius:8px;
-moz-border-radius-topleft:8px;
-webkit-border-top-left-radius:8px;
-khtml-border-top-left-radius:8px;
border-bottom-left-radius:8px;
-moz-border-radius-bottomleft:8px;
-webkit-border-bottom-left-radius:8px;
-khtml-border-bottom-left-radius:8px;
}
div#menuTest li a.right{ /* Design du lien de droite */
border-top-right-radius:8px;
-moz-border-radius-topright:8px;
-webkit-border-top-right-radius:8px;
-khtml-border-top-right-radius:8px;
border-bottom-right-radius:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-bottom-right-radius:8px;
-khtml-border-bottom-right-radius:8px;
}
div#menuTest li a:hover{ /* Design des liens au survol de la souris */
color:#000;
}
div#menuTest li a.submenu{ /* Design des liens qui ont un sous-menu*/
background:#ccc;
}
div#menuTest ul li ul li{
display:none;
float:none;
text-align:left;
font-size:0.9em;
}
div#menuTest ul li ul li a{
text-align:left;
}
div#menuTest ul li:hover ul{
position:absolute;
z-index:10;
}
div#menuTest ul li:hover ul li{
display:block;
}
/*]]>*/
</style>

 

Le code à volontairement été commenté pour mieux comprendre certains passages et pourquoi pas permettre de personnaliser ce menu. Il faut noter au passage que pour certains design il y aura peut-être besoin de mettre les mains à la pate pour que ce menu s'intègre à l'identité visuelle du site.

Félicitation, une fois ces étapes effectués, le menu devrait normalement être opérationnel.