Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML - commentaires

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Bonjour,
Découvrant par hasard cette excellente contribution et ayant moi aussi utilisé et tuner pour spip le code d'alsacréation, je me permet d' ajouter ma modeste contribution qui automatise le compteur de la boucle du code javascript ; en effet il faut tout simplement utiliser les balises #TOTAL_BOUCLE, #COMPTEUR_BOUCLE des dernières versions de Spip .

C'est assez lourd à mettre en place car il faut aussi déclarer des variables avec les balises #SET/#GET, mais le résultat nous fait éviter l'incrustation de code php.
l'idée est la suivante : récupérer le nombre totale de la boucle (soit le total des rubriques à afficher) en utilisant #TOTAL_BOUCLEd'une part et se servir du compteur d'incrémentation de la boucle pour créer les noms des « id » (dtxx ou menuxy ou sousmenuyz) avec #COMPTEUR_BOUCLE d'autre part
Ces compteurs sont à rajouter en argument aux fonctions javascript d'affichage.

Voici un exemple complet de 2 niveaux de déroulement (je ne met pas le style css car il ne diffère en rien du source cité) :
javascript :
_

window.onload=afficheMenu;
window.onload=afficheSousMenu; function afficheMenu(id,id2,total) { var d = document.getElementById(id); var dt = document.getElementById(id2); for (var i = 1; i<=total; i++) { if (document.getElementById('smenu'+i)) { document.getElementById('smenu'+i).style.display='none'; } } if (d) { d.style.display='block'; }
} function afficheSousMenu(id,id2,soustotal) { var d = document.getElementById(id); for (var i = 1; i<=soustotal; i++) { if (document.getElementById('smenu'+id2+i)) { document.getElementById('smenu'+id2+i).style.display='none'; } } if (d) { d.style.display='block'; }
}

_ squelette :


