Flux rss
Ils ont besoin de votre aide
Collection CommentCaMarche.net
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Un menu CSS vertical multi-niveaux

Ixion, le lundi 18 août 2008 à 19:23:55
Bonjour,

Je dispose d'un menu CSS vertical avec des sous-menus. Seulement, j'aimerais pouvoir ajouter à ce menu d'autres sous-menus... en somme, avoir un menu "multi-niveaux" comme on peut en voir ici :
http://www.javascriptfr.com/codes_image/normal/36506.aspx

Je tourne depuis des jours pour pouvoir adapter mon menu... je bloque sur les balises à ajouter : <ul>, <li> ? et à quel endroit ? J'ai regardé des exemples de menus multi-niveaux, mais malheureusement ils ne sont pas du tout bâtis comme le mien. J'espère que vous pourrez m'éclairer. Merci d'avance.


Voici le code :
-------------------------------------------------



<ul class="rubriques">

<li><a href="#" class="btn1" onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre();"></a></li>
<div id="smenu1" style="display: none;" onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre();">
<ul> <li><a href="#" onMouseOut="javascript:montre();">Lien 1</a></li>
<li><a href="#" onMouseOut="javascript:montre();">Lien 2</a></li>
<li><a href="#" onMouseOut="javascript:montre();">Lien 3</a></li>
</ul>
</div>



<li><a href="#" class="btn2" onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre();"></a></li>
<div id="smenu2" style="display: none;" onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre();">
<ul> <li><a href="#" onMouseOut="javascript:montre();">Lien 1</a></li>
<li><a href="#" onMouseOut="javascript:montre();">Lien 2</a></li>
<li><a href="#" onMouseOut="javascript:montre();">Lien 3</a></li>
</ul>
</div>


</ul>
Répondre à Ixion  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Groarh, le mardi 19 août 2008 à 00:28:15
Bonsoir,
le html me semble correct. Pourrais-tu me montrer ton javascript ? Je ne peux pas t'aider si je ne l'ai pas.
   
Répondre à Groarh

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Ixion, le mardi 19 août 2008 à 11:22:16
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;
}
   
Répondre à Ixion

3


  • 1    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
Groarh, le dimanche 24 août 2008 à 00:48:13
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.
   
Répondre à Groarh

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Ixion, le dimanche 24 août 2008 à 12:21:18
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 :)
   
Répondre à Ixion

5


  • 1    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
RAD ZONE, le dimanche 24 août 2008 à 13:15:28
SALUT

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>

♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
   
Répondre à RAD ZONE

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Ixion, le dimanche 31 août 2008 à 10:38:00
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 :)
   
Répondre à Ixion

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 Groarh, le samedi 6 septembre 2008 à 19:03:14
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é.
   
Répondre à Groarh
Posez votre question Répondre

Résultats pour Un menu CSS vertical multi niveaux

