28173 sujets

CSS et mise en forme, CSS3

Menu vertical et liste

Bonsoir à toutes et à tous.

Une petite question ! J'ai bien compris qu'avec le "Menu Vertical déroulant" il n'était pas posible d'ajouter un sous menu suplémentaire!

Mais voilà de quoi j'aurais besoin : Le menu vertical "vd1" au clic le sous-menu s'affiche dessous et dans ce sous-menu, appliquer le "vd2", le sous-sous-menu s'affiche à droite, seul endroit en fait où il y aurait des liens !!!

Est-ce faisable (si je me suis bien fait comprendre) ?

N'est-il pas possible d'appliquer ces deux action différentes dans un même menu?

Ou alors ne serait-il pas envisageable d'avoir une liste dépliable sous forme d'arbre, et appliquer le vd2 sur le dernier sous-sous-menu ?

Merci d'avance.
Bonjour,

Suis pas sûr d'avoir tout compris mais ...

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

			

<head> 

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

   <title>test</title> 



<style type="text/css">
.menu {
z-index:1000;
font-size:90%;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
background:#d4d8bd;
height:26px;
}

/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#000;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {background:#d4d8bd; width:150px; w\idth:149px;}
/* style the link hover */
* html .menu a:hover {color:#fff; background:#949e7c;}

.menu :hover > a {
color:#fff; 
background:#949e7c;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px; 
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}
</style>

<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->
</style>

</head>



<body>
<div class="menu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#nogo">Item 2</a></li>
<li class="sub"><a href="#nogo">Item 3 »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>

	<li><a href="../index.html">Item 3a</a></li>
	<li class="sub"><a href="#nogo">Item 3b »<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="../index.html">Item 3bi</a></li>
			<li><a href="#nogo">Item 3bii</a></li>
			<li class="sub"><a href="#nogo">Item 3biii »<!--[if IE 7]><!--></a><!--<![endif]-->

			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li><a href="#nogo">Item 3biii-1</a></li>
					<li><a href="#nogo">Item 3biii-2</a></li>
					<li><a href="#nogo">Item 3biii-3</a></li>
					<li><a href="#nogo">Item 3biii-4</a></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="#nogo">Item 3c</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>

<li><a href="#nogo">Item 4</a></li>
<li><a href="#nogo">Item 5</a></li>
<li><a href="#nogo">Item 6</a></li>

</ul>
</div>

</body>


Non?

depuis http://www.cssplay.co.uk/menu/index.html
Bonjour, et Merci pour cet exemple Smiley cligne

En fait, ce que je souhaitais, c'est un mixte des 2 menus "vertical" présents dans les tutos.

Donc j'ai un menu "Replié", au clic sur "Menu2" mon sous-menu s'affiche dessous en fixe, et au clic (ou en hover) sur un des sous-menu j'ai un sous-sous-menu qui s'affiche en hover sur la droite.
Comme dans l'image suivante : upload/8319-Image1.jpg

Mais il semblerait que ce ne soit pas réalisable Smiley decu
Salut !

A mon avis, ceci est possible ... (pourquoi ça ne le serait pas ?!?)
Mais tu te réserves un petit moment sympathique avec le code javascript !

Commence par partir du premier code donné pour le menu déroulant 1, puis essaye toi-même d'adapter le code du 2nd menu pour obtenir l'effet désiré...

Et si ça bug, tu pourras toujours revenir dans le salon spécialisé en montrant où réside le problème rencontré ...

Bon courage
Smiley cligne
Modifié par Cygnus (29 Oct 2006 - 23:53)
Sujet clos
Aller à