Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
11/08/2010, 16:04:07
(Modification du message : 22/08/2010, 12:49:38 par lolo61.)
Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.7.x
#~ Nom de l'hébergeur :
#~ Informations Système :
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
bonjour,
J'ai réalisé un menu horizontal et un sous menu également horizontal avec le gabarit cssmenu.tpl
Je me suis inspiré pour les css d'un message posté en 2009 ( http://forum.cmsmadesimple.org/index.php...979.0.html)
Je voudrais que lorsque l'on arrive sur les pages, le sous-menu reste affiché.
J'ai bien essayé à mettre des display: block; dans tous les sens mais je n'y arrive pas
Si quelqu'un a une idée...
En tout cas grâce à ce forum, mon site avance bien, merci à tous..
Je ne peux malheureusement pas faire de lien, car il me faut indiquer une adresse ip spécifique dans mon ordi pour le voir, l'ancien site étant toujours fonctionnel.
Mes css :
Code : #menuwrapper{
}
#menuwrapper ul#primary-nav{
width: 950px;
margin: 0 auto;
height: 50px;
position: relative;
}
#menuwrapper ul#primary-nav li{
float: left;
list-style-type: none;
}
#menuwrapper ul#primary-nav li a{
display: block;
float: left;
padding: 3px 12px 5px ;
font-size: 12px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#menuwrapper ul#primary-nav li a:hover{
background: #000;
}
#menuwrapper ul#primary-nav li.menuactive a{
background: #000;
}
#menuwrapper ul#primary-nav li ul {
position: absolute;
top: 22px;
left: 69px;
width: 750px;
}
#menuwrapper ul#primary-nav li ul li a{
display: none;
float: left;
padding: 5px 12px 4px;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background: none;
z-index:10;
}
#menuwrapper ul#primary-nav li ul{
padding: 0;
}
#menuwrapper ul#primary-nav li:hover ul li a{
display: block;
background-image: url(images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive:hover ul li a{
height:15px;
display: block;
}
#menuwrapper ul#primary-nav li ul#first-second-nav li a{
display: block;
background: none;
z-index:5;
}
#menuwrapper ul#primary-nav li ul li a:hover{
background-image: url(images/pattern_menu_bas_gris.png);
background-repeat: repeat-x;
height:15px;
}
#menuwrapper ul#primary-nav li ul li.menuactive a{
background-image: url(images/pattern_menu_bas_gris.png);
background-repeat: repeat-x;
}
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
11/08/2010, 16:04:07
(Modification du message : 22/08/2010, 12:49:38 par lolo61.)
Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.7.x
#~ Nom de l'hébergeur :
#~ Informations Système :
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
bonjour,
J'ai réalisé un menu horizontal et un sous menu également horizontal avec le gabarit cssmenu.tpl
Je me suis inspiré pour les css d'un message posté en 2009 ( http://forum.cmsmadesimple.org/index.php...979.0.html)
Je voudrais que lorsque l'on arrive sur les pages, le sous-menu reste affiché.
J'ai bien essayé à mettre des display: block; dans tous les sens mais je n'y arrive pas
Si quelqu'un a une idée...
En tout cas grâce à ce forum, mon site avance bien, merci à tous..
Je ne peux malheureusement pas faire de lien, car il me faut indiquer une adresse ip spécifique dans mon ordi pour le voir, l'ancien site étant toujours fonctionnel.
Mes css :
Code : #menuwrapper{
}
#menuwrapper ul#primary-nav{
width: 950px;
margin: 0 auto;
height: 50px;
position: relative;
}
#menuwrapper ul#primary-nav li{
float: left;
list-style-type: none;
}
#menuwrapper ul#primary-nav li a{
display: block;
float: left;
padding: 3px 12px 5px ;
font-size: 12px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#menuwrapper ul#primary-nav li a:hover{
background: #000;
}
#menuwrapper ul#primary-nav li.menuactive a{
background: #000;
}
#menuwrapper ul#primary-nav li ul {
position: absolute;
top: 22px;
left: 69px;
width: 750px;
}
#menuwrapper ul#primary-nav li ul li a{
display: none;
float: left;
padding: 5px 12px 4px;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background: none;
z-index:10;
}
#menuwrapper ul#primary-nav li ul{
padding: 0;
}
#menuwrapper ul#primary-nav li:hover ul li a{
display: block;
background-image: url(images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive:hover ul li a{
height:15px;
display: block;
}
#menuwrapper ul#primary-nav li ul#first-second-nav li a{
display: block;
background: none;
z-index:5;
}
#menuwrapper ul#primary-nav li ul li a:hover{
background-image: url(images/pattern_menu_bas_gris.png);
background-repeat: repeat-x;
height:15px;
}
#menuwrapper ul#primary-nav li ul li.menuactive a{
background-image: url(images/pattern_menu_bas_gris.png);
background-repeat: repeat-x;
}
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
met en commentaire les
que tu rencontres, ca te facilitera la tâche.
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
met en commentaire les
que tu rencontres, ca te facilitera la tâche.
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
Le menu s'affiche maintenant correctement
Les sous-menus n'apparaissent et reste que lorsque l'on arrive sur les pages
Ça ne fonctionne pas vraiment sur IE 6 mais ça, c'est une autre histoire.
Il me reste à faire en sorte que les sous menus s'affichent au survol de la sourie, je mettrais [résolu] quand ça sera fait, afin d'avoir les deux solutions.
Mais au moins ça marche
merci !
Code : #menuwrapper{
}
#menuwrapper ul#primary-nav{
width: 950px;
margin: 0 auto;
height: 52px;
position: relative;
}
#menuwrapper ul#primary-nav li{
float: left;
list-style-type: none;
}
#menuwrapper ul#primary-nav li a{
display: block;
float: left;
padding: 5px 12px 5px ;
font-size: 12px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#menuwrapper ul#primary-nav li a:hover{
background-image: url(images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive a{
background-image: url(images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li.menuactive li a{
background-image: url(images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li ul {
position: absolute;
top: 24px;
left: 66px;
width: 750px;
display: block;
}
#menuwrapper ul#primary-nav li ul li a{
display: none;
float: left;
padding: 5px 12px 5px;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background: none;
z-index:10;
}
#menuwrapper ul#primary-nav li ul{
padding: 0;
display: block;
}
#menuwrapper ul#primary-nav li:hover ul li a{
display: none;
background-image: url(images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive:hover ul li a{
height:15px;
display: block;
}
#menuwrapper ul#primary-nav li ul#first-second-nav li a{
display: block;
background: none;
z-index:5;
}
#menuwrapper ul#primary-nav li ul li a:hover{
background-image: url(images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
height:15px;
}
#menuwrapper ul#primary-nav li ul li.menuactive a{
background-image: url(images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
Le menu s'affiche maintenant correctement
Les sous-menus n'apparaissent et reste que lorsque l'on arrive sur les pages
Ça ne fonctionne pas vraiment sur IE 6 mais ça, c'est une autre histoire.
Il me reste à faire en sorte que les sous menus s'affichent au survol de la sourie, je mettrais [résolu] quand ça sera fait, afin d'avoir les deux solutions.
Mais au moins ça marche
merci !
Code : #menuwrapper{
}
#menuwrapper ul#primary-nav{
width: 950px;
margin: 0 auto;
height: 52px;
position: relative;
}
#menuwrapper ul#primary-nav li{
float: left;
list-style-type: none;
}
#menuwrapper ul#primary-nav li a{
display: block;
float: left;
padding: 5px 12px 5px ;
font-size: 12px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#menuwrapper ul#primary-nav li a:hover{
background-image: url(images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive a{
background-image: url(images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li.menuactive li a{
background-image: url(images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li ul {
position: absolute;
top: 24px;
left: 66px;
width: 750px;
display: block;
}
#menuwrapper ul#primary-nav li ul li a{
display: none;
float: left;
padding: 5px 12px 5px;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background: none;
z-index:10;
}
#menuwrapper ul#primary-nav li ul{
padding: 0;
display: block;
}
#menuwrapper ul#primary-nav li:hover ul li a{
display: none;
background-image: url(images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive:hover ul li a{
height:15px;
display: block;
}
#menuwrapper ul#primary-nav li ul#first-second-nav li a{
display: block;
background: none;
z-index:5;
}
#menuwrapper ul#primary-nav li ul li a:hover{
background-image: url(images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
height:15px;
}
#menuwrapper ul#primary-nav li ul li.menuactive a{
background-image: url(images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
Rectification: je ne sais pas ce que j'ai bricolé, mais ça fonctionne très bien sur IE6
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
Rectification: je ne sais pas ce que j'ai bricolé, mais ça fonctionne très bien sur IE6
Messages : 11,007
Sujets : 230
Inscription : Sep 2007
Réputation :
1
re,
>Rectification: je ne sais pas ce que j'ai bricolé, mais ça fonctionne très bien sur IE6
C'est un navigateur obsolète !!!! ne pas utiliser
validateur http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2831
>#~ Version du CMS: 1.7.x
Nota version cms périmée on est en 1.8.2 
Messages : 11,007
Sujets : 230
Inscription : Sep 2007
Réputation :
1
re,
>Rectification: je ne sais pas ce que j'ai bricolé, mais ça fonctionne très bien sur IE6
C'est un navigateur obsolète !!!! ne pas utiliser
validateur http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2831
>#~ Version du CMS: 1.7.x
Nota version cms périmée on est en 1.8.2
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
si tout se passe bien, oublie pas [résolu] dans le titre de ton premier message
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
si tout se passe bien, oublie pas [résolu] dans le titre de ton premier message
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
Je sais qu'il est obsolète, mais va dire ça aux clients qui pensent qu'un navigateur, c'est un mec qui fait du bateau ......
Merci pour le forum, c'est vraiment bien
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
Je sais qu'il est obsolète, mais va dire ça aux clients qui pensent qu'un navigateur, c'est un mec qui fait du bateau ......
Merci pour le forum, c'est vraiment bien
Messages : 11,007
Sujets : 230
Inscription : Sep 2007
Réputation :
1
re,
>Je sais qu'il est obsolète, mais va dire ça aux clients qui pensent qu'un navigateur
ben ... tu es la pour les former ces "gentils" utilisateurs
Messages : 11,007
Sujets : 230
Inscription : Sep 2007
Réputation :
1
re,
>Je sais qu'il est obsolète, mais va dire ça aux clients qui pensent qu'un navigateur
ben ... tu es la pour les former ces "gentils" utilisateurs
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
j'essaye de finir mon menu, mais j'ai du mal.
Tout fonctionne :
- le sous menu reste présent quand on est sur une page
- les boutons du menu et du sous menu restent bien d'une couleur différente pour indiquer dans quelle page on est
- quand on survole le menu, les sous menus apparaissent bien
Mais le problème, c'est que quand on survole les autres boutons du menu, les sous menu apparaissent, mais le sous menu de la page active ne disparait pas.
Voila le nouveau code ( j'ai upgradé vers la version 8.2)
#menu_vert{
width: 950px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
background-image: url([[root_url]]/images/pattern_menu.png);
background-repeat: no-repeat;
background-position: center top;
}
#menuwrapper{
}
#menuwrapper ul#primary-nav{
width: 950px;
margin: 0 auto;
height: 52px;
position: relative;
}
#menuwrapper ul#primary-nav li{
float: left;
list-style-type: none;
}
#menuwrapper ul#primary-nav li a{
display: block;
float: left;
padding: 5px 12px 5px ;
font-size: 12px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#menuwrapper ul#primary-nav li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li.menuactive li a{
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li ul {
position: absolute;
top: 24px;
width: 750px;
display: block;
}
#menuwrapper ul#primary-nav li ul li a{
display: none;
float: left;
padding: 5px 12px 5px;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background: none;
z-index:10;
}
#menuwrapper ul#primary-nav li ul{
padding: 0;
display: block;
}
#menuwrapper ul#primary-nav li ul a{
padding: 0;
display: none;
}
#menuwrapper ul#primary-nav li:hover ul li a{
display: block;
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive:hover ul li a{
height:15px;
display: block;
}
#menuwrapper ul#primary-nav li ul#first-second-nav li a{
display: block;
background: none;
z-index:5;
}
#menuwrapper ul#primary-nav li ul li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
height:15px;
}
#menuwrapper ul#primary-nav li ul li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
Merci !!!!!
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
j'essaye de finir mon menu, mais j'ai du mal.
Tout fonctionne :
- le sous menu reste présent quand on est sur une page
- les boutons du menu et du sous menu restent bien d'une couleur différente pour indiquer dans quelle page on est
- quand on survole le menu, les sous menus apparaissent bien
Mais le problème, c'est que quand on survole les autres boutons du menu, les sous menu apparaissent, mais le sous menu de la page active ne disparait pas.
Voila le nouveau code ( j'ai upgradé vers la version 8.2)
#menu_vert{
width: 950px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
background-image: url([[root_url]]/images/pattern_menu.png);
background-repeat: no-repeat;
background-position: center top;
}
#menuwrapper{
}
#menuwrapper ul#primary-nav{
width: 950px;
margin: 0 auto;
height: 52px;
position: relative;
}
#menuwrapper ul#primary-nav li{
float: left;
list-style-type: none;
}
#menuwrapper ul#primary-nav li a{
display: block;
float: left;
padding: 5px 12px 5px ;
font-size: 12px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#menuwrapper ul#primary-nav li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li.menuactive li a{
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li ul {
position: absolute;
top: 24px;
width: 750px;
display: block;
}
#menuwrapper ul#primary-nav li ul li a{
display: none;
float: left;
padding: 5px 12px 5px;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background: none;
z-index:10;
}
#menuwrapper ul#primary-nav li ul{
padding: 0;
display: block;
}
#menuwrapper ul#primary-nav li ul a{
padding: 0;
display: none;
}
#menuwrapper ul#primary-nav li:hover ul li a{
display: block;
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive:hover ul li a{
height:15px;
display: block;
}
#menuwrapper ul#primary-nav li ul#first-second-nav li a{
display: block;
background: none;
z-index:5;
}
#menuwrapper ul#primary-nav li ul li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
height:15px;
}
#menuwrapper ul#primary-nav li ul li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
Merci !!!!!
Messages : 2,487
Sujets : 18
Inscription : Dec 2009
Réputation :
0
Bonjour,
As-tu un lien à nous transmettre pour qu'on puisse voir tout ca avec Firebug ?
Merci
Messages : 2,487
Sujets : 18
Inscription : Dec 2009
Réputation :
0
Bonjour,
As-tu un lien à nous transmettre pour qu'on puisse voir tout ca avec Firebug ?
Merci
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
attend un peu :
Citation :Mais le problème, c'est que quand on survole les autres boutons du menu, les sous menu apparaissent, mais le sous menu de la page active ne disparait pas.
tu sais que c'est normal ? ce que tu veux faire relève du JS et non du CSS...
tu nous as demander d'afficher automatiquement les sous menu d'une page active en css... c'est fait ! le css ne ferra rien d'autre, et certainement pas un "si je survole tel champs alors j'en cache d'autre"
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
attend un peu :
Citation :Mais le problème, c'est que quand on survole les autres boutons du menu, les sous menu apparaissent, mais le sous menu de la page active ne disparait pas.
tu sais que c'est normal ? ce que tu veux faire relève du JS et non du CSS...
tu nous as demander d'afficher automatiquement les sous menu d'une page active en css... c'est fait ! le css ne ferra rien d'autre, et certainement pas un "si je survole tel champs alors j'en cache d'autre"
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
Je vais chercher ce week-end et je mettrais résolu ensuite
Je n'ai pas le lien, car je suis sur un serveur de test tant que le site n'est pas fini.
Disons que dans le premier code en haut. ça donne ceci :http://www.brightfuture.be/
Ça marche très bien.
Maintenant, je veux arriver à cela : http://www.cssplay.co.uk/menus/simple_dr...hree&sub=e
Avec le deuxième code, ça marche aussi sauf que le sous menu actif ne disparait pas quand on survole les autres boutons du menu.
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
Je vais chercher ce week-end et je mettrais résolu ensuite
Je n'ai pas le lien, car je suis sur un serveur de test tant que le site n'est pas fini.
Disons que dans le premier code en haut. ça donne ceci :http://www.brightfuture.be/
Ça marche très bien.
Maintenant, je veux arriver à cela : http://www.cssplay.co.uk/menus/simple_dr...hree&sub=e
Avec le deuxième code, ça marche aussi sauf que le sous menu actif ne disparait pas quand on survole les autres boutons du menu.
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
tu as regardé 2s le code généré ?
dans une page X tu n'as aucun code généré qui correspond aux enfants des autres menus (même caché). Ce n'est donc pas étonnant que tu n'arrives pas a les afficher. Le début de ton soucis n'est pas CSS mais template .
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation :
0
tu as regardé 2s le code généré ?
dans une page X tu n'as aucun code généré qui correspond aux enfants des autres menus (même caché). Ce n'est donc pas étonnant que tu n'arrives pas a les afficher. Le début de ton soucis n'est pas CSS mais template .
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
20/08/2010, 18:23:43
(Modification du message : 20/08/2010, 18:29:23 par Jean le Chauve.)
Je vais regarder ça ce weekend.
Dons si ce n'est pas exactement comme sur le site cssplay : http://www.cssplay.co.uk/menus/simple_dr...hree&sub=e dis-le que je ne perde pas du temps inutilement.
N'oublie pas que ce menu n'accepte que deux niveaux, il te faudra passer par une navigation (latérale) pour les sous-menus.
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
20/08/2010, 18:23:43
(Modification du message : 20/08/2010, 18:29:23 par Jean le Chauve.)
Je vais regarder ça ce weekend.
Dons si ce n'est pas exactement comme sur le site cssplay : http://www.cssplay.co.uk/menus/simple_dr...hree&sub=e dis-le que je ne perde pas du temps inutilement.
N'oublie pas que ce menu n'accepte que deux niveaux, il te faudra passer par une navigation (latérale) pour les sous-menus.
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
20/08/2010, 21:32:58
(Modification du message : 20/08/2010, 22:00:48 par lolo61.)
Salut, c'est toi qui a fait le menu sur http://www.brightfuture.be (Tu m'as déjà sauver la mise une fois, merci, j'ai l'impression de voir Zoro arriver…)
C'est exactement le même que sur ton site .
Sauf que je veux ajouter la possibilité d'afficher les sous menus au survole du menu, donc, oui comme sur le site cssplay.
Je mettrais le lien pour le site quand il sera fini, j'apprend beaucoup sur cmsms depuis peu, j'ai hâte de pouvoir aider les autres comme vous le faites tous.
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
20/08/2010, 21:32:58
(Modification du message : 20/08/2010, 22:00:48 par lolo61.)
Salut, c'est toi qui a fait le menu sur http://www.brightfuture.be (Tu m'as déjà sauver la mise une fois, merci, j'ai l'impression de voir Zoro arriver…)
C'est exactement le même que sur ton site .
Sauf que je veux ajouter la possibilité d'afficher les sous menus au survole du menu, donc, oui comme sur le site cssplay.
Je mettrais le lien pour le site quand il sera fini, j'apprend beaucoup sur cmsms depuis peu, j'ai hâte de pouvoir aider les autres comme vous le faites tous.
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
Voila mes codes:
Le css qui fonctionne comme sur ton site
Code : #menu_vert{
width: 950px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
background-image: url([[root_url]]/images/pattern_menu.png);
background-repeat: no-repeat;
background-position: center top;
}
#menuwrapper{
}
#menuwrapper ul#primary-nav{
width: 950px;
margin: 0 auto;
height: 52px;
position: relative;
}
#menuwrapper ul#primary-nav li{
float: left;
list-style-type: none;
}
#menuwrapper ul#primary-nav li a{
display: block;
float: left;
padding: 5px 12px 5px ;
font-size: 12px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#menuwrapper ul#primary-nav li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li.menuactive li a{
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li ul {
position: absolute;
top: 24px;
left: 66px;
width: 750px;
display: block;
}
#menuwrapper ul#primary-nav li ul li a{
display: none;
float: left;
padding: 5px 12px 5px;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background: none;
z-index:10;
}
#menuwrapper ul#primary-nav li ul{
padding: 0;
display: block;
}
#menuwrapper ul#primary-nav li:hover ul li a{
display: none;
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive:hover ul li a{
height:15px;
display: block;
}
#menuwrapper ul#primary-nav li ul#first-second-nav li a{
display: block;
background: none;
z-index:5;
}
#menuwrapper ul#primary-nav li ul li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
height:15px;
}
#menuwrapper ul#primary-nav li ul li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
Et le code du gabarit du menu
Code : {* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent">
<a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive">
<a class="menuactive" {elseif $node->haschildren == true}
<li class="menuparent">
<a class="menuparent" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="sectionheader"><span class="sectionheader">{$node->menutext}</span>{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />{else}
<li>
<a {/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
><span class="sectionheader">{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
Voila mes codes:
Le css qui fonctionne comme sur ton site
Code : #menu_vert{
width: 950px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
background-image: url([[root_url]]/images/pattern_menu.png);
background-repeat: no-repeat;
background-position: center top;
}
#menuwrapper{
}
#menuwrapper ul#primary-nav{
width: 950px;
margin: 0 auto;
height: 52px;
position: relative;
}
#menuwrapper ul#primary-nav li{
float: left;
list-style-type: none;
}
#menuwrapper ul#primary-nav li a{
display: block;
float: left;
padding: 5px 12px 5px ;
font-size: 12px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#menuwrapper ul#primary-nav li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li.menuactive li a{
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li ul {
position: absolute;
top: 24px;
left: 66px;
width: 750px;
display: block;
}
#menuwrapper ul#primary-nav li ul li a{
display: none;
float: left;
padding: 5px 12px 5px;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background: none;
z-index:10;
}
#menuwrapper ul#primary-nav li ul{
padding: 0;
display: block;
}
#menuwrapper ul#primary-nav li:hover ul li a{
display: none;
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive:hover ul li a{
height:15px;
display: block;
}
#menuwrapper ul#primary-nav li ul#first-second-nav li a{
display: block;
background: none;
z-index:5;
}
#menuwrapper ul#primary-nav li ul li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
height:15px;
}
#menuwrapper ul#primary-nav li ul li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
Et le code du gabarit du menu
Code : {* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent">
<a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive">
<a class="menuactive" {elseif $node->haschildren == true}
<li class="menuparent">
<a class="menuparent" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="sectionheader"><span class="sectionheader">{$node->menutext}</span>{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />{else}
<li>
<a {/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
><span class="sectionheader">{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
21/08/2010, 21:47:53
(Modification du message : 21/08/2010, 22:52:51 par Jean le Chauve.)
Tu n'as pas choisi le plus facile
L'algorithme n'est pas optimisé, mais ça tourne.
Voir en action : http://www.menus-cmsms-madesimple.be/men...fant2.html
Le code est valide sous IE5.5 -> IE7 mais je n'ai pas pu tester sur IE8 (faudra peut-être modifier les commentaires conditionnels <!--[if IE 7]>)
Code : {if $count > 0}
<div id="nav">
{assign var="parentActif" value=0}
{foreach from=$nodelist item=node}
{if $node->index == 0}{assign var="prevnode" value=$node}{/if}
{assign var='current' value='<ul class="sub">'}
{if $node->current or $node->parent}{assign var="parentActif" value=$node->hierarchy|truncate:2:""}{/if}
{if $node->depth > $node->prevdepth}
{if $prevnode->parent or $prevnode->current}{assign var="current" value='</li></ul><ul class="sub_active">'}
{/if}
{$current}
{elseif $node->depth < $node->prevdepth and $prevnode->hierarchy|truncate:2:"" != $parentActif}
{repeat string='</li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>' times=$node->prevdepth-$node->depth}
{elseif $node->depth < $node->prevdepth and $node->hierarchy|truncate:2:"" == $parentActif}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
{elseif $node->index > 0 and ($node->current == false and !$node->parent)}
</li>
{elseif $node->index > 1 }</li>
{/if}
{if $node->depth == 1 and ($node->current or $node->parent) and $node->index > 0}
</ul><ul class="current">
{elseif $node->depth == 1 and ($node->current or $node->parent) and $node->index == 0}
<ul class="current">
{elseif $node->depth == 1 and $node->index > 0 and $node->hierarchy|truncate:2:"" != $parentActif}
</ul><ul class="select">
{elseif $node->depth == 1}
<ul class="select">
{/if}
{if $node->parent or ($node->current and $node->haschildren)}
<li class="menuactive menuparent">
<a class="menuactive menuparent"
{elseif $node->current}
<li class="current_sub">
<a class="menuactive"
{elseif $node->haschildren}
<li class="menuparent">
<a class="menuparent"
{else}
<li>
<a {/if}
{if $node->target}target="{$node->target}" {/if}
{if $node->depth == 1 and $node->hierarchy|truncate:2:"" != $parentActif and $node->haschildren}
href="{$node->url}">{$node->menutext}<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
{elseif $node->depth == 1 and $node->hierarchy|truncate:2:"" == $parentActif}
href="{$node->url}">{$node->menutext}</a>
{else}
href="{$node->url}">{$node->menutext}</a>
{/if}
{assign var="prevnode" value=$node}
{/foreach}
{if !$node->parent}
{repeat string='</li></ul>' times=$node->depth-1}
{/if}
{if $node->hierarchy|truncate:2:"" != $parentActif}<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>{/if}
<div class="clearb"></div>
</div>
{/if}
Appeler le menu avec le paramètre : {menu template='menuLOLO' number_of_levels='2'}
css : Code : /* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/simple_dropline.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* for this demo only */
#nav {margin:20px 0 80px 0;}
/* the styling */
#nav {width:750px; height:20px; background:#000; position:relative;}
#nav .select, #nav .current {margin:0; padding:0; list-style:none;}
#nav li {display:inline; margin:0; padding:0; height:auto;}
#nav .select a,
#nav .current a {display:block; height:20px; float:left; background:#000; padding:0 10px 0 10px; text-decoration:none; font-size:12px; line-height:20px; white-space:nowrap; border-right:1px solid #fff; color:#fff;}
* html #nav .select a, * html #nav .current a {width:1px; height:21px;}
#nav .select a:hover,
#nav .select li:hover a {background:#888; cursor:pointer; color:#ff0;}
#nav .sub {display:none;}
/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0;}
#nav .current a {background:#666; color:#ff0;}
#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover {background:#888; color:#ff0;}
#nav .sub_active .current_sub a,
#nav .sub_active a:hover {background:#666; color:#ff0;}
#nav .select li a:hover .sub,
#nav .select li:hover .sub {display:block; position:absolute; width:750px; top:20px; left:0; background:#888; margin-top:0; padding:0; z-index:100; color:#fff; font-size:11px;}
#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}
#nav .sub_active {display:block; position:absolute; width:750px; top:20px; left:0; background:#666; margin-top:0; padding:0; z-index:10;}
* html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; margin-t\op:1px;}
#nav .sub_active a {height:21px; text-decoration:none; line-height:20px; white-space:nowrap; display:block; float:left; background:#666; padding:5px 10px 10px 10px; margin:0; font-size:12px; white-space:nowrap; border:0; color:#fff;}
#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {display:block; background:#888; padding:5px 10px 10px 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;}
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
21/08/2010, 21:47:53
(Modification du message : 21/08/2010, 22:52:51 par Jean le Chauve.)
Tu n'as pas choisi le plus facile
L'algorithme n'est pas optimisé, mais ça tourne.
Voir en action : http://www.menus-cmsms-madesimple.be/men...fant2.html
Le code est valide sous IE5.5 -> IE7 mais je n'ai pas pu tester sur IE8 (faudra peut-être modifier les commentaires conditionnels <!--[if IE 7]>)
Code : {if $count > 0}
<div id="nav">
{assign var="parentActif" value=0}
{foreach from=$nodelist item=node}
{if $node->index == 0}{assign var="prevnode" value=$node}{/if}
{assign var='current' value='<ul class="sub">'}
{if $node->current or $node->parent}{assign var="parentActif" value=$node->hierarchy|truncate:2:""}{/if}
{if $node->depth > $node->prevdepth}
{if $prevnode->parent or $prevnode->current}{assign var="current" value='</li></ul><ul class="sub_active">'}
{/if}
{$current}
{elseif $node->depth < $node->prevdepth and $prevnode->hierarchy|truncate:2:"" != $parentActif}
{repeat string='</li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>' times=$node->prevdepth-$node->depth}
{elseif $node->depth < $node->prevdepth and $node->hierarchy|truncate:2:"" == $parentActif}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
{elseif $node->index > 0 and ($node->current == false and !$node->parent)}
</li>
{elseif $node->index > 1 }</li>
{/if}
{if $node->depth == 1 and ($node->current or $node->parent) and $node->index > 0}
</ul><ul class="current">
{elseif $node->depth == 1 and ($node->current or $node->parent) and $node->index == 0}
<ul class="current">
{elseif $node->depth == 1 and $node->index > 0 and $node->hierarchy|truncate:2:"" != $parentActif}
</ul><ul class="select">
{elseif $node->depth == 1}
<ul class="select">
{/if}
{if $node->parent or ($node->current and $node->haschildren)}
<li class="menuactive menuparent">
<a class="menuactive menuparent"
{elseif $node->current}
<li class="current_sub">
<a class="menuactive"
{elseif $node->haschildren}
<li class="menuparent">
<a class="menuparent"
{else}
<li>
<a {/if}
{if $node->target}target="{$node->target}" {/if}
{if $node->depth == 1 and $node->hierarchy|truncate:2:"" != $parentActif and $node->haschildren}
href="{$node->url}">{$node->menutext}<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
{elseif $node->depth == 1 and $node->hierarchy|truncate:2:"" == $parentActif}
href="{$node->url}">{$node->menutext}</a>
{else}
href="{$node->url}">{$node->menutext}</a>
{/if}
{assign var="prevnode" value=$node}
{/foreach}
{if !$node->parent}
{repeat string='</li></ul>' times=$node->depth-1}
{/if}
{if $node->hierarchy|truncate:2:"" != $parentActif}<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>{/if}
<div class="clearb"></div>
</div>
{/if}
Appeler le menu avec le paramètre : {menu template='menuLOLO' number_of_levels='2'}
css : Code : /* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/simple_dropline.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* for this demo only */
#nav {margin:20px 0 80px 0;}
/* the styling */
#nav {width:750px; height:20px; background:#000; position:relative;}
#nav .select, #nav .current {margin:0; padding:0; list-style:none;}
#nav li {display:inline; margin:0; padding:0; height:auto;}
#nav .select a,
#nav .current a {display:block; height:20px; float:left; background:#000; padding:0 10px 0 10px; text-decoration:none; font-size:12px; line-height:20px; white-space:nowrap; border-right:1px solid #fff; color:#fff;}
* html #nav .select a, * html #nav .current a {width:1px; height:21px;}
#nav .select a:hover,
#nav .select li:hover a {background:#888; cursor:pointer; color:#ff0;}
#nav .sub {display:none;}
/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0;}
#nav .current a {background:#666; color:#ff0;}
#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover {background:#888; color:#ff0;}
#nav .sub_active .current_sub a,
#nav .sub_active a:hover {background:#666; color:#ff0;}
#nav .select li a:hover .sub,
#nav .select li:hover .sub {display:block; position:absolute; width:750px; top:20px; left:0; background:#888; margin-top:0; padding:0; z-index:100; color:#fff; font-size:11px;}
#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}
#nav .sub_active {display:block; position:absolute; width:750px; top:20px; left:0; background:#666; margin-top:0; padding:0; z-index:10;}
* html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; margin-t\op:1px;}
#nav .sub_active a {height:21px; text-decoration:none; line-height:20px; white-space:nowrap; display:block; float:left; background:#666; padding:5px 10px 10px 10px; margin:0; font-size:12px; white-space:nowrap; border:0; color:#fff;}
#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {display:block; background:#888; padding:5px 10px 10px 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;}
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
22/08/2010, 12:48:20
(Modification du message : 22/08/2010, 16:47:42 par lolo61.)
Cool, ça marche bien.
Je l'ai adapté au graphisme de mon site et c'est parfait.
Je vais essayer de bidouiller quelque chose pour que lorsque que l'on survole les menus où il n'y a pas de sous menus, la barre du bas ne s'affiche pas.
Ce genre de menu est très courant et les templates que j'ai trouvé n'étaient pas simple à mettre en oeuvre.
Mille fois Merci...
Messages : 131
Sujets : 21
Inscription : Jun 2010
Réputation :
0
22/08/2010, 12:48:20
(Modification du message : 22/08/2010, 16:47:42 par lolo61.)
Cool, ça marche bien.
Je l'ai adapté au graphisme de mon site et c'est parfait.
Je vais essayer de bidouiller quelque chose pour que lorsque que l'on survole les menus où il n'y a pas de sous menus, la barre du bas ne s'affiche pas.
Ce genre de menu est très courant et les templates que j'ai trouvé n'étaient pas simple à mettre en oeuvre.
Mille fois Merci...
|