Menu Horizontal multi-niveaux (Résolu) Bonjour, J'aimerai bien avoir le code source CSS ou Javascript qui permet d'obtenir un menu Horizontal multi-niveau et qui ressemble a celui de cette page "Regardez plus haut : Menu Décideur". (Vous pouvez survoler votre souris sur... www.commentcamarche.net/forum/affich-8314453-menu-horizontal-multi-niveaux
Menu horizontal à plusieurs niveaux en CSS?? (Résolu) Bonjour, Pour mon cours d'internet, je dois faire 1 site web sans rien d'autre que de l'HTML et du CSS... J'aimerais donc ajouter un menu horizontal à plusieurs niveaux mais sans javascript et tout ce qui s'en suit...... www.commentcamarche.net/forum/affich-9047030-menu-horizontal-a-plusieurs-niveaux-en-css
PB menu à plusieurs niveaux sous IE 6-7 (Résolu) Bonjour, Pour un site que je dois réaliser de toute urgence j'utilise un exemple de menu horizontal à plusieurs niveaux verticaux téléchargé à l'adresse suivante: http://dosimple.ch/articles/Menus-dynamiques/ (c'est le menu horizontal)... www.commentcamarche.net/forum/affich-5994734-pb-menu-a-plusieurs-niveaux-sous-ie-6-7

Résultats pour Un menu CSS vertical multi niveaux

[CSS] Créer facilement des CSSUn outil très facile d'utilisation pour créer des CSS, avec un aperçu en direct de ce que vous créez : TopStyle. La version Lite est gratuite. http://www.bradsoft.com/download/index.asp www.commentcamarche.net/faq/sujet-1035-css-creer-facilement-des-css
Créer un site beau, dynamique et respectueux des standardsVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beau, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de... www.commentcamarche.net/faq/sujet-1073-creer-un-site-beau-dynamique-et-respectueux-des-standards
Centrer verticalement une page webPour centrer verticalement une page web, impossible de s'en sortir en css. Une solution bien pratique : JavaScript. 1. Le fichier .js 2. La page .html 3. Utilisation 4. Inconvénients 5. Rappel Merci à Dalida pour la source du fichier... www.commentcamarche.net/faq/sujet-9867-centrer-verticalement-une-page-web
Réponses suivantes

Résultats pour Un menu CSS vertical multi niveaux

Vitesse de rafraichissement verticale (Résolu)Bonjour, bonsoir. Everest me signale que la vitesse de rafraichissement verticale, au niveau du bureau, n'est que de 60 Hz. Alors que le minimum devrait être 85 Hz. Comment puis je apporter des modifications à ce niveau ? quelles seront les... www.commentcamarche.net/forum/affich-4740667-vitesse-de-rafraichissement-verticale
Affichage d'un div au survol d'un lien (Résolu)Bonjour, Soit un menu css avec sous et sous-sous-menu du style : extrait html : xxxxxx yyy ... www.commentcamarche.net/forum/affich-7952313-affichage-d-un-div-au-survol-d-un-lien
Probleme avec steam (Résolu)Salut a tous,voila depuis la derniere mise a jour steam (dont tout le monde parle) je n´arrie pas a avoir la liste d´amis etc dans mon menu css,on m´a dit qui-il fallait faire shift+tab,sa ne marche toujour pas,ensuite sur un forum j´ai vu que cela... www.commentcamarche.net/forum/affich-3588553-probleme-avec-steam
Réponses suivantes

Résultats pour Un menu CSS vertical multi niveaux

Télécharger Multi Install En créant un CD ou CDRom, vous voudriez bien y ajouter un menu pour son lancement et une meilleure navigation. Muti Install est programme avancé pour la création de menu de démarrage pour CD/DVD. Il permet ainsi de créer de multiples programmes à... www.commentcamarche.net/telecharger/telecharger-34055790-multi-install
Réponses suivantes

Résultats pour Un menu CSS vertical multi niveaux

NEC MultiSync LCD225WXM SilverLCD 225 225 WXM 225WXM 225WXM, Ecran plat, 22 pouces, Haut-parleurs intégrés: Oui, TCO 95/99/03:TCO '03, Enceintes intégrées, Entrée vidéo:D-sub, DVI-D, Couleur:Silver, Entrées vidéo multiples:Double, Entrée DVI/VGA:DVI/VGA, Angle vertical de... www.commentcamarche.net/guide-achat/nec-multisync-lcd225wxm-silver-963821-fiche-technique
Trust Multimedia Scroll Keyboard KB-2200Clavier, USB, Divers: Advanced keyboard with a total of 28 extra multimedia buttons, built-in scroll ball and convenient volume control wheel With scroll wheel and 2 buttons providing vertical and horizontal scrolling for easy and comfortable... www.commentcamarche.net/guide-achat/trust-multimedia-scroll-keyboard-kb-2200-744342-fiche-technique
NEC MultiSync EA261WM BlackEA 261 261 WM 261WM 261WM, Ecran plat, 26 pouces, Haut-parleurs intégrés: Oui, Enceintes intégrées, Couleur:Black, Entrée vidéo:D-sub, DVI-D, Hub USB, Entrée DVI/VGA:DVI/VGA, Entrées vidéo multiples:Double, Angle vertical de vision:160, Angle horizontal d www.commentcamarche.net/guide-achat/nec-multisync-ea261wm-black-1120399-fiche-technique
Réponses suivantes

Résultats pour Un menu CSS vertical multi niveaux

Archos réplique à Apple avec de nouveaux baladeurs multimédia(Paris - Relaxnews) - Et si les premiers tueurs d'iPod venaient de France ? Le fabricant Archos a présenté hier la cinquième génération de sa gamme de produits. Au menu, les nouveaux baladeurs multimédia français ont corrigé leur look, embarquent plus... www.commentcamarche.net/actualites/archos-replique-a-apple-avec-de-nouveaux-baladeurs-multimedia-3123669-actualite.php3
Réponses suivantes

Résultats pour Un menu CSS vertical multi niveaux

.NET - IntroductionIntroduction à .NET .NET (prononcez «Dotnet») est un standard proposé par la société Microsoft, pour le développement d'applications d'entreprises multi-niveaux, basées sur des composants. Microsoft .NET constitue ainsi la réponse de Microsoft à... www.commentcamarche.net/contents/dotnet/dotnet-intro.php3
.NET - IntroductionIntroduction à .NET .NET (prononcez «Dotnet») est un standard proposé par la société Microsoft, pour le développement d'applications d'entreprises multi-niveaux, basées sur des composants. La plate forme .NET a été élaborée en s'appuyant sur une... www.commentcamarche.net/contents/dotnet/dotnet-clr.php3
.NET - IntroductionIntroduction à .NET .NET (prononcez «Dotnet») est un standard proposé par la société Microsoft, pour le développement d'applications d'entreprises multi-niveaux, basées sur des composants. La plate forme .NET a été élaborée en s'appuyant sur une... www.commentcamarche.net/contents/dotnet/dotnet-fcl.php3
Réponses suivantes