Un menu CSS vertical multi-niveaux
Fermé
Ixion
-
18 août 2008 à 19:23
grabou Messages postés 1 Date d'inscription jeudi 19 janvier 2012 Statut Membre Dernière intervention 19 janvier 2012 - 19 janv. 2012 à 12:38
grabou Messages postés 1 Date d'inscription jeudi 19 janvier 2012 Statut Membre Dernière intervention 19 janvier 2012 - 19 janv. 2012 à 12:38
A voir également:
- Un menu CSS vertical multi-niveaux
- Menu déroulant excel - Guide
- Windows 11 menu démarrer classique - Guide
- Menu caché tv continental edison ✓ - Forum Téléviseurs
- Trait vertical clavier - Forum Windows
- Svp faire une barre verticale avec clavier - Forum Clavier
10 réponses
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
24 août 2008 à 13:15
24 août 2008 à 13:15
SALUT
en voila un sans javascript !! adapte le a tes besoins ,
j ai mis des sub menu et meme un sub sub !
en voila un sans javascript !! adapte le a tes besoins ,
j ai mis des sub menu et meme un sub sub !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>rad zone webcreation </title> <meta name="author" content="http://radservebeer.free.fr" /> <meta name="generator" content="pspad editor, www.pspad.com" /> <style type="text/css">/* <![CDATA[*/ body { background-color: #333; } .rad3.rad4.rad5.rad6.rad7.menu { margin: 10px; height: 100px; font-size: 12pt; font-family: roman; } .menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 11em; } .menu li { background-color: #cccc99; float: left; } .menu li.sub { background-color: #cccc99; } .menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; } .menu a, .menu a:visited { border: 1px solid #ffffff; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 11em; color: #000000; padding-left: 1em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; } .menu b { float: right; margin-right: 5px; } * html .menu a, * html .menu a:visited { width: 11em; } * html .menu a:hover { color: #ccff66; background-color: #999966; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } .menu li:hover { position: relative; } .menu a:active, .menu a:focus { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } .menu li:hover > a { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } .menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 7em; background-color: transparent; } .menu li:hover > ul { visibility: visible; } .menu ul a:hover ul ul { visibility: hidden; } .menu ul a:hover ul a:hover ul ul { visibility: hidden; } .menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; } .menu ul a:hover ul { visibility: visible; } .menu ul a:hover ul a:hover ul { visibility: visible; } .menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; } .menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; }/*]]>*/ </style> </head> <body> <div class="menu"> <ul><li> <a href="#"><b>»</b>Item <!--[if IE 7]> <!--></a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul><li> <a href="#">S1</a></li><li> <a href="#"><b>»</b>S1A <!--[if IE 7]> <!--></a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul><li> <a href="#">SS1</a></li><li> <a href="#">SS2 <!--[if IE 7]> <!--></a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--></li><li> <a href="#"><b>»</b>2 <!--[if IE 7]> <!--></a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul><li> <a href="#">S2</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--></li><li> <a href="#">3</a></li><li> <a href="#">4</a></li> </ul> </div> </body> </html>
Bonjour,
J'ai trouvé une fonction que je devrais pouvoir adapter à mon cas :
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
Merci de te pencher sur mon problème :)
J'ai trouvé une fonction que je devrais pouvoir adapter à mon cas :
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
Merci de te pencher sur mon problème :)
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
19 août 2008 à 00:28
19 août 2008 à 00:28
Bonsoir,
le html me semble correct. Pourrais-tu me montrer ton javascript ? Je ne peux pas t'aider si je ne l'ai pas.
le html me semble correct. Pourrais-tu me montrer ton javascript ? Je ne peux pas t'aider si je ne l'ai pas.
Bonjour et merci :)
En fait, je ne sais pas du tout quoi ajouter pour avoir un "sous-sous-menu". Par exemple lorsque je pointe sur "Lien1" un autre sous-menu s'affiche. J'ai essayer plusieurs choses sans succès.
------------------------------
Voilà le javascript :
window.onload=montre();
var timer;
function montre(id) {
window.clearTimeout(timer);
var d = document.getElementById(id);
for (var i = 1; i<=20; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block'; timer=window.setTimeout("montre()", 10000);}
}
------------------------------
Et le CSS :
#menu {
position:absolute;
top:0px;
left:0px;
margin:0;
padding:0;
display:block;
}
#menu .titre-rubrique {
margin:0 0 1px 1px;
padding:0;
width:222px;
display:block;
text-align:left;
}
.rubriques {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
}
.rubriques li a.btn1 {
position:relative;
margin-bottom:0;
padding:0 0 0 0;
display:block;
width:190px;
height:27px;
overflow:hidden;
font:0.71em Arial, Helvetica, sans-serif;
font-weight:normal;
color:#D1DBDF;
text-align:left;
text-transform:uppercase;
background-image:url(_images/menu/btn1.gif);
background-repeat:no-repeat;
background-position:top center;
}
.rubriques li a.btn2 {
position:relative;
margin-bottom:0;
padding:0 0 0 0;
display:block;
width:190px;
height:27px;
overflow:hidden;
font:0.71em Arial, Helvetica, sans-serif;
font-weight:normal;
color:#D1DBDF;
text-align:left;
text-transform:uppercase;
background-image:url(_images/menu/btn2.gif);
background-repeat:no-repeat;
background-position:top center;
}
.rubriques li a:hover.btn1 {
height:27px;
overflow:hidden;
font:0.71em Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
background-image:url(_images/menu/btn1_over.gif);
background-repeat:no-repeat;
background-position:bottom center;
}
.rubriques li a:hover.btn2 {
height:27px;
overflow:hidden;
font:0.71em Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
background-image:url(_images/menu/btn2_over.gif);
background-repeat:no-repeat;
background-position:bottom center;
}
.rubriques li div {
position:relative;
top:0;
left:0;
padding:0;
}
.rubriques div {
position:absolute;
}
.rubriques ul {
position:absolute;
top:-32px;
left:190px;
margin:0;
padding:0;
border-bottom:1px solid #142D35;
}
.rubriques div a, .rubriques div a:visited{
margin-bottom:-2px;
padding:8px 10px 4px 16px;
display:block;
width:210px;
height:auto;
font:0.71em Arial, Helvetica, sans-serif;
text-decoration:none;
color:#FFF;
text-transform:uppercase;
background-image:url(_images/menu/fd_s-bouton.png);
background-repeat:repeat;
filter: Alpha(Opacity=85);
border:1px solid #142D35;
border-left:4px solid #142D35;
}
html>body .rubriques div a {
margin-bottom:-1px;
}
.rubriques div a:hover{
color:#142D35;
text-decoration:none;
background-color:#FFF;
background-image:none;
filter: Alpha(Opacity=100);
border:1px solid #142D35;
border-left:4px solid #000000;
}
.rubriques li a.titre, .rubriques li a:visited.titre{
margin-bottom:-2px;
padding:8px 10px 4px 16px;
display:block;
width:210px;
height:auto;
font:0.71em Arial, Helvetica, sans-serif;
text-decoration:none;
color:#FFF;
text-transform:uppercase;
text-align:center;
background-color: #142D35;
filter: Alpha(Opacity=85);
border:1px solid #142D35;
}
En fait, je ne sais pas du tout quoi ajouter pour avoir un "sous-sous-menu". Par exemple lorsque je pointe sur "Lien1" un autre sous-menu s'affiche. J'ai essayer plusieurs choses sans succès.
------------------------------
Voilà le javascript :
window.onload=montre();
var timer;
function montre(id) {
window.clearTimeout(timer);
var d = document.getElementById(id);
for (var i = 1; i<=20; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block'; timer=window.setTimeout("montre()", 10000);}
}
------------------------------
Et le CSS :
#menu {
position:absolute;
top:0px;
left:0px;
margin:0;
padding:0;
display:block;
}
#menu .titre-rubrique {
margin:0 0 1px 1px;
padding:0;
width:222px;
display:block;
text-align:left;
}
.rubriques {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
}
.rubriques li a.btn1 {
position:relative;
margin-bottom:0;
padding:0 0 0 0;
display:block;
width:190px;
height:27px;
overflow:hidden;
font:0.71em Arial, Helvetica, sans-serif;
font-weight:normal;
color:#D1DBDF;
text-align:left;
text-transform:uppercase;
background-image:url(_images/menu/btn1.gif);
background-repeat:no-repeat;
background-position:top center;
}
.rubriques li a.btn2 {
position:relative;
margin-bottom:0;
padding:0 0 0 0;
display:block;
width:190px;
height:27px;
overflow:hidden;
font:0.71em Arial, Helvetica, sans-serif;
font-weight:normal;
color:#D1DBDF;
text-align:left;
text-transform:uppercase;
background-image:url(_images/menu/btn2.gif);
background-repeat:no-repeat;
background-position:top center;
}
.rubriques li a:hover.btn1 {
height:27px;
overflow:hidden;
font:0.71em Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
background-image:url(_images/menu/btn1_over.gif);
background-repeat:no-repeat;
background-position:bottom center;
}
.rubriques li a:hover.btn2 {
height:27px;
overflow:hidden;
font:0.71em Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
background-image:url(_images/menu/btn2_over.gif);
background-repeat:no-repeat;
background-position:bottom center;
}
.rubriques li div {
position:relative;
top:0;
left:0;
padding:0;
}
.rubriques div {
position:absolute;
}
.rubriques ul {
position:absolute;
top:-32px;
left:190px;
margin:0;
padding:0;
border-bottom:1px solid #142D35;
}
.rubriques div a, .rubriques div a:visited{
margin-bottom:-2px;
padding:8px 10px 4px 16px;
display:block;
width:210px;
height:auto;
font:0.71em Arial, Helvetica, sans-serif;
text-decoration:none;
color:#FFF;
text-transform:uppercase;
background-image:url(_images/menu/fd_s-bouton.png);
background-repeat:repeat;
filter: Alpha(Opacity=85);
border:1px solid #142D35;
border-left:4px solid #142D35;
}
html>body .rubriques div a {
margin-bottom:-1px;
}
.rubriques div a:hover{
color:#142D35;
text-decoration:none;
background-color:#FFF;
background-image:none;
filter: Alpha(Opacity=100);
border:1px solid #142D35;
border-left:4px solid #000000;
}
.rubriques li a.titre, .rubriques li a:visited.titre{
margin-bottom:-2px;
padding:8px 10px 4px 16px;
display:block;
width:210px;
height:auto;
font:0.71em Arial, Helvetica, sans-serif;
text-decoration:none;
color:#FFF;
text-transform:uppercase;
text-align:center;
background-color: #142D35;
filter: Alpha(Opacity=85);
border:1px solid #142D35;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
24 août 2008 à 00:48
24 août 2008 à 00:48
Ixion,
je vais te proposer une solution bricolée à partir de tes codes. Mais pour plus de souplesse, il faudrait créer une fonction javascript qui soit plus adaptée au multi-niveaux, comme celle du site que tu sites en exemple.
Reste à l'écoute.
je vais te proposer une solution bricolée à partir de tes codes. Mais pour plus de souplesse, il faudrait créer une fonction javascript qui soit plus adaptée au multi-niveaux, comme celle du site que tu sites en exemple.
Reste à l'écoute.
Merci Rad Zone ! Je n'ai pas encore eu le temps de tester, mais ces menus ont l'air très intéressants. Je m'y mets tout de suite.
Groarh avait aussi une proposition, je peux essayer les deux pour voir.
@+ et merci :)
Groarh avait aussi une proposition, je peux essayer les deux pour voir.
@+ et merci :)
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
6 sept. 2008 à 19:03
6 sept. 2008 à 19:03
Ixion,
quand j'ai vu la rapidité avec laquelle Rad Zone a posté une solution, j'ai laissé tomber de mon côté, désolé.
quand j'ai vu la rapidité avec laquelle Rad Zone a posté une solution, j'ai laissé tomber de mon côté, désolé.
je viens relancer ce sujet, car je m'intéresse aux scripts qui peuvent nous permettre de faire des menu dans le genre des menus verticaus de rocketThems pour joomla.
avez vous une idée ?
Merci
avez vous une idée ?
Merci
monkey_monk
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
130
14 sept. 2009 à 13:21
14 sept. 2009 à 13:21
Pour ce qui est de la structure, c'est très simple ! Il suffit de faire des listes dans des listes dans une liste ! ^^
Pour la suite, css pour la mise en forme et javascript (jquery powa) pour l'animation (slide, fade, etc...)...
Info pour le type de structure:
<ul>
<li>menu sans sous-menu</li>
<li>menu avec sous-menu
<ul>
<li>sous-menu</li>
</ul>
</li>
</ul>
pour le css et je javascript c'est à chacun de voir, ce n'est pas très compliqué sauf pour la compatibilité multi browser... auquel cas je conseil une détection du browser et un css spécifique. Au pire des cas... des hack css !
Bon travail ! :D
Pour la suite, css pour la mise en forme et javascript (jquery powa) pour l'animation (slide, fade, etc...)...
Info pour le type de structure:
<ul>
<li>menu sans sous-menu</li>
<li>menu avec sous-menu
<ul>
<li>sous-menu</li>
</ul>
</li>
</ul>
pour le css et je javascript c'est à chacun de voir, ce n'est pas très compliqué sauf pour la compatibilité multi browser... auquel cas je conseil une détection du browser et un css spécifique. Au pire des cas... des hack css !
Bon travail ! :D
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
1 janv. 2010 à 18:31
1 janv. 2010 à 18:31
https://www.cssmenus.co.uk/flyout.html
Un beau qui marche même avec ie6 je crois. 100% css.
Un beau qui marche même avec ie6 je crois. 100% css.
22 mai 2009 à 11:03
Je suis tombée sur ton script et c'est exactement le style de menu que je cherchais pour mon projet. Je suis actuellement en stage de 1ère année de bts informatique de gestion. J'ai essayé d'adapter ton script a l'arborescence que j'ai, mais je n'arrive pas a comprendre tout ton script. Pourais tu m'aider stp?
-voici l'arborescence du menu:
-menu1
|sous-menu1.1
|sous-menu1.1.1
|sous-menu1.1.2
|sous-menu1.1.3
|sous-menu1.2
|sous-menu1.2.1
|sous-menu1.2.2
-menu2
|sous-menu2.1
|sous-menu2.2
|sous-menu2.3
|sous-menu2.3.1
|sous-menu2.3.2
|sous-menu2.4
|sous-menu2.5
|sous-menu2.5.1
|sous-menu2.5.2
|sous-menu2.5.3
|sous-menu2.5.3.1
|sous-menu2.5.3.2
|sous-menu2.5.4
|sous-menu2.5.4.1
|sous-menu2.5.4.2
|sous-menu2.5.5
|sous-menu2.5.5.1
|sous-menu2.4.5.2
-menu3
|sous-menu3.1
|sous-menu3.1.1
|sous-menu3.1.2
|sous-menu3.2
|sous-menu3.2.1
|sous-menu3.2.2
|sous-menu3.3
|sous-menu3.4
-menu 4
|sous-menu4.1
|sous-menu4.2
-menu5
|sous-menu5.1
|sous-menu5.1.1
|sous-menu5.1.2
|sous-menu5.1.3
|sous-menu5.1.4
|sous-menu5.1.5
|sous-menu5.1.6
|sous-menu5.1.7
|sous-menu5.1.8
|sous-menu5.2
|sous-menu5.3
|sous-menu5.3.1
|sous-menu5.3.2
-menu6
-menu7
|sous-menu7.1
|sous-menu7.2
|sous-menu7.3
|sous-menu7.4
|sous-menu7.5
|sous-menu7.6
|sous-menu7.7
|sous-menu7.8
|sous-menu7.9
Voila, merci par avance de ton aide.
2 juil. 2009 à 14:22
je viens de regarder votre site (impressive !)
Je débute en Css et j'ai repris votre idée de menu déroulant http://radservebeer.free.fr/demorad/apollo13/#
en effet je suis entrain de reprendre un site et je dois le remettre en état... ( le design y est déjà, je travaille sous spip pour faciliter l'accès à tout un chacun). Cependant j'aurais aimé faire la même chose que le menu que vous avez présenté plus haut, mais de manière horizontale ! Et étant donné que je ne maitrise pas assez, je n'arrive pas au résultat.
J'ai cru comprendre que la solution résidait dans la mise en place et la hierarchisation des balises "ul" et "li" mais je n'arrive pas à percevoir la hierarchisation de votre page css. Donc si vous pouviez m'aider sur ce meme menu mais en horizontal, je vous en serait très reconnaissant.
Greg
14 sept. 2009 à 11:47
Ce menu est exactement celui que je recherche pour mon site.
Aurais-tu la gentillesse de me faire parvenir les scripts pour le réaliser.
Merci d'avance
19 oct. 2009 à 15:03
je recherche actuellement un menu déroulant vertical comme celui de RAD ZONE.
Pouvez-vous me fournir le script ?
Merci beaucoup
19 oct. 2009 à 15:04
je recherche actuellement un menu déroulant vertical comme celui de RAD ZONE.
Pouvez-vous me fournir le script ?
Merci beaucoup