créer un clic sur une liste déroulante

Je voudrais savoir comment créer un menu déroulant. Je veux cliquer sur drop, puis le menu apparaît. Je peux obtenir le rollover qui est facile, mais comment puis-je cliquer pour le faire apparaître à la place, puis disparaître lorsque je clique à l'extérieur. un peu comme l'option de flux de nouvelles facebook. voici mon codecréer un clic sur une liste déroulante

<head> 
<style type="text/css"> 
#menu{margin:0; padding:0} 
#menu ul{margin:0; padding:0; line-height:20px;}/*dropdown*/ 
#menu li{margin:0; padding:0; list-style:none;float:left; position:relative;} 
#menu ul li a{text-align:center; fot-family:"arial"; text-docoration-none;  height:30px; width:150px; display:block; color:#333fff} 
#menu ul ul{position:absolute;visibility:hidden} 
#menu ul li:hover ul{visibility:visible} 
/*---highlight list has i rollover it--*/ 
#menu ul li:hover ul li:hover {background:#ccc} 
</style> 
</head> 


<div id="wrapper" style="backgroud-color:blue"> 

<div id="menu"> 
<ul > 
<li><a href="#" onclick="return false;">Drop</a> 
<ul> 
<li><a href="#">link 1</a> 
<li><a href="#">link 2</a> 
<li><a href="#">link 3</a> 
</ul><!--end inner ul --> 
</li><!--end main li --> 
</ul><!--end main ul --> 
</div><!--end menu ul --> 
</div> 
<div></div>

Source

2011-07-20 user836910

This link vous montrera comment le faire. Je l'ai essayé moi-même sur mon site internet, et ça marche très bien!

J'espère que cela a aidé! N.S.

Source

2011-07-20 16:53:54

merci les gars, l'air bien – user836910

Vous êtes les bienvenus :) –

EDIT: Mise à jour le jsFiddle ...

Vous aurez besoin du code JavaScript pour l'obtenir. Voir qui jsFiddle: here

Fondamentalement:

Votre HTML

<div id="wrapper" style="backgroud-color:blue"> 

    <div id="menu"> 
    <ul > 
     <li> 
     <a href="#" id="drop-menu" >Drop</a> 
     <ul id="menu1"> 
      <li><a href="#">link 1</a> 
      <li><a href="#">link 2</a> 
      <li><a href="#">link 3</a> 
     </ul><!--end inner ul --> 
     </li><!--end main li --> 
    </ul><!--end main ul --> 
    </div><!--end menu ul --> 
</div>

Votre CSS

#menu{margin:0; padding:0} 
#menu ul{margin:0; padding:0; line-height:20px;}/*dropdown*/ 
#menu li{margin:0; padding:0; list-style:none;float:left; position:relative;} 
#menu ul li a{text-align:center; fot-family:"arial"; text-docoration-none;  height:30px; width:150px; display:block; color:#333fff} 
#menu ul ul{position:absolute;visibility:hidden} 

/*---highlight list has i rollover it--*/ 
#menu ul li:hover ul li:hover {background:#ccc} 

.visible { 
    visibility: visible !important; 
}

Votre JS (avec jQuery)

$(function(){ 
    $('#drop-menu').bind('click', function(){ 
     $('#menu1').toggleClass('visible'); 
    }); 
});

Source

2011-07-20 16:59:20 Tocco

créer un clic sur une liste déroulante

Répondre

Questions connexes