クリックドロップダウンボックスを作成

クリックドロップダウンメニューを作成する方法を知りたいと思います。私はドロップをクリックしたいとメニューが表示されます。私は簡単なロールオーバを得ることができますが、代わりにそれを表示させるためにはクリックして、次に外側をクリックすると消えます。 facebook news feedオプションのようなもの。ここに私のコードはクリックドロップダウンボックスを作成

<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>

出典

2011-07-20 user836910

This linkあなたがそれを行う方法を示します。私は自分のウェブサイトでそれを試してみましたが、うまくいきます！

これが役に立った！ N.S.

出典

2011-07-20 16:53:54

おかげで、よく見えます – user836910

あなたは大歓迎です:) –

EDIT：更新jsFiddle ...

あなたはそれを得るために、いくつかのJavaScriptコードが必要になります。はを参照してください。そのjsfiddle：基本的にhere

：

あなたの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> </li> </ul> </div> </div>

あなたのCSS（jQueryを使って）

#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; }

あなたのJS

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

出典

2011-07-20 16:59:20 Tocco

クリックドロップダウンボックスを作成

答えて

関連する問題