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
bonjour,
je suis nouvel utilisateur de spip et je voudrais savoir comment rajouter l’affichage des articles dans ce menu. Apparrement ce n’est pas sorcier il doit falloir rajouter une boucle, mais la j’avoue que je ne vois pas bien comment faire, j’attend donc votre aide avec impatience...
Merci.
Ce n’est effectivement pas très compliqué. Essayes ça :
Je n’ai pas les éléments qu’il faut pour tester en local en ce moment. Préviens-moi si ça ne fonctionne pas, mais j’ai préféré essayer de te répondre rapidement.
il manque une s à la fermeture de .
il manque une s à la fermeture de
</BOUCLE_article{{s}}sect>
.Répondre à ce message
Bonjour,
Je suis en train de chercher à mettre en oeuvre la « pseudo classe de texte » first-letter pour modifier la première lettre de chaque ligne du menu mais je galère un peu (spip et css ont moins d’un mois pour moi !!!) et pour l’instant ça marche pas.
J’ai essayé de mettre ça dans la feuille de style :
/* Mod lettrine*/
ul#menu li:first-letter
color : green ;
font-size : 200%
/* Fin Mod Lettrine */
ça marche pas peut-être parce-que :
« En effet, petit oubli : first-letter ne s’applique qu’au contenu d’un élément de type block, list-item, table-cell, table-caption et inline-block... Mais pas aux éléments inline.
Pour conserver l’effet de first-letter : faire flotter les éléments li plutôt que de les mettre en inline. »
Pouvez-vous me dire si le problème est bien celui-ci et s’il est possible de le résoudre.
Merci d’avance de votre aide.
Fabrice Cizeron
Il doit y avoir un lien directement sous li non ? Et en appliquant le first-letter sur a ça fonctionne mieux ? (genre ul#menu li a:first-letter - sans l’espace entre a et : créé par spip bien sûr).
Y’a une page où on peut le voir ?
Super ça marche !
Merci Miss Popi !
La page que tu voulais , c’est mon site ? la voilà : (en cours de modif ) http://fabrice.cizeron.free.fr/SPIPcollege/
Merci pour ton aide
Fabrice
Répondre à ce message
Bonjour,
Tout d’abord je trouve cette contrib super efficace, on la retrouve d’ailleurs sur beaucoup de site sous spip. et moi même je ne m’en passe plus !
Seulement voilà, sur un de mes sites, j’ai fait un menu vertical et un autre horizontal. Ca marche super bien sur firefox, sur safari, mais pas sur IE à cause du javascript qui ne marche que sur l’un ou l’autre des deux menus.
au moment de charger le script je dois choisir le menu à charger ( body onload=« setHover(’menu’) » ) et je voudrais ajouter menu2 par exemple. j’ai essayer de les mettre dans la même balise séparée par une virgule mais dans ce cas il n’y en a toujours qu’un seul qui charge, et c’est le premier qui apparaît dans la syntaxe.
Je pense qu’il doit y avoir une solution à ce problème, mais je dois surement pas chercher au bon endroit.
Si quelqu’un a la solution... ou une proposition... Si ce que j’ai expliqué n’est pas claire, je peux toujours ajouter des précisions. Ceux qui sont intéréssés par l’affichage de deux menus peuvent toujours me contacter.
Répondre à ce message
Bonjour,
Que faut-il ajouter à ce script pour exclure les rubriques avec les mots clés.
Merci de votre réponse.
Cordialement
MARC MEBTOUCHE
Le mieux est d’utiliser les doublons ou les doublons nommés en fonction de votre besoin (si vous utilisez déjà des doublons dans votre page, il faut utiliser les doublons nommés pour éviter le catapultage) !
Vous faites une première boucle qui recherche les rubriques ayant ce mot-clé en lui ajoutant l’attribut
{doublons}
(ou un doublons nommé) et vous rajoutez le critère{doublons}
(ou un doublons nommé) dans les boucles rubriques de cette contribution.Bon courage.
Répondre à ce message
Bonjour,
Avec l’exemple que tu donnes tu écris ceci :
« Attention ce menu ne s’affiche pas à l’identique sous IE et Firefox (par exemple, tout navigateur respectant les standards), mais fonctionne parfaitement sous IE ! »
Pas tout à fait. Avec IE, dès que l’on quitte un menu pour explorer sa descendance, celui-ci revient à sa couleur de base, ce qui fait perdre l’information du chemin d’accès. Sur Firefox et Safari par contre, ton exemple fonctionne parfaitement.
Il fonctionne sous IE. Il se déplie ! Les mots ont été soigneusement choisis.
Je ne peux ni ne veux pas pallier aux faiblesses d’IE.
Je l’adopte quand même pour mon squelette (qui fonctionnait jusqu’à présent en Javascript avec coolmenus) car ce menu résoud bien des problèmes.
Merci pour ta contribution, je ne manquerais pas de la mentionner.
Marc
Répondre à ce message
Bonjour,
super le menu mais ...
j’ai un problème pour l’integration des articles.
Ils apparaissent simplement au 2e niveau , mais pas au 1er ni au 3e niveau ?
Merci de votre aide .
c’est visible sous 2 versions :
http://antares-sellier.com/spip-ex-md-menuvertical.php3
http://antares-sellier.com/spip-ex-md-menu.php3
Répondre à ce message
Bonjour,
J’ai utilisé votre script (depuis Spip-Contrib.net) pour le « Menu en cascade automatique (tout CSS + javascript pour IE) » et qui est tiré de votre site.
Tout fonctionne très bien SAUF avec IE ... j’ai beau avoir rajouté la « fameuse » ligne dans le tag
, soit<body onload="setHover('menulist')">
... rien à faire, IE refuse systématiquement d’afficher les sous-rubriques et fait une faute sur la page (ligne:18 - celle où se trouve le tag body, Car:1, Erreur:Objet attendu, Code:0, URL:url du site)... j’en perds mon latin, mon grec et (presque) ma patience ...Note importante : je ne suis pas développeur professionnel ni amateur ... juste un bidouilleur du web comme beaucoup ;-)
Si vous pouviez m’aider à résoudre ce petit bug, cela me ferait le plus grand plaisir.
L’adresse (de test) du site est : http://www.pionnair-ge.com/spip1
J’aurais après une deuxième question : comment « allonger » la largeur de la fenêtre faisant apparaître les sous-menus (sous-rubriques) dans votre script (dans la feuille css) ... je tourne en rond aussi.
Mille mercis pour vos lumières et excellente journée,
Stéphane
Trouvé ! Le problème était que le fichier js était au mauvais endroit ... que de temps perdu pour une bêtise pareille ! J’ai encore beaucoup à apprendre...
Bonjour.
Je suis confronté au même problème et je ne vois pas comment corriger le problème. Tu fais allusion au fichier javascript mal placé. C’est à dire ?
Il faut indiquer le lien vers le fichier en javascript entre
etet ensuite bien indiqué son action au niveau du body.
Tu mets ça :
<script type="text/javascript" src="script/menuderoulant.js"></script>
au même endroit que tu déclares tes CSS et tu remplace le code du body par :
<body onload="setHover('menulist')">
Tout est bien a sa place, comme indiqué (fichier javascript, balise body modifiée, etc.). Ca marche très bien en local avec EasyPHP mais pas sur le site distant. Toujours la même erreur javascript.
Pour ceux qui sont encore confrontés au même problème, j’ai trouvé la solution sur le site http://www.aidejavascript.com/article151.html
Il faut remplacer le code du fichier javascript « menuderoulant.js » par celui-ci se trouvant sur le site ci-dessus et ça marche !
Merci pour ces infos, je ferais une modif de la contrib !
Répondre à ce message
Bonjour,
J’ai créé un menu CSS horizontal pour mon site sous SPIP...
Celui-ci fonctionne relativement bien, mais j’ai de gros problèmes d’affichage... Le problème est que les éléments du sous-menu sont plus grands que les éléments du menu principal, résultat, lorsque je me positionne sur un élément du menu principal, tous les autres se décalent... pas très user-friendly !! De plus, la colonne dans laquelle se trouve le menu s’agrandit avec le nombre d’éléments de sous-menu (j’ai volontairemetn mis un border=1 pour que ça se remarque) et décale tout le reste du site vers le bas, ce qui n’est pas le comportement voulu...
J’ai essayé de passer le positionnement du sous-menu en « absolute », ce qui donne le résultat espéré sous Mozilla, mais pas du tout sous IE... Les sous-menu s’affichent alors sur la droite du menu principal, plutôt qu’en dessous...
J’espère que vous pourrez m’aider... L’adresse du site est http://test.loyers.be
Merci d’avance
Répondre à ce message
Bonjour,
D’abord merci pour ce superbe menu. Je l’ai (un peu) adapté sur un site en construction Objectif et cela fonctionne bien pour rubrique et sous-rubrique. Malheureusement, si j’ajoute une sous-sous-rubrique, le menu déborde sur le texte (normal !) mais il y a un problème de transparence (texte du menu et de l’article sont sur lemême plan)
Je suppose que c’est à régler dans la feuille de style du menu mais où ?
Merci pour une aide éventuelle
Il faut que tu attribues des « profondeurs » à certains de tes div, que tu indiques lequel va au-dessus de l’autre.
J’ai essayé en mettent « z-index : 2 ; » à div#principal et un « z-index : 100 ; » à div#navigation et ça fonctionne :-)
Et ca, c’est dans les pages html où je veux que le menu apparaisse ? C’est une commande html « z-index : 2 » ? Jamais vu... J’essaie et merci déjà.
Le monde spip est fabuleux...
Non rajoute ça dans un de tes fichiers ccs :
div#principal z-index : 2 ;
div#navigation z-index : 100 ;
Oui le monde SPIP est fantastique ;-)
Rhâââ j’ai encore été trop vite et j’ai oublié les raccourcis SPIP
Super, ça marche en local sur firefox et ie.
Merci beaucoup. Ce qui est génial avec spip (et eva spip) c’est qu’on peut essayer des trucs en amateur et il y a toujours un + spécialiste que toi qui peut de donner le coup de main.
A+
bonjour,
j’arrive pas a mettre le menu au dessus des autres elements de la page web meme avec le css. La question que je me pose c’est est ce que j’ai bien fai la bonne manip. Sinon pour utiliser le css il faut bien intégrer dans l’html
Il faut que tu le mettes soit dans un fichier CSS, soit entre dans le head de ta page.
j’ai encore été trop vite... pfffffffffff
donc soit entre
<style> et </style>
dans le head de ta page.Répondre à ce message
Très sympa, très utile et très simple : bravo.
Par contre ce menu est vertical, quid d’un menu horizontal ?
merci
A+
Comme c’est une liste, tout n’est affaire que de CSS après.
Tu peux repartir de l’exemple donné par Jep sur ce menu de type application.
bonjour,
Donc si j’ai bien compris, si on veut changer ce menu vertical en menu horizontal, il ne faut que modifier le css ? Sinon aurais tu un exemple de css pour menu horizontal car je suis un gros debutant tant en spip qu’en prog.
Si tu regardes le code source de la page indiquée ci-dessus le code CSS y est, tu n’as plus qu’à copier/coller et sur le body tu mets :
<body onload="setHover('menu')">
Et sur le ul tu mets menu et pas menulist ^^ j’oubliais...
Répondre à ce message
Bonjour,
J’ai installé ce menu (le script Javascript sans CSS), il marche très bien en tout cas sur IE. Mais j’ai deux petit problème avec :
1. Il affiche toutes les sous rubrique (mères et filles)au chargement de la page d’accueil. Comment faire qu’il n’affiche par defaut que les rubriques meres.
2. Je trouve que l’exploration des sous rubriques est par fois trop rapide. Y’a t’il une possibilité de le relentir un peu.
Merci
(Désolée de répondre si tard, j’ai loupé ton message)
Avec une page en exemple pour ton problème 1, ce serait plus simple à essayer de résoudre.
Ensuite le CSS est nécessaire sous IE, le javascript ne permet qu’une chose à IE, c’est d’interpréter le CSS tel qu’il le devrait. Donc certains des éléments du CSS doivent être reportés dans ta feuille de style.
Pour ton deuxième point, je ne peux pas t’aider, je ne connais pas assez javascript. Je me contente généralement d’utiliser les scripts des autres ce qui est le cas ici.
Répondre à ce message
Bonjour,
j’ai visité tes pages de test :
Window98 et Firefox ou IE, pas de problème.
OSX Safari et Firefox, pas de problèmes
IS os X et Os 9 (pas Classic, hein) la cata. Les menus prennent la moitié aux trois quarts de la largeur de la fenêtre.
Faut que je teste maintenant sur un site à sous-rubriques
bravo en tous cas, c’est fort utile comme explications
Je l’ai fait tester en OSX et divers navigateurs (+ Opera sous Windows) et ça fonctionnait, mais pas de personnes avec OS9 sous la main. Je veux bien être tenue au courant des résultats de ton investigation.
Par curiosité c’est quoi IS ?
oh, la belle erreur de frappe
c’était IE,Internet Explorer et non IS
Claude
ne fonctionne pas avec IE sous mas OS 10.3.8
Qu’est-ce qui ne fonctionne pas ? Tu peux décrire plus précisément ?
Répondre à ce message
Salut et merci pour toutes ces explications fortes utiles. J’ai cependant une question, ma maîtrise de SPIP étant assez limité pour l’instant...
Sachant que le menu que tu donnes en exemple (le deuxième) correspond à Rubriques/Sous-Rubriques.
Je souhaiterais pouvoir créer plusieurs types menus à l’image de ce que tu as décrit, mais je n’y parviens pas : 1. Une sous-rubrique (et non toutes les sous-rubriques) qui afficherait tous les articles de cette rubrique par ordre alphabétique. 2. Une sous-rubrique qui afficherait tous les articles de cette rubrique par sous-titre (qui correspond chez moi à des dates).
Merci pour tout conseil !
PS
je tente désespéremment de poster ce message... j’espère qu’il ne sera pas publié plusieurs fois. Mille excuses si c’est le cas !
Je n’arrive pas très bien à saisir l’arborescence que tu cherches à faire. Tu veux quoi en premier niveau ? Les secteurs, puis par secteurs une et une seule sous-rubrique, et dans cette sous-rubrique soit les articles triés par titre soit les articles triés par sous-titre c’est ça ?
Il me manque essentiellement l’information sur le premier niveau de ton menu.
Merci de ta réponse.
Dans l’arborescence de mon site spip le premier niveau correspond aux rubriques, le second aux sous-rubriques, le troisième aux article.
Ce que je souhaiterais, c’est avoir un menu qui affiche les deux derniers niveaux. Et dans le meilleur des cas, sélectionner une sous-rubrique (deuxième niveau).
- 1 sous rubrique / articles (ordre alphab)
- 1 sous rubrique / articles classés selon un autre champ.
J’espère que j’ai été plus clair...
Merci encore !!!
Donc si je résume bien :
* rubriques (secteurs ?)
** sous-rubriques
*** articles
Quelques questions pour éviter les aller-retours :
* Y’a-t-il des articles dans la rubrique et faut-il les afficher dans le menu ?
* Le menu est-il identique entre la rubrique et sa sous-rubrique ?
* ton niveau rubrique est bien le niveau le plus haut (premiers niveaux de l’arborescence=secteur) ?
La boucle sera un tout petit peu plus complexe, mais c’est largement réalisable :)
Ah si, comment détectes-tu la sous-rubrique à afficher ? par son numéro et tu fais un menu particulier pour chaque section ? ou par mot-clé, ou...??
Bon, progressivement on va finir par y arriver...
Mais une question d’abord : un secteur c’est quoi ? Est-ce que c’est le premier niveau de l’arborescence de spip ? Dans l’interface de rédaction, en français, de spip ce sont des rubriques et en anglais ce sont des sections. Mais secteurs, je ne sais c’est pas ce que c’est... c’est peut-être aussi une des raison pour lesquelles on ne se comprend pas très bien.. Bref, ai-je fait avancer le schmilblick ? ;-)
- Y’a-t-il des articles dans la rubrique et faut-il les afficher dans le menu ?
Oui, il y a des articles et c’est leur titre (c’est peut-être le mot qu’il manquait...) que j’aimerais afficher. Un exemple : imaginons un site sur l’art contemporain.
Les rubriques pourraient être :
- Musique
- Peinture
- Sculpture
- etc...
Les sous-rubriques de la section Musique pourraient être :
- Musique électroacoustique
- Musique sérielle
- Musique répétitive
- etc...
Dans la sous-rubrique « Musique électroacoustique » on pourrait trouver des articles avec des titres du genre :
- La musique de François Bayle
- Stockhausen et la synthèse
- etc...
Ce qui donne comme arborescence du site Art contemporain :
- RUBRIQUE // SOUS-RUBRIQUE // ARTICLES
- Musique // Musique électroacoustique // La musique de François Bayle, Stockhausen et la synthèse, etc...
Ce que j’aimerais c’est, non pas afficher toute l’arborescence du site, mais par exemple sur une page, avoir un menu qui donne, à partir du bouton « Musique électroacoustique » (sous-rubrique) tous les titres des articles de cette sous-rubrique par ordre alphabétique, ou bien par ordre chronologique, ou bien par autre chose, etc...
- Le menu est-il identique entre la rubrique et sa sous-rubrique ?
euh... pas compris, là...
- ton niveau rubrique est bien le niveau le plus haut (premiers niveaux de l’arborescence=secteur) ?
oui, là on est en phase. Oufff !
- La boucle sera un tout petit peu plus complexe, mais c’est largement réalisable :)
ça, c’est cool !
Je pense qu’il suffit de reprendre la boucle du secteur courant :
Le secteur courant est en haut de la liste et en gras pour le faire ressortir.
Les articles sont en italique pour les différencier des rubriques. Ils sont éventuellement afichés avant les rubriques.
Cette boucle fonctionnera quelque soit la page (rubriques, sous-rubriques, voir sous-sous-rubriques et articles).
Si tu n’as pas de sous-sous rubrique tu peux enlever les boucles récursives (ce qu’il y a entre B_ssmenu et /B_ssmenu et entre B_ssmenusect et /B_ssmenusect.
Il faut peut-être que tu rajoutes également un tri « par titre » sur les boucles menuspip et menuspipsect.
Pour afficher plutôt les sous titres tu remplaces « par titre » par « par soustitre » et le #TITRE suivant par #SOUSTITRE dans les boucles qui impliquent (ARTICLES).
Regarde si le résultat te convient et tiens moi au courant (si c’est en ligne, je veux bien voir le résultat).
Merci beaucoup pour ton aide !
Je vais mettre en place tout ça et te tiens au courant.
à+
Du nouveau ???
salut
j’ai implémenté ton script initiale et la pas de probleme. Merci beaucoup.
Par contre sur ton 2d exemple j’ai un décalage sur firefox et ca plante lamentablement sur MIE (comme d’hab) aurai tu une idée
merci nicolas
bon alors il faut reconaitre que j’avais oublié de mettre
<body onload="setHover('menulist')">
ce qui faisait que IE ne marchait pas.
par contre j’ai toujours les espaces sur firefox et un li qui reste bloqué.
voici les liens pour voir
http://www.chatenaymalabry.com/m-canet.net/spip-ex-md-menu-eng.php3
http://www.chatenaymalabry.com/m-canet.net/zz_test.css
http://www.chatenaymalabry.com/m-canet.net/zz_test2.html
merci pour ton aide
Il y a un gros problème dans ton squelette. Je ne comprends pas du tout la logique de ta liste ni ce que tu cherches à faire.
Elle devrait être ainsi :
A chaque fois que tu as un sous niveau il doit être imbriqué dans le li du niveau supérieur, ceci correspond au fonctionnement correct d’une liste.
Ton squelette ne construit pas du tout tes listes ainsi c’est pour ça que ça ne fonctionne pas. Il n’y a pas d’imbrication des niveaux, et il y a même un li qui ne se termine pas.
j’ai remis ton code tel qu’evoquer ci dessus et retiré mes modifications. Celles-ci avaient pour but de mettre les articles dans un UL/li différent afin que seul les sous-rubriques et les articles de la rubrique en cours apparaissent comme ci dessous
RUBRIQUE 1
Sous_RUB1 >
Sous_RUb2 >
ART1_RUB1
ART2_RUB1
Ton menu propose l’organisation suivante (qui est bien, mais ce n’est pas celle que je desire)
RUBRIQUE 1
Sous_RUB1
Art1_sous_RUB1
Art2_sous_RUB1
Sous_rub2
Art1_sous_RUB2
Art2_sous_RUB2
....
si tu as une idée, merci de ta patience
http://www.chatenaymalabry.com/m-canet.net/zz_test2.php3?&id_rubrique=2 (on peut mettre 6 ou 12 pour avoir deS sous sous rubriques)
nicolas
J’entourerai les boucles articles de code php comme ça :
Donc le résultat ne s’affiche que si on est dans la rubrique correspondante. A répéter pour la boucle article dans le niveau du dessous.
Dis-moi si ça fonctionne (ou pas), je n’ai pas d’environnement de dev en ce moment !
Répondre à ce message
Félicitations à l’auteur !
Un script utile et simple...sauf que j’ai comme un léger problème !
J’utilise une feuille de style permettant d’afficher le menu sous forme horizontal, comme le menu d’une application windows.
Pile poil pour le niveau O et le niveau 1. Par contre, le niveau 2 se retrouve décalé vers la droite, devenant du même coup inaccessible. Problème de réglage de la feuille de style sûrement, mais là je sèche...
Quel est l’élément permettant de positionner les sous-menus de second niveaux (et plus) ?
Merci d’essayer de me dépanner.
Ma feuille de style est la suivante :
Ton exemple est en ligne ? Je trouve ça plus facile à dépanner directement sur la page.
Dans tous les cas, je regarde ça ce soir.
Non, il s’agit d’un intranet hospitalier.
Merci en tout cas de prendre sur ton temps pour tenter de m’aider.
Une dernière question si tu m’y autorise : ce menu apparait dans une table, configurée pour que les cellules soient centrées. Hors le menu s’affiche désespérement à gauche...Une idée ?
J’arrive à maîtriser le HTML, un peu le PHP, et mieux SPIP, mais par contre je rete d’une nullité crasse pour les feuilles de styles complexes. Un miracle ?
Merci d’avance, olivier.
Pourrais-tu enregsitré et m’envoyé une page produite par ton site ou une page squelette complète (voire les deux), je n’arrive pas à reproduire ton problème.
Cependant quelques éléments :
ton UNKNOWN au début est en fait ul#menu li:hover>ul sinon le menu ne fonctionne pas sous les navigateurs récents.
Evite de multiplier les padding-top, padding-bottom, etc... (margin, border-style, ...) surtout si c’est pour leur donner la même valeur. padding : 0 ; suffit (pas besoin de préciser de mesure quand il s’agit de 0). Tu peux aussi dire : padding 6px 2px ; (6 en haut et en bas, 2 à gauche et à droite). Ou encore padding : 1px 2px 3px 4px ; tu pars de 1px en haut puis tu tournes dans le sens des aiguilles d’une montre (droite bas gauche).
Si le menu se met à gauche ça vient d’un float:left, essaye en enlevant le float : left sur ul#menu (mais pas sur ul#menu li).
Envois-moi tes éléments par mail, je pourrais voir le problème dans son contexte, ce sera plus facile pour moi.
Merci de ton aide.
Je t’envoi ça.
J’ai modifié le UNKNOWN ainsi que le FLOAT : pas de changement.
Tout le CH tourne sur IE 6.
Merci encore, olivier.
Répondre à ce message
Encore merci Miss Mopi :-)
J’ai fais une adaptation de ce menu sur www.biospip.org : style « Menu dynamique ». J’y ai ajouté la fameuse balise #EXPOSER qui marche à merveille sous SPIP 1.8 pour identifier la hierarchie de rubriques dans laquelle on se trouve (et l’indiquer par un changement de couleur dans le menu par exemple).
- Le squelette du menu : http://biospip.org/biospip/inc_menu.html ;
- La feuille css du menu : http://biospip.org/biospip/biocss/d....
Voilà, et encore merci pour tout Miss Mopi.
Répondre à ce message
Super ! Je connaissais ce menu tout CSS. J’ai tenté de le faire fonctionner sous IE avec du javascript, et à ma grande honte, j’avoue avoir abandonné au bout d’un jour... Bravo donc à Ibilab ! Et à toi de nous le présenter adapté à SPIP.
Pour IE Mac, c’est vraiment une daube. Microsoft de toute façon a abandonné son développement, et les adeptes du Mac semblent migrer vers Safari.
J’ai testé. Le javascript n’est malheureusement pas très stable, avec IE évidemment. Dès qu’on modifie un tant soit peu la feuille de style, IE déraille. Les onmouseover et onmouseout fonctionnent mal.
Il faut faire attention à ce que tu modifies dans la feuille de styles c’est clair.
Envois-moi ton test et je regarderai pourquoi ça a déconné si tu veux.
J’ai légèrement modifié menuderoulant.js, car IE n’ouvre pas certains menus sur un onmouseover et l’ouvre sur un onmouseout. Maintenant ça fonctionne à peu près, à cette différence près que IE n’affiche pas le 3e niveau de menu et pas non plus mes menus #EXPOSER. Mais c’est pas grave, z’ont qu’à se mettre sous Mozilla ou Safari...
Voici ma version de menuderoulant.js (espérons que SPIP-contrib ne va pas l’afficher en grands caractères...). J’ai scindé en 2 hover() pour IE sache bien ce qu’il faut faire selon le onmouseout et le onmouseover :
J’avoue être étonnée que tu ais dû modifier le js... J’ai testé ce menu sous toutes les coutures avec IE et il fonctionne très bien. Aurais-tu d’autres javascripts avec lesquels il pourrait rentrer en conflit ?
Oui, effectivement le script fonctionne bien lorsque je désactive le script de Weborama, que je trouve bien pratique pour avoir certaines infos qui ne sont fournies par aucun autre compteur. J’ai écrit à Weborama pour en savoir plus...
Ca veut dire que les 2 scripts manquent un peu de fiabilité. En attendant je vais essayer de bricoler... Avec le script que j’ai posté ci-dessus, ça marche mieux, mais il y a encore le 1er mouseover qui ne se déclenche pas. C’est pas bien génant, le visiteur ne s’en aperçoit pas, mais c’est pas normal.
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 : |