HTML/CSS/JS Créer un menu déroulant Horizontal

Statut
N'est pas ouverte pour d'autres réponses.

AdSii

Premium ♥
Premium
Inscription
11 Novembre 2012
Messages
68
Réactions
20
Points
1 393
RGCoins
25
Salut a tous ,
Je vais vous apprendre a créer un menu déroulant horizontalement :O (Voir se qu'ont veux faire : )
Donc je vais directement vous donnez le code et vous expliquez juste après les détails du code :tchuss:
Pour ma part je vais créer un index.html , un index.css et un index.js
Dans index.html :
Code:
<html>
<head>
	<meta charset="utf-8" />
		<title>Menu Deroulant H</title>
	<link rel="stylesheet" href="http://adsiimodz.p.ht/Tuto%20RGFR/index.css" />
</head>
<body>
<ul id="menu">
						<li><a href="#" >Menu1</a></li>
						<li><a href="#" >Menu2</a>
						<ul><a href="#" >Sous-Menu1</a></ul></li>
						<li><a href="#" >Menu3</a>
						<ul><a href="#" >Sous-Menu1</ul></li>
</ul>
<script type="text/javascript" src="http://adsiimodz.p.ht/Tuto%20RGFR/index.js"></script>
</body>
</html>
Index.css :
Code:
#menu, #menu ul 
{
		padding : 0;
		margin : 0;
		list-style : none;
		line-height : 21px;
		text-align : center;
}
 
#menu
{
		font-weight : bold;
		font-family : Arial;
		font-size : 12px;
}
 
#menu a
{
		display : block;
		padding : 0;
		background : #0000ff; 
		color : #fff;
		text-decoration : none;
		width : 144px;
}
 
#menu li 
{
		float : left;
		border-right : 1px solid #fff;
}
html>body #menu li
{
		border-right: 1px solid transparent ;
}
 
#menu li ul
{
		position: absolute;
		width: 144px;
		left: -999em;
}
 
 
#menu li ul li
{
		border-top : 1px solid #fff;
}
html>body #menu li ul li			   
{
		border-top : 1px solid transparent;
}
 
#menu li ul ul
{
		margin	: -22px 0 0 144px ;
		border-left	: 1px solid #fff ; 
}
html>body #menu li ul ul			   
{
		border-left	: 1px solid transparent ;
}
#menu li:hover ul ul, #menu li.sfhover ul ul
{
		left: -999em;
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul 
{
		left: auto;
		min-height: 0;
}
#menu a:hover 
{
		color: #ff0000;
		background: #ff00;
}
Et index.js :
Code:
 sfHover = function() {
		var sfEls = document.getElementById("menu").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);
Donc maintenant je vais vous expliquez un peu tous :tchuss:.

Commencez avec le dossiez html :

Nous avons <ul> avec l'id menu qui nous servira pour le css et js.
Pour faire un Menu1 il nous suffit juste de mettre :
<li><a href="#" >Menu1</a></li> ,
Mais pour faire Menu2 et Sous-Menu1 il nous faut :
<li><a href="#" >Menu2</a>
<ul><a href="#" >Sous-Menu1</a></ul></li>

Le Dossiez css :
Je ne détaille pas tous , vous devez donc connaître un minimum de css
Premièrement , ont parle de ul qui a pour id menu , ( #menu, #menu ul )
Puis nous parlons du menu , ( #menu )
Nous parlons du menu avec le liens ( a ) , ( #menu a )
Nous parlons des li du menu , ( #menu li )
Nous parlons des ul et des li du menu , ( #menu li ul )
Et ont finit par quand la souris survole le liens avec :hover

Le Dossiez js :

Ont ajoute une function , sfHover = function() {
Ont dit que sfEls parle de l'id menu et de tous les li , var sfEls = document.getElementById("menu").getElementsByTagName("LI");
Ont ajoute la boucle for ,
Ont mes la condition if.

Voila j’espère que se tuto vous aura aidé , Si vous avez des questions envoyez les moi par MP :neo:
 
Merci à toi, amis c'est pas compliqué quand on connait les base du html ! ;)
 
Moi, je dit "utile" ! Dès screenshots serais la bienvenue de même! :p
 
Statut
N'est pas ouverte pour d'autres réponses.
Retour
Haut