Introduction
Le menu présenté se révèle être d’une simplicité de mise en oeuvre une fois qu’on a compris son fonctionnement. Il est basé sur les CSS (plus un script pour permettre à IE de se comporter presque comme les autres navigateurs).
Quelques mots sur le fonctionnement
Le menu fonctionne grâce aux listes imbriquées :
<ul>
<li>Niveau 1
<ul>
<li>Niveau 1.1</li>
<li>Niveau 1.2
<ul>
<li>Niveau 1.2.1</li>
<li>Niveau 1.2.2</li>
</ul>
</li>
<li>Niveau 1.3
<ul>
<li>Niveau 1.3.1</li>
</ul>
</li>
</ul>
</li>
<li>Niveau 2
<ul>
<li>Niveau 2.1</li>
<li>Niveau 2.2</li>
<li>Niveau 2.3
<ul>
<li>Niveau 2.3.1</li>
<li>Niveau 2.3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
Ce qui donne sans mise en forme particulière :
- Niveau 1
- Niveau 1.1
- Niveau 1.2
- Niveau 1.2.1
- Niveau 1.2.2
- Niveau 1.3
- Niveau 1.3.1
- Niveau 2
- Niveau 2.1
- Niveau 2.2
- Niveau 2.3
- Niveau 2.3.1
- Niveau 2.3.2
Chaque niveau de liste sera un niveau du menu déroulant.
Préparation des pages du squelette :
Vous trouverez en bas de cet article le javascript à intégrer dans les pages. Personnellement je dépose le fichier dans un dossier « script » et je l’inclus avec le code suivant :
<script type="text/javascript" src="script/menuderoulant.js"></script>
Il faut également ajouter ce code au niveau du body pour que le menu fonctionne sous IE :
<body onload="setHover('menulist')">
menulist est à remplacer éventuellement par le nom de l’id que vous voulez utiliser.
Les boucles
Boucle de base
Voici la boucle « basique » permettant de générer le menu de tout le site :
<ul id="menulist">
<BOUCLE_menu(RUBRIQUES){racine}>
<li><a href="#URL_RUBRIQUE">#TITRE</a>
<B_sousmenu><ul>
<BOUCLE_sousmenu(RUBRIQUES){id_parent}>
<li><a href="#URL_RUBRIQUE">#TITRE</a>
<BOUCLE_ssousmenu(boucle_sousmenu)></BOUCLE_ssousmenu>
</li>
</BOUCLE_sousmenu>
</ul></B_sousmenu>
</li>
</BOUCLE_menu>
</ul>
Il suffit de nommer (id=« menulist ») et ensuite de styler la liste.
Les styles en provenance de l’exemple de Jep :
ul#menulist li ul{ display:none; }
ul#menulist li:hover>ul{ display:block; }
ul#menulist,
ul#menulist ul{
background:white;
border:1px solid black;
list-style:none;
margin:0px;
padding:0px;
width:148px;
_width:150px;
font-size: 12px;
}
ul#menulist ul{
position:absolute;
top:-1px;
left:148px;
}
ul#menulist li{
position:relative;
margin:0px;
padding:0px;
_display:inline;
}
ul#menulist a{
display:block;
width:100%;
color:#000000;
}
ul#menulist a:hover{
background: gray;
color: white;
}
Exemple ici
Boucle détectant la présence de sous-menus
On va ajouter ici des éléments qui permettent d’identifier visuellement les rubriques en contenant d’autres en les mettant en italique et en ajoutant « >>> » derrière l’intitulé. Les styles en exemple derrière sont plus travaillés que l’exemple précédent et les boucles SPIP également (ajout de tri, suppression des numéros de titres, ...).
<ul id="menulist">
<BOUCLE_smenuspipr(RUBRIQUES){racine}{par num titre}><li<BOUCLE_smenr(RUBRIQUES){id_parent}{0,1}> class="smenu"</BOUCLE_smenr>><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]<BOUCLE_smen1r(RUBRIQUES){id_parent}{0,1}> >>></BOUCLE_smen1r></a>
<B_smenuspip><ul>
<BOUCLE_smenuspip(RUBRIQUES){id_parent}{par num titre}><li<BOUCLE_smen(RUBRIQUES){id_parent}{0,1}> class="smenu"</BOUCLE_smen>><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]<BOUCLE_smen1(RUBRIQUES){id_parent}{0,1}> >>></BOUCLE_smen1></a>
<BOUCLE_ssmenu(boucle_smenuspip)></BOUCLE_ssmenu>
</li></BOUCLE_smenuspip>
</ul></B_smenuspip>
</li></BOUCLE_smenuspipr>
</ul>
La boucle RUBRIQUES couplée à id_parent avec une restriction de 1 permet de détecter des sous-rubriques et ici d’appliquer un style particulier à la ligne (class=« smenu ») et d’ajouter « >>> » dans l’intitulé du menu.
Des styles mettant un peu plus le menu en valeur et exploitant la détection de sous-menus :
ul#menulist li ul{ display:none; }
ul#menulist li:hover>ul{ display:block; }
ul#menulist {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #0F4D2A;
position: static;
left: 10px;
margin: 15px;
}
ul#menulist, ul#menulist ul {
list-style:none;
margin:0;
padding:0;
width:13em;
border: 1px solid;
border-top-color: #BABABA;
border-left-color: #BABABA;
border-bottom-color: #67B289;
border-right-color: #67B289;
background-color: #A7E6C4;
}
ul#menulist ul{
position:absolute;
top:-1px;
left:12.7em;
}
ul#menulist li{
position:relative;
margin:0px;
padding:0px;
_display:inline;
}
ul#menulist a{
display:block;
width:100%;
text-decoration: none;
text-indent: 1em;
width: 12.7em;
padding: 5px 0;
}
ul#menulist li:hover, ul#menulist li a:hover {
color: #FFFFFF;
background-color: #67B289;
}
ul#menulist li.smenu>a {
font-style: italic;
}
ul#menulist a {
color: #0F4D2A;
text-decoration: none;
}
L’exemple situé ici est inspiré de ceci, mais il est plus joli et fonctionne uniquement sur les styles (pas d’ajout de « >>> »). La mise en forme ne se voit bien que sous des navigateurs récents (bien qu’il fonctionne sous IE sans avoir toutes ses subtilités visuelles). Sous les autres navigateurs, une flèche tourne lorsqu’on survole les éléments du menu.
J’ai préféré indiquer ci-dessus un exemple fonctionnant de manière vraiment similaire sous IE et les autres navigateurs.
Je trouve que dans cet exemple, l’utilisation de ce menu prend toute son ampleur.
Menu du secteur, menu de la rubrique courante, etc.
Il est très simple d’implémenter ce menu en exploitant le contexte de la page et en n’affichant que le secteur ou la rubrique courante. Il suffit de faire une boucle affichant le secteur courant ou la rubrique courante sous forme de liste.
Les exemples donnés ci-dessous correspondent à des boucles basiques sans tri et avec les styles basiques donnés au premier exemple.
Exemple de la rubrique courante
<ul id="menulist"><BOUCLE_menuspiprub(RUBRIQUES){id_rubrique}>
<li><b><a href="#URL_RUBRIQUE">#TITRE</a></b></li>
<BOUCLE_smenuspiprub(RUBRIQUES){id_parent}><li><a href="#URL_RUBRIQUE">#TITRE</a>
<B_ssmenurub><ul>
<BOUCLE_ssmenurub(boucle_smenuspiprub)></BOUCLE_ssmenurub>
</ul></B_ssmenurubt>
</li></BOUCLE_smenuspiprub>
</ul>
Exemple du secteur courant fonctionnant aussi bien dans une page affichant secteur, rubrique, article, breve, ...
Ce code peut être externalisé dans un fichier qu’on inclut en passant id_rubrique.
<BOUCLE_englob(RUBRIQUES){id_rubrique}>
<B_menuspip>
<ul id="menulist"><BOUCLE_menuspip(HIERARCHIE){id_rubrique}{0,1}>
<li><b><a href="#URL_RUBRIQUE">#TITRE</a></b></li>
<BOUCLE_smenuspip(RUBRIQUES){id_parent}><li><a href="#URL_RUBRIQUE">#TITRE</a>
<B_ssmenu><ul>
<BOUCLE_ssmenu(boucle_smenuspip)></BOUCLE_ssmenu>
</ul></B_ssmenu>
</li></BOUCLE_smenuspip>
</BOUCLE_menuspip>
</ul>
</B_menuspip>
<ul id="menulist"><BOUCLE_menuspipsect(RUBRIQUES){id_rubrique}>
<li><b><a href="#URL_RUBRIQUE">#TITRE</a></b></li>
<BOUCLE_smenuspipsect(RUBRIQUES){id_parent}><li><a href="#URL_RUBRIQUE">#TITRE</a>
<B_ssmenusect><ul>
<BOUCLE_ssmenusect(boucle_smenuspipsect)></BOUCLE_ssmenusect>
</ul></B_ssmenusect>
</li></BOUCLE_smenuspipsect>
</ul>
<//B_menuspip>
</BOUCLE_englob>
Il est possible d’inclure les articles aussi, les brèves, etc... Tout dépend après de vos envies.
Les fichiers à télécharger
Le fichier javascript :
Un ensemble de fichiers prêts à l’emploi qu’il suffit d’inclure dans les squelettes par la commande <INCLURE(spip-ex-md-menu.php3)>
(ou un autre nom si vous renommez les fichiers) :
- Un couple php3/html de type spip [1]
- Un fichier css soit à inclure dans l’entête de vos squelettes, soit à copier/coller dans votre propre CSS.
- Ne pas oublier le javascript et le code à préciser au niveau du body.
- Il est présenté ici
A noter que cet exemple supprime les numéros et trie par numéro.
Discussions par date d’activité
26 discussions
merci pour le code ca foncitonne bien
Répondre à ce message
Salut
Commment pourrai-je selectionner des rubriques particuliere et non toute les rubriques de mon site ?
Cordialement
Répondre à ce message
Bonjour Miss,
Ce menu me plaît beaucoup mais ça ne marche pas avec ma mise en page pourtant pas compliquée. tu peux voir ce que ça donne avec IE sur le lien ci-dessous. La page a été simplifiée à l’extrême mais je n’ai pas trouvé de solution. Aurais tu une idée ?
Rebonjour,
Je te donne la solution que j’ai trouvé (avec bien du mal). Elle était pourtant simple
Comme je ne vais pas garder mes liens en ligne éternellement, je précise ici la solution.
Sous IE il faut que la DIV qui porte le menu soit définie *après* les DIV que le menu va recouvrir, faute de quoi il y a l’effet de transparence. Il semble que IE se moque royalement de l’attribut z-index.
OK, je note le conseil pour le jour où j’aurais le temps de faire une modif...
** ça s’accumule je sais ^^ **
bonjour,
j’ai réussi à mettre en place ce menu, et je vous en remercie.
j’ai changé un peu la mise en page, pour l’avoir en horizontal, mais ce que j’aimerais, c’est changer les sous-rubriques en articles. en fait, sous spip, je n’ai pas de sous-rubriques. donc, j’aimerais que lorsque le menu se déroule, il montre les articles de la rubrique... j’ai essayé plusieurs choses, mais je n’y arrive pas... si vous avez une solution....
je précise juste que j’ai utilisé la première boucle que vous donnez, en haut de l’article...
Répondre à ce message
bonjour
voila je ne c’est pas si ce menu est encore utilisé mais je le trouve très sympa, donc je l’ai installé avec un peu de mal. il fonctionne
mais
une erreur javascript intervient avec firebug :
« setHover is not defined à la premiere ligne.
[Break on this error] »
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML...w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
www.lanouee.fr (ligne 1)
et une autre après quelque seconde :
[Exception... « ’JavaScript component does not have a method named : »onRefreshAttempted« ’ when calling method : [nsIWebProgressListener2::onRefreshAttempted] » nsresult : « 0x80570030 (NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED) » location : "
<unknown>
" data : no]Est ce que c’est dû seulement au hack pour IE pour que ce menu fonctionne ?
est ce sans incidences ?
Voila j’essaie de mettre ce site au norme mais la je buche.
merci à spip contrib de m’aider.
Répondre à ce message
Hi,
je suis en train d’utiliser le menu css + javascript et ca ne fonctionne pas. J’ai l’impression que les boucles sont mal faites car Spip 1.9.2b me met des messages de bugs du genre :
Spip 1.9.2b debug Beicip Inc
Error(s) in template
Incorrect loop (BOUCLE) syntax , BOUCLE_ssmenu : double definition
Incorrect loop (BOUCLE) syntax , BOUCLE_smenuspip : double definition
Incorrect loop (BOUCLE) syntax , BOUCLE_menuspiprub : missing closing tag
Incorrect loop (BOUCLE) syntax , BOUCLE_smenr : double definition
Incorrect loop (BOUCLE) syntax , BOUCLE_smen : double definition
voila j’ai essaye toute les exemple de cet contrib et uniquement un seul marche.
ce que je souhaiterai c’est un menu vertical deroulant contextuel qui affiche uniquement la rubrique courante(selectionnee avant dans un menu horizontal) et ses sous rubriques et facile a manipuler..
please I need your help.
Thanks in advance
a french-american desesperate IT
Hi again,
je viens de trouver la solution au menu deroulant pour lequel on passe l’identifiant de la rubrique. en effet une erreur s’est glisse dans le code. la boucle “BOUCLE_menuspipsect /BOUCLE_menuspipsect” ne se terminait pas correctement. je pense qu’il faut bien verifier que toute les boucles SPIP sont bien ferme sinon on obtient ce genre de message d’erreur.
a++
A happy french american IT
Répondre à ce message
un grand merci pour cette contrib qui va me permettre de facilement animer un peu mon menu tout en le gardant simple et sobre. Il ne me reste plus qu’à adapter le css à ma sauce.
Bravo et merci
Répondre à ce message
Bonjour miss mopi,
je suis débutant en spip html et css... mais j’ai réussi à intégrer ce menu sur spip 1.9.
ma question est simple : j’aimerais en faire un menu à l’horizontale. donc deux trucs : comment afficher les rubriques à la racine à l’horizontale (je pense à text-align center mais bon) ? et comment faire pour que quand la souris passe sur une rubrique cela développe le menu verticalement ?
en attendant un post de ta part je cherche de mon coté mais je pense que beaucoup de débutants comme moi sont hyper intéressés car ce menu vertical est au top !
merci encore pour ton travail
Bonjour,
Il faut changer la CSS, et il y a un exemple sur ibilab pour le faire.
http://www.ibilab.net/webdev/exemples/menuencascade-exemple2.htm
Tu affiches le code source et tu as tout le nécessaire ;-)
bonjour
J’ai reussi a integrer le code dans mon squelette ; le seul pborbleme que je rencontre est que tout est deplie et reste fige ou que soit la souris.
J’ai verifie le javascript, il est bien appele.
tu aurais une idee d’ou ca pourrait venir ?
Bonjour,
J’aurai été très intéressé de voir l’exemple du menu horizontal de ibilab.net, malheureusement, le lien fournit indique que le site n’est plus accessible. Auriez-vous par hazard d’autres sites ou exemples de CSS mettant en oeuvre ce menu horizontalement ?
Merci
Merci Web Archive !
Sauvegarde de la page Ibilab
Tout est là en regardant le code source de la page.
Il faudra que j’étudie une mise à jour de cette contribution avec un exemple en menu horizontal.
Bonjour,
Je suis un novice en train de crée mon site sous spip 1.9.2 et comme menu de toutes mes pages j’ai choisi le « Menu en cascade automatique (tout CSS + javascript pour IE) » mais je souhaite l’adapter en menu horizontal déroulant vertical. Le lien vers le code source de la page de sauvegarde d’Ibilab ne fonctionne pas.
Comment puis je faire pour récupérer la modif de code pour adapter le menu à l’horizontal ?
Et surtout comment si prendre ?
Merci à Miss Mopi pour cette superbe contrib
Merci de votre aide
Répondre à ce message
Bonjour.
Un grand merci pour cette contrib qui rend bien des services !
J’ai cependant un léger problème sous IE :
tout fonctionne impec sur tout le site, mais au survol de l’une des rubriques de premier niveau (et uniquement celle-là), il me faut attendre 5 secondes avant de voir s’afficher le premier sous-niveau ! Et idem pour les sous-niveaux suivants...
J’imagine que cela vient du fait que cette branche contient pas moins d’une cinquantaine de sous-rubriques réparties sur une arborescence allant, par endroit jusqu’à 6 sous-niveaux...
Mais bon, je n’ai pas conçu le site. Je suis juste censé en modifier l’apparence.
Auriez-vous une solution ?
Merci d’avance.
Répondre à ce message
Bonjour a tous !!
J’ai un petit probleme avec le menu déroulant, je travaille en local avec spip 1.9 et j’ai mis en place le menu mais les sous rubrique ne s’affiche pas quand je passe sur une rubrique avec ma souris... (en fait j’ai un menu juste avec les rubriques)
j’ai modifié la balise body de ma page
<body class="page_sommaire" onload="setHover('menulist')">
et voila le code que j’ai mis pour afficher le menu :
Donc si vous avez quelques idées pour me sauver ca serait génial !!!
Merci d’avance !
Répondre à ce message
Bonjour à tous,
J’ai réussi à installer le menu en cascade qui marche vraiment bien (le site que je crée est sur Spip 1.9).
Par contre, je veux utiliser aussi un script qui gère le positionnement du pied de page du site : http://pompage.net/pompe/pieds/
Apparemment, y a un problème de conflit dans les scripts, quand je mets les deux, le menu ne marche plus...
Voici le code du script de gestion du pied de page :
function getWindowHeight()
var windowHeight = 0 ;
if (typeof(window.innerHeight) == ’number’)
windowHeight = window.innerHeight ;
else
if (document.documentElement && document.documentElement.clientHeight)
windowHeight = document.documentElement.clientHeight ;
else
if (document.body && document.body.clientHeight)
windowHeight = document.body.clientHeight ;
return windowHeight ;
function setFooter()
if (document.getElementById)
var windowHeight = getWindowHeight() ;
if (windowHeight > 0)
var contentHeight = document.getElementById(’page’).offsetHeight ;
var footerElement = document.getElementById(’pied’) ;
var footerHeight = footerElement.offsetHeight ;
if (windowHeight - (contentHeight + footerHeight) >= 0)
footerElement.style.position = ’relative’ ;
footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + ’px’ ;
else
footerElement.style.position = ’static’ ;
window.onload = function()
setFooter() ;
window.onresize = function()
setFooter() ;
et le menu déroulant :
function hover(obj)
if(document.all)
UL = obj.getElementsByTagName(’ul’) ;
if(UL.length > 0)
sousMenu = UL[0].style ;
if(sousMenu.display == ’none’ || sousMenu.display == ’’)
sousMenu.display = ’block’ ;
else
sousMenu.display = ’none’ ;
function setHover(id)
LI = document.getElementById(id).getElementsByTagName(’li’) ;
nLI = LI.length ;
for(i=0 ; i < nLI ; i++)
LI[i].onmouseover = function()
hover(this) ;
LI[i].onmouseout = function()
hover(this) ;
Merci pour votre aide !
Je suis désolée, je ne suis qu’utilisatrice du script, je suis pour l’instant encore une bille sous javascript.
Peut-être poser la question sur des forums javascript ?
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |