1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies. En savoir plus.

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

Discussion dans 'Windows' créé par AdSii, 21 Février 2013.

Statut de la discussion:
N'est pas ouverte pour d'autres réponses.
  1. AdSii

    AdSii Premium ♥ Premium

    Inscrit:
    11 Novembre 2012
    Messages:
    60
    Appréciations:
    20
    Points:
    1 393
    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:
     
    GaaRaa aime ça.


  2. #Eddie

    #Eddie Anciennement appelé Challenges-Lobby Premium

    Inscrit:
    31 Octobre 2012
    Messages:
    8 838
    Appréciations:
    3 755
    Points:
    8 608
    Merci à toi, amis c'est pas compliqué quand on connait les base du html ! ;)
     
  3. GaaRaa

    GaaRaa Membre Premium Premium

    Inscrit:
    15 Novembre 2011
    Messages:
    3 670
    Appréciations:
    897
    Points:
    5 038
    Moi, je dit "utile" ! Dès screenshots serais la bienvenue de même! :p
     
  4. AdSii

    AdSii Premium ♥ Premium

    Inscrit:
    11 Novembre 2012
    Messages:
    60
    Appréciations:
    20
    Points:
    1 393
    Je vais mettre un liens :ok:
     
  5. GaaRaa

    GaaRaa Membre Premium Premium

    Inscrit:
    15 Novembre 2011
    Messages:
    3 670
    Appréciations:
    897
    Points:
    5 038
    Y'a pas de soucis, édite ton topique une fois que tu lès fait! :p
     
  6. GaaRaa

    GaaRaa Membre Premium Premium

    Inscrit:
    15 Novembre 2011
    Messages:
    3 670
    Appréciations:
    897
    Points:
    5 038
    Utilité de ton message ? A rien, je signale.
     
Statut de la discussion:
N'est pas ouverte pour d'autres réponses.

Partager cette page

Publicité