Fork me on GitHub

Documentations > Développeurs > Thèmes et templates > Menu déroulant en CSS

Menu déroulant en CSS


Un menu déroulant en CSS

Les menus déroulants sont désomais parties intégrantes des interfaces web réussies. Ils participent à  une navigation simplifiée en proposant une vision complete de l'accès aux contenus. Une précédente ressource a été adaptée à  XOOPS : le menu DHTML TigraMenu. Si ce menu proposait une réelle solution, il comportait néanmoins quelques défauts :
  • son poids, avec quelques 10 ko de javascript, on ne pouvait le prendre en exemple.
  • son positionnement calculé dans le navigateur. Ainsi les thêmes devaient obligatoirement prévoir une zone fixe pour son affichage, chose pas trés simple à  obtenir selon les navigateurs.
Les recherches des graphistes et les ressources qui en résultent se portent de plus en plus vers le respect des normes CSS. Nous remercions Pompage.net pour leur traduction des Menus déroulants «Suckerfish» de Patrick Griffiths et Dan Webb que nous avons adapté à  notre thême XOOPS.
Nous en avons pris la version la plus complexe : le menu déroulant à  trois niveaux. Voici deux arguments en sa faveur qui ont attirés notre attention :
  • Le javascript utilisé par ce menu tiens en quelques 10 lignes soit 433 octets. Le contenu sera ensuite constitué d'une sucession de balises UL, LI et A au sein d'une DIV. Le poids total d'un tel menu ne dépends dont pratiquement plus que de son contenu !
  • Le fait de positionner le menu dans une balise DIV l'intêgre natuellement dans la page html. A partir de là , le thême n'a plus à  réserver de la place à  son affichage, le menu se positionne automatiquement dans la page à  l'endroit voulu.

Insertion du javascript

Le javacript du menu déroulant doit être intégré dans la balise HEAD de votre thême.
Si vous désirez en fait un script dédié copiez le code suivant dans un fichier menu.js à  placer dans le répertoire de votre thême (<xoopsRoot>/themes/montheme/) :

