Salut a tous ,
Je vais vous apprendre a créer un menu déroulant horizontalement
(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
Pour ma part je vais créer un index.html , un index.css et un index.js
Dans index.html :
Index.css :
Et index.js :
Donc maintenant je vais vous expliquez un peu tous .
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
Je vais vous apprendre a créer un menu déroulant horizontalement
(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
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>
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;
}
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);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
