28172 sujets

CSS et mise en forme, CSS3

Sous-menu s'ouvrant vers le haut

Bonjour,

Je réalise mon site web et je veux réaliser un menu horizontal qui s'ouvre en sous-menu vers le haut lorsque que l'on passe dessus avec la souris.

Problème, cela s'ouvre vers le bas et non vers le haut.

Merci de votre aide Smiley bawling
Modifié par Ludo76 (28 Jun 2011 - 19:06)
Bonjour,
Voici quelque chose en pur CSS, valide XHTML et CSS2.1 et qui fonctionne (au moins) sur IE8 et FF3.6.17.
Ce n'est pas une pure merveille de programmation, mais cela a le mérite de fonctionner Smiley cligne . Tu constateras qu'il faut placer des li vides afin que les sous-menus aient tous la même longueur.
<!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" xml:lang="en">
<head>
<title>essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="all" />
<style type="text/css">
body {
	font: 11px verdana, sans-serif;
	background: #AFA99B url("fond.jpg") top left no-repeat;
	margin: 0;
	padding: 0;
}
#space {height:120px;}
#menuDeroulant {
	width: 644px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute;
	left: 0;
}
#menuDeroulant li {
	float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant .sousMenu {
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute;
	top: -110px;
}
#menuDeroulant .sousMenu li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 149px;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited {
	display: block;
	height: 1%;
	color: #fff;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
}
#menuDeroulant li a:hover {
	background-color: #000;
}
#menuDeroulant li a:active {
	background-color: #000;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited {
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover {
	background-image: none;
	background-color: #000;
}

#menuDeroulant li:hover > .sousMenu {display: block;}

li.vide {background-color: transparent}
#menuDeroulant .sousMenu li.vide a:hover {background-color: transparent}

</style>
	</head>
	<body>
		<p id="space">&nbsp;</p>
		<ul id="menuDeroulant">
			<li>
			<a href="#">partie1</a>
			<ul class="sousMenu">
				<li><a href="#">sousmenu1</a></li>
				<li><a href="#">sousmenu2</a></li>
				<li><a href="#">sousmenu3</a></li>
				<li class="vide"><a href="#">&nbsp;</a></li>
				<li class="vide"><a href="#">&nbsp;</a></li>
			</ul>
			</li>
			<li>
			<a href="#">Partie 2</a>
			<ul class="sousMenu">
				<li><a href="#">sousmenu4</a></li>
				<li><a href="#">sousmenu5</a></li>
				<li><a href="#">sousmenu6</a></li>
				<li><a href="#">sousmenu7</a></li>
				<li><a href="#">sousmenu8</a></li>
			</ul>
			</li>
			<li>
			<a href="#">Partie 3</a>
			<ul class="sousMenu">
				<li><a href="#">sousmenu9</a></li>
				<li><a href="#">sousmenu10</a></li>
				<li class="vide"><a href="#">&nbsp;</a></li>
				<li class="vide"><a href="#">&nbsp;</a></li>
				<li class="vide"><a href="#">&nbsp;</a></li>
			</ul>
			</li>
			<li>
			<a href="#">Partie 4</a>
			<ul class="sousMenu">
				<li><a href="#">sousmenu11</a></li>
				<li class="vide"><a href="#">&nbsp;</a></li>
				<li class="vide"><a href="#">&nbsp;</a></li>
				<li class="vide"><a href="#">&nbsp;</a></li>
				<li class="vide"><a href="#">&nbsp;</a></li>
			</ul>
			</li>
		</ul>
	</body>
	</html>
Merci beaucoup Iddsoft pour ton aide. Grâce á toi j'ai pu terminer mon site. Malheureusement il me reste encore un souci.

Sur Safari 3, Firefox 3.6 aucun problème. Par contre sur IE7 et sur crazy browser mes sous-dossiers ne se trouvent plus au-dessus du menu en question mais avec un décalage sur le menu d'à coté.

Tu peux voir le résultat sur mon site www.fineart-photographie.com

Aurais-tu une solution à mon problème ? Merci beaucoup
Modifié par Ludo76 (28 Jun 2011 - 19:09)
Merci beaucoup Iddsoft pour ton aide. Grâce á toi j'ai pu terminer mon site. Malheureusement il me reste encore un souci.

Sur Safari 3, Firefox 3.6 aucun problème. Par contre sur IE7 et sur crazy browser mes sous-dossiers ne se trouvent plus au-dessus du menu en question mais avec un décalage sur le menu d'à coté.



Aurais-tu une solution à mon problème ? Merci beaucoup
Modifié par Ludo76 (28 Jun 2011 - 19:08)
Merci beaucoup Iddsoft pour ton aide. Grâce á toi j'ai pu terminer mon site. Malheureusement il me reste encore un souci.

Sur Safari 3, Firefox 3.6 aucun problème. Par contre sur IE7 et sur crazy browser mes sous-dossiers ne se trouvent plus au-dessus du menu en question mais avec un décalage sur le menu d'à coté.


Aurais-tu une solution à mon problème ? Merci beaucoup
Modifié par Ludo76 (28 Jun 2011 - 19:08)
Bonjour,
Désolé, mais ne disposant pas de ces navigateurs, il m'est impossible de t'aider.
Ce n'est pas grave et merci encore pour ton aide Smiley biggrin .

Est-ce que quelqu'un d'autre aurait un conseil ? Merci Smiley cligne
bonsoir,

La façon de faire serait de mettre les <li> de premier niveau en positionement relatif pour qu'elles servent de positionement de reference au <ul> enfant:

#menuDeroulant li {
	float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
position:relative;
}


Ensuite positionné en absolu les <ul> a partir de bottom en les remontant d'un interligne et demi environ et les caler avec left , eventuellement fixer sa largeur:

#menuDeroulant .sousMenu {
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute;
bottom:1.6em; 
left:0;
width:150px; /* ou 100%*/
}

En s'y prenant ainsi, il ne devrait pas y avoir de différence majeure d'un navigateur a l'autre. Peut-être un besoin de z-index.

GC
Modifié par gc-nomade (05 Jun 2011 - 00:01)
Sujet clos
Aller à