<!--//--><![CDATA[//><!--
sfHover = function()
{
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0;i<sfEls.length; i++) {
sfEls[i].onmouseover=function(){
this.className+="sfhover";
}
sfEls[i].onmouseout=function(){
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>

Ce script analyse la balise identifiée "nav" et y traite les balises LI. Il en modifie, selon le contexte, le nom de la classe CSS pour la liste en cours.

Dans votre thême, ouvrir le fichier theme.html et y placer le code suivant pour insérer le javascript :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
<meta ...>
...
<title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
...
<{$xoops_module_header}>
<script type="text/javascript">
<!--<{$xoops_js}>-->
</script>
<script language="JavaScript" src="<{$xoops_imageurl}>menu.js"></script>
</head>
<body>
...

Insertion du contenu du menu

Le menu que nous allon mettre en place propose 3 niveaux :
  • le premier niveau est un menu horizontal
  • le second niveau est un menu vertical en dessous de l'option parente.
  • le troisiême niveau est un autre menu vertical à  droite de l'option parente.
Dans une balise DIV conteneur, la liste UL identifiable pas le javascript (donc d'id = "nav"), nous allons donc imbriquer les listes le liens qui constitueront le menu.

Niveau 1 : le menu horizontal.

Il s'agit simplement d'une liste classique à  positionner aprês le header de votre thême :

<div id="container">
<ul id="nav">
<li><a href='<{$xoops_url}>/'>Accueil</a></li>
<li><a href='<{$xoops_url}>/modules/smartfaq/'>FAQ</a></li>
<li><a href='<{$xoops_url}>/modules/newbb/'>Forum</a></li>
...
</ul>
</div>

NB : la DIV peut être placée dans une table, bien que l'utilisation des tables soit à  proscrire pour le positionnement.

Niveau 2 et 3 : les sous menus.

Pour ajouter un sous menu, il faut :
- Affecter la classe "daddy" à  l'option parente
- Insérer la liste de niveau inféreur dans la balise LI correspondante.
En noir : le niveau 1
En bleu : le niveau 2 ou la classe qui va l'autoriser
En vert : le niveau 3 ou la classe qui va l'autoriser
En gras, les balises délimitant les options

<div id="container">
<ul id="nav">
<li><a href='<{$xoops_url}>/'>Accueil</a></li>
<li><a href='<{$xoops_url}>/modules/smartfaq/' class="daddy">FAQ</a>
<ul>
<li><a href='<{$xoops_url}>/modules/smartfaq/category.php?categoryid=1'>catégorie 1</a></li>
<li><a href='<{$xoops_url}>/modules/smartfaq/category.php?categoryid=2'>catégorie 2</a></li>
</ul>
</li>

<li><a href='<{$xoops_url}>/modules/newbb/' class="daddy">Forum</a>
<ul>
<li><a href='<{$xoops_url}>/modules/newbb/index.php?cat=1'
class="daddy">catégorie 1</a>
<ul>
<li><a href='<{$xoops_url}>/modules/newbb/viewforum.php?forum=1'">cat 1 forum1</a></li>
<li><a href='<{$xoops_url}>/modules/newbb/viewforum.php?forum=2'">cat 1 forum2</a></li>
</ul>

</li>
<li><a href='<{$xoops_url}>/modules/newbb/index.php?cat=1'
class="daddy">catégorie 2</a>
<ul>
<li><a href='<{$xoops_url}>/modules/newbb/viewforum.php?forum=3'">cat 2 forum1</a></li>
<li><a href='<{$xoops_url}>/modules/newbb/viewforum.php?forum=4'">cat 2 forum2</a></li>
</ul>

</li>
</ul>

</li>
...
</ul>
</div>

Mise au point des définitions CSS

Vous pouvez copier les définitions suivante dans vos fichier Style.css

/* menu */
#container {
width: 100%;
background: #6699cc;
text-align: left;
}
/* niveau1*/
#nav, #nav ul {
float: left;
width: 100%;
list-style-type: none;
background: #6699CC;
font-weight: bold;
}
#nav a {
display: block;
width: 130px;
color: white;
text-decoration: none;
padding: 2px 0px 2px;
}
#nav a.daddy {
/* pour mettre un flêche de suivit des sous menus*/
/* background: url(rightarrow2.gif) center right no-repeat; */
}
#nav li {
list-style-type: none;
float: left;
padding: 0;
width: 130px;
height:11px:
}
/* niveau2*/
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 130px;
font-weight: normal;
margin: 0;
}
#nav li li {
list-style-type: none;
padding-right: 2px;
width: 128px;
height:11px:
}
#nav li ul a {
width: 128px;
}
/* niveau3*/
/* Décalé à  gauche et remonté à  coté de la ligne en cours */
#nav li ul ul {
margin: -20px 0 0 130px;
}
/* Positions 'invisible' : ne pas toucher */
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
/* Couleur bloc survol */
#nav li:hover, #nav li.sfhover {
background: #eda;
}
/* padding bloc survol */
#nav li:hover ul, #nav li.sfhover ul {
padding-right : 2px;
}

Attention ! il est important de bien tester les modifications relatives à  tout ce qui touche aux positionnements : width, padding, margin, height En effet, un simple défaut de jointure des blocs peut entraiter la perte de l'affichage du sous menu (hover) Voici des exemples de résultat :
Firefox 1.0 :

Internet Explorer 6.0 :

par Romuald Besset de WDForge.org

Licence, certains droits réservés
Partager Twitter Partagez cette article sur GG+
  Voir cet article en format PDF Imprimer cet article Envoyer cet article

Naviguer à travers les articles
Article précédent Menus Xoops compatibles CSS Tigra menus Article suivant
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

72 Personne(s) en ligne (1 Personne(s) connectée(s) sur Documentations) | Utilisateur(s): 0 | Invité(s): 72 | Plus ...