18042 sujets

Questions générales et questions de débutants

Menu déroulant horizontal Alsacréations

Bonjour à tous,

Je voudrais mettre un menu deroulant horizontal sur un site. J'ai recopié celui donné sur le site alsacreations et j'aimerais le personnaliser un peu mais j'ai quelques problemes pour le faire:

comment empecher le menu d'aller à la ligne si je retrecis la fenetre en largeur ? overflow ? (si vous avez un bon tuto sur la gestion de l'overflow je suis prenneur j'ai du mal à comprendre)

la largeur des (sur)menu est bonne mais je ne sais pas comment regler celle des sous-menu qui est trop petite et qui fait donc aller mon texte à la ligne (ce que je ne veux pas).

Si je modifie la largeur dans #menu dd ou #menu li ca pousse le (sur)menu suivant.

Une idée ? (je recopie le code de l'example alsacreations pour pas vous ennuyer à chercher)


CSS:
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

a {text-decoration: none;
color: black;
color: #222;
}


HTML:
<body>

<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>

					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
					<li><a href="#">Sous-Menu 2.4</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">

				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>
					<li><a href="#">Sous-Menu 3.5</a></li>

				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>

					<li><a href="#">Sous-Menu 4.2</a></li>
					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	
</div>


<div id="site">

	<h1>Menu horizontal déroulant en CSS</h1>
	<p>Testé sous (tested under) Internet Explorer, Netscape, Mozilla, Opera et Firebird</p>
  <p>Il vous suffit d'adapter le code source de cette page &agrave; vos besoins. </p>
<p>Raphaël GOETTER<br />
  <a href="http://www.alsacreations.com">Alsacréations</a><br />
  <a href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Explications / Explanations</a></p>

</div>

</body>


Merci d'avance
Modifié par Raphael (07 Jun 2006 - 19:51)
J'ai passer quelques heures a décortiquer le programme et j'y ai apporter des commentaires, cela pourra peut etre te servir.
Je l'ai aussi allégé qu passage.


<head>

<title>menu deroulant horizontal</title>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

</head>

<body>

<PARTIE JAVASCRIPT QUI GERE L'AFFICHAGE ET LE MASQUAGE DES SOUS-MENUS>

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

<PARTIE CSS QUI GERE LA MISE EN FORME (couleur, positions....)>

<style type="text/css">
<!--
body {
margin: 0; Modifie la zone dans laquelle se trouvent les menus
padding: 0; Modifie la zone dans laquelle se trouvent les menus
background: white; Couleur de l'arrière plan
font: 80% verdana, arial, sans-serif; Taille et police des menus mais pas des sous-menus
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0; Position des menus sur la page
left: 0;
z-index:100;
width: 100%;
}
#menu dl { MISE EN FORME DES CADRES ET DES MENUS PRINCIPAUX
float: left; Alignement
width: 12em; Longueur des cases
margin: 0 1px; Modifie l'ecart entre les menus
}
#menu dt { MISE EN FORME DES TITRES DES MENUS
cursor: pointer;
text-align: center; Alignement/
font-weight: bold; Bold = gras
background: #ccc; couleur du fond
border: 1px solid gray; Encadrer et épaisseur
}
#menu dd { ENCADREMENT DES SOUS-MENUS
border: 1px solid gray;

}
#menu li { MISE EN FORME DES SOUS-MENUS
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000; Couleur texte des sous menus
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover { Couleur de survol des listes des menus déroulants
background: #eee;
}

</style>

PARTIE QUI DEFINIE LA STRUCTURE DES MENUS DEROULANT
Remarque : cette partie permet de créer deux menus déroulants avec trois trois menus.
Le nombre de menus peut être augmenté ou diminué, ainsi que le nombre de sous-menus

<body>
<div id="menu">

MENU 1
<dl>

<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>

<li><a href="#">Sous-Menu 1.1</a></li>
A la place du "#" noté le chemin du liens, pour ajouter une cible notez : après ">" target="nom de la cible"
exemple : <li><a href="\page1.htm"> target=cadre_haut Sous-Menu 1.1</a></li>

<li><a href="#">Sous-Menu 1.2</a></li>

<li><a href="#">Sous-Menu 1.3</a></li>

</ul>

</dd>

</dl>

MENU 2
<dl>

<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>

<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>

<li><a href="#">Sous-Menu 2.1</a></li>

<li><a href="#">Sous-Menu 2.2</a></li>

<li><a href="#">Sous-Menu 2.3</a></li>

</ul>

</dd>

</dl>
</div>
<br>
</body>
</html>
@Jojo34

Bonjour Jojo34 et bienvenue parmi nous.

Merci d'éditer ton message pour présenter lisiblement ton code comme demander dans l'aide Smiley cligne .
Sujet clos
Aller à