[(#REM on recupere le nombre total de rubrique de tete ainsi que l'incrementation de la boucle principale "_menu"
]
[(#SET{total_menu,#TOTAL_BOUCLE})]
[(#SET{cpt_menu,#COMPTEUR_BOUCLE})]


[(#TITRE|supprimer_numero|coupeTitre{20})]


 
[(#SET{total_sous_menu,#TOTAL_BOUCLE})]
[(#SET{cpt_sous_menu,#COMPTEUR_BOUCLE})]  [(#TITRE|supprimer_numero)] 
[(#SET{total_soussous_menu,#TOTAL_BOUCLE})]   [(#TITRE|supprimer_numero|coupeTitre{20})]



[(#REM) -mEGa FIN 2eme deroulant]

Spipement vôtre ;-)

Problème Menus déroulant -horizontal - en feuilles de style CSS fondé sur XHTML

Bonjour à tous,

J'ai pris exactement le menu deroulant horizontal mais rie ne ce se déroule regarder sur mon site http://www.rezolinux.com

Qui peux m'aider merci

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Merci beaucoup :)

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

salut,

j'ai exactement le meme probleme avec montre('').

quelqu'un a trouvé une astuce ?!?

merci

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Si sa interesse quelqu'un j'ai modifié la boucle pour affiché directement le titre des articles quand il n'y a pas de sous-rubrique, si il y a des sous-rubriques leur titre s'affiche dans le menu déroulant.

 
     [(#TITRE|supprimer_numero|couper{80})]  [(#REM) Si aucun article, affiche un plan de la rubrique ]     class='daddy'>[(#TITRE|supprimer_numero|couper{80})]

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Bonjour tous le monde !

Je suis débutant sous SPIP et j'ai un petit problème ! Je suis sous SPIP 1.9.1

J'utilise un menu semblable mais avec la fonction « onclick », le javascript utiliser est

Mon code HTML est celui-ci :


 
 [(#TITRE|supprimer_numero)]
     [(#TITRE|supprimer_numero)]

Mon menu est en verticale, et mon problème est le suivant :

Il n'affiche que mes sous-rubriques de ma 1^re rubrique ! Au clique des rubriques suivante il ne rabaisse pas la 1^re rubrique et n'affiche pas les sous rubrique de la rubrique cliquée ! ( Ouf je m'excuse d'avance pour cette phrase un peu mal tournée ! )

Si quelqu'un à une astuce pour palier à ce problème je suis preneur !!

Merci d'avance !

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

j'ai écris trop vite, il faut lire :
« J'ai intégré le CSS dans habillage .css, et dans sommaire.html, j'ai enlevé l'ancien code pour mettre un INCLUDE vers le inc_menu (... »

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Bonjour à tous !

J'ai la dernière version de SPIP qui tourne, a base d'un squelette EPONA.
Je modifie ce squelette et je voulais surtout obtenir un menu horizontal (pas besoin qu'il soit deroulant)
j'essaye depuis quelques heures de faire tourner ce script Alsacréations et je n'arrive qu'à obtenir un menu horizontal, avec trois boutons (Accueil, et les deux rubriques à la racine du site). Le lien vers l'acceuil rend effectif ce bouton, mais pour les deux suivants, rien...

J'ai intégré le CSS dans habillage .css, et dans sommaire.html, j'ai enlevé l'ancien code pour mettre un vers le inc_menu que j'ai changé avec le code fourni.

Où est l'erreur ?
merci de votre aide, il n'y a plus que cela qui me bloque vraiment, le reste n'étant que de la biduouille simple de css...

merci d'avance de votre aide

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Salut,

j'avais le même problème que toi, c'est à dire que, quand on a plusieurs sous-rubriques dans une rubrique, le menu se ferme dès qu'on veut passer à la ligne suivante, comme s'il n'existait qu'une seule ligne.

J'ai résolu ce problème en observant ce que Bienf (ci-dessus) a fait sur son site : il a mis en commentaire (donc annulé) une partie du code.

Voilà, j'espère que ce sera utile à d'autres !

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Hello,
Moi aussi dévoreur des bons conseils d'alsacrations, j'en ai appliqué un très facilement à Spip (horizontal se déroulant verticalement).

Voici son application : http://www.observatoirecitoyen.be/

Il y reste cependant un petit bug, que non codeur, je n'arrive pas du tout à comprendre. Si l'auteur de l'article ou d'autres experts ont la possibilité d'un jeter un oeil, il serait temps que j'arrive à shooter ce petit bug d'affichage. Merci !

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Bonjour,

J'ai le même problème, as-tu trouvé une solution au fait que les sous menus restent affichés ???
Grand merci pour cette contribution et vos réponses

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Bonjour,
ca y est j'ai presque terminé mon menu,
mais les fenetres ouvertes ne se ferment pas . Comment faire ?

J'ai vu qu'il fallait faire : onmouseout= "javascript :montre()
Mais ca ne marche pas ...

comme le montre cet extrait du forum :

"La version proposée ci-dessus laisse apparaître les sous-menus même lorsqu'ils ne sont plus survolés. Si vous préférez qu'ils se masquent lorsque la souris les quitte, il suffit d'ajouter le comportement onmouseout= « javascript :montre() ; » sur les sous-menus (dd) comme le montre le code suivant :

RESOLU

Pour que cela fonctionne sous ie, il fallait en plus une position absolute aux sous menus #menu dd

Bienf

Menus déroulant horizontal

...pardon j'ai mal lu, j'ai lu menu au lieu de « contenu du dessous ».

Le contenu du dessous :

#page
{ background: #ffe382; text-align: left; /*margin: 0;*/ padding: 0 5 0 0px; width: 950px; z-index: 1; /*position: absolute;*/ }

Le menu de gauche est en float :

#barre_laterale
{ float: left; left: 10px; margin: 16px 10px 20px 0; border: 2px solid #64643c; top:200px; padding: 0px 10px 10px 0; color: #64643c; background: #fffde9; width: 157px; z-index:35;
}

Menus déroulant horizontal

Le #menu dl est en float, mais je n'ai pas ce pb sur netscape, donc il faut pê trouver du javascript qui corrige le problème sur ie.

je vais voir la contrib sur alsacreations et celle d'infogm

Bienf

Menus déroulant horizontal

Ton contenu qui s'affiche juste en dessous, ne serait-il pas placé en float ou relative ?

Menus déroulant horizontal

Je corrige, si vous allez sur http://www.bibliotheques93.fr/index07.htm les menus fonctionnent mais si vous choisissez un article dans le menu horizontal, le décalage vers le bas s'observe en pointant sur ce menu .

je ne sais à quoi c'est dû.

Bienf

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

bonjour !
J'ai créé un menu déroulant à partir de ce code seulement je rencontre un problème de mise en page. Lorsque le sous-menu se déroule, il décale les rubriques. Vous pouvez visionner à l'adresse que je joind.
Si quelqu'un a une idée d'où ça pourrait venir, merci de son aide !
didi

PS : je tiens à préciser que le site devant s'ajuster à la résolution qu'aura l'utilisateur, le menu ne peut être entièrement en absolut...

Menus déroulant horizontal, sous Spip...

Bonjour,

Je réalise un site sous Spip.
j'ai des problèmes avec les sous menus alors qu'avec la version html cela fonctionne correctement.

Mes sous menus poussent tous les blocs du dessous malgré des positions différentes dans les z-index du CSS.

http://www.bibliotheques93.fr/article.php3?id_article=3 par exemple

Que dois-je faire ?

Ce menu fonctionne très bien avec le html http://www.bibliotheques93.fr/index07.htm

merci.

Bienf

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

bonjour,
j'utilise spip et je viens de telecharger le menu deroulant menu css open web
mais j'arrive pas à l'integrer dans le squelette que j'utilise.

Si vous avez une solution merci de m'aider.

> Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Bonjour en réponse au message 3,
je ne parviens pas à faire fonctionner le menu horizontal sous SPip, alors qu'en html (et java) j'ai déjà utilisé ce menu qui fonctionne (alsacreations).

Bienf

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Je débute sur SPIP et j'essaie de faire mon premier squelette.
Où dois-je insérer ces fichiers pour pouvoir utiliser le menu.
- menu_css.php3
- menu_css.html
- menu.css
Merci pour votre aide.

Dépasser la limitation du Javascript

Le javascript contient une boucle limitant son fonctionnement à 10 rubriques.

Voici le code automatisant son adaptation dans SPIP :

C'est tout et ça marche super bien.

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

je me repond à moi meme : pour la question precedente j'ai trouvé : j'avais pas bien compris l'histoire de #descriptif il faut dans les rubriques concernées rentrer smenu1 smenu2 etc...
par ailleur pour que cela marche sur ie il faut remplacer onmouseover par on focus...
et ca marche super bien....

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Super script quand je le vois fonctionner chez les autres...
pour ma par j'ai telechargé le 1^er zip (celui d'alsace creation ?) et tout fonctionne tres bien sauf que les rubrique restent toutes ouvertes apres survol....
Quelqu'un aurrait il un idée je me casse la tete la dessus.
j'ai juste pris le script dans son ensemble sans modifications !
merci d'avance

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Je me répond...
Je viens de modifier l'archive Menus CSS OpenWeb qui utilise les champs extras pour l'adapter à la synthaxe d'écriture des filtres de la V1.82d.
Cà marche.

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

J'avoue que je ne sais pas ce qu'il fait en plus ou en moins.
Je suis allé faire un petit tour sur la contrib indiquée, mais je n'ais pas eu le temps de regarder en détail. Je ne sais pas si c'est plus compliqué à mettre en oeuvre...
Question en retour : est-ce que la contrib de Miss Mopi permet de mettre le menu en horizontal de manière simple ?

Pour le reste ma contrib (2^e partie) fondée sur les champs extra ne semble pas fonctionner sur la version 1.8 de SPIP...d'où les difficultés peut-être des uns et des autres.
En tout cas le script issu de AlsaCréation fonctionne bien comme l'atteste le site Inf'OGM que je viens de passer en version 1.8.

Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Question bête (probablement) : que fait ce script de plus que le script Menu en cascade automatique (tout CSS + javascript pour IE), sinon qu'il est plus compliqué ?

> Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Hello,
Essaies en remplaçant id=« #DESCRIPTIF » par id=« #TITRE »
Bonne Chance...
Mus

> Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

même chose pour moi il n'est pas dynamique et ne fonctionne pas. Dommage !

> Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Alors moi je suis dans le meme cas que toi j'ai tout à gauche et il n'est pas dynamique et le navigateur m'indique une erreur de Js, donc des que vous avez des nouvelle je suis interessée ! :p
par contre j'ai utilise #compteur_boucle qui permet d'obtenir tres bien menu1, menu2.... idem pour les sous menus
Audrey

> Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Bon, j'aurais une simple question : quelqu'un arrive à faire fonctionner ce menu ?

Moi j'ai tout sur le côté gauche, et même pas dynamique, je rame !!!

Une autre question : pourquoi ne pas utiliser la balise #COMPTEUR_BOUCLE au bout des menu et ssmenu ?

> Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

J'aurais une autre question, étant donné mon manque d'expérience, je me demandais si le positionnement du menu s'effectuait à l'aide de la feuille de style. Merci encore

> Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Bonjour,

J'ai essayé le menu déroulant à la vertical, je l'affiche pi tout est ben beau a l'exception que le menu ne déroule pas, si quelqu'un aurait l'amabilité de m'aidé je lui en saurais extrêmement reconnaissant.

Merci beaucoup

> Menus déroulant - vertical ou horizontal - en feuilles de style CSS fondé sur XHTML

Bonjour,

Comment pourrions nous faire pour rendre ce menu référençable par google, donc ne plus passer par Javascript mais par un css - xhtml ?

/* A REGLER MANUELLEMENT SI LE CADRE EST TROP PETIT */
hauteurcadre = 20; xmenu = new Array;
xlien = new Array; xmenu[0] = 'Accueil';
xmenu[1] = 'Actu';
xmenu[2] = 'Forums';
xmenu[3] = 'Blogs';
xmenu[4] = 'Bons Plans';
xmenu[5] = 'Divertissement';
xmenu[6] = 'Annuaire';
xmenu[7] = 'Contact'; xlien[0] = '';
xlien[1] = '';
xlien[2] = '';
xlien[3] = '';
xlien[4] = '';
xlien[5] = '';
xlien[6] = '';
xlien[7] = ''; xlien[0] += 'Portail d\'échange et de partage de la communauté étudiante francophone.'; xlien[1] += 'Actu Etudiante';
xlien[1] += ' | ';
xlien[1] += 'Actu en Vrac';
xlien[1] += ' | ';
xlien[1] += 'Sport';
xlien[1] += ' | ';
xlien[1] += 'Le Kiosque : les grands journaux'; xlien[2] += 'Général';
xlien[2] += ' | ';
xlien[2] += 'Annonces - Cours';
xlien[2] += ' | ';
xlien[2] += 'Vie étudiante - Sortie';
xlien[2] += ' | ';
xlien[2] += 'Musique - Ciné ...';
xlien[2] += ' | ';
xlien[2] += 'Cuisine';
xlien[2] += ' | ';
xlien[2] += 'Rencontres'; xlien[3] += 'Crée ton blog et visite les blogs des Zetudiants !'; xlien[4] += 'Cours';
xlien[4] += ' | ';
xlien[4] += 'Stages - Jobs - CV';
xlien[4] += ' | ';
xlien[4] += 'Logement';
xlien[4] += ' | ';
xlien[4] += 'Sorties';
xlien[4] += ' | ';
xlien[4] += 'Mobile : sonneries, logos, SMS.';
xlien[4] += ' | ';
xlien[4] += 'Pack Logiciel Etudiants'; xlien[5] += 'Jeux Video';
xlien[5] += ' | ';
xlien[5] += 'Cinéma';
xlien[5] += ' | ';
xlien[5] += 'Musique';
xlien[5] += ' | ';
xlien[5] += 'Bouquins';
xlien[5] += ' | ';
xlien[5] += 'Cuisine'; xlien[6] += 'Sites Etudiants';
xlien[6] += ' | ';
xlien[6] += 'Associations';
xlien[6] += ' | ';
xlien[6] += 'Sites Utiles';
xlien[6] += ' | ';
xlien[6] += 'Autres'; xlien[7] += 'Webmaster';
xlien[7] += ' | ';
xlien[7] += 'Rédacteur en chef';
xlien[7] += ' | ';
xlien[7] += 'Recrutement'; document.write(''); document.write(''); for(i=0;i'+xmenu[i]+''); }
document.write(' 
 '); function colorIt(tditem) { if(document.all) { document.all.td0.style.background='#FFEC47'; document.all.td1.style.background='#FFEC47'; document.all.td2.style.background='#FFEC47'; document.all.td3.style.background='#FFEC47'; document.all.td4.style.background='#FFEC47'; document.all.td5.style.background='#FFEC47'; document.all.td6.style.background='#FFEC47'; document.all.td7.style.background='#FFEC47'; tditem.style.background='#FFFFFF'; }
else if(document.getElementById) { document.getElementById("td0").style.background='#FFEC47'; document.getElementById("td1").style.background='#FFEC47'; document.getElementById("td2").style.background='#FFEC47'; document.getElementById("td3").style.background='#FFEC47'; document.getElementById("td4").style.background='#FFEC47'; document.getElementById("td5").style.background='#FFEC47'; document.getElementById("td6").style.background='#FFEC47'; document.getElementById("td7").style.background='#FFEC47';
tditem.style.background='#FFFFFF'; }
} function MajMenu(menu) { which = xlien[menu];
if (document.layers){ document.dynamenu31.document.dynamenu32.document.write(''+which+'') document.dynamenu31.document.dynamenu32.document.close() }
else if (document.getElementById) { document.getElementById("dynamenu33").innerHTML = ''+which+''; }
else if (document.all){ dynamenu33.innerHTML=' ' dynamenu33.innerHTML=''+which+''; }
}
if (document.getElementById) colorIt(document.getElementById("td0"));
else if (document.all){ colorIt(document.all.td0); }
MajMenu(0);

Cordialement,
Draikhin