asp.net BS 按钮下拉效果
0
最佳答案
0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" /> <meta name="description" content="此代码内容为jQuery简洁下拉菜单导航，属于站长常用代码，更多菜单导航代码请访问懒人图库JS代码频道。" /> <title>jQuery简洁下拉菜单导航_懒人图库</title> <link href="css/body.css" rel="stylesheet" media="screen" type="text/css" /> <link href="css/menu.css" rel="stylesheet" media="screen" type="text/css" /> </head> <body> <div id="all"> <h1>jQuery简洁下拉菜单导航</h1> <p>Single-level Drop Down Menu based on jQuery library. See the source.</p> <script src="js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');} function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open); $('#jsddm > li').bind('mouseout', jsddm_timer);}); document.onclick = jsddm_close; </script> </p> <ul id="jsddm"> <li><a href="#">JavaScript</a> <ul> <li><a href="#">Drop Down Menu</a></li> <li><a href="#">jQuery Plugin</a></li> <li><a href="#">Ajax Navigation</a></li> </ul> </li> <li><a href="#">Effect</a> <ul> <li><a href="#">Slide Effect</a></li> <li><a href="#">Fade Effect</a></li> <li><a href="#">Opacity Mode</a></li> <li><a href="#">Drop Shadow</a></li> <li><a href="#">Semitransparent</a></li> </ul> </li> <li><a href="#">Navigation</a> <ul> <li><a href="#">Slide Effect</a></li> <li><a href="#">Fade Effect</a></li> <li><a href="#">Opacity Mode</a></li> <li><a href="#">Drop Shadow</a></li> </ul> </li> <li><a href="#">HTML/CSS</a> <ul> <li><a href="#">Slide Effect</a></li> <li><a href="#">Opacity Mode</a></li> <li><a href="#">Drop Shadow</a></li> </ul> </li> <li><a href="http://www.lanrentuku.com/" target="_blank">Help</a></li> </ul> <div class="clear"> </div> <br> <p> <b>兼容:</b> IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+<br> <b>大小:</b> < 1Kb<br> </div> <div id="copyright"> <p>来源：<a href="http://javascript-array.com/scripts/jquery_simple_drop_down_menu/" target="_blank">Javascript-Array</a> 代码整理：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a> 感谢：<a href="http://www.nifengla.com/" target="_blank">你疯啦</a></p> <p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p> <p></p> <p><p>jQuery简洁下拉菜单导航，西西推荐下载！</p></p> <p></p> </div> </div> </body> </html>
Menu.css
#jsddm { margin: 0; padding: 0} #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial} #jsddm li a { display: block; background: #324143; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap} #jsddm li a:hover { background: #24313C} #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white} #jsddm li ul li { float: none; display: inline} #jsddm li ul li a { width: auto; background: #A9C251; color: #24313C} #jsddm li ul li a:hover { background: #8EA344}
收获园豆：20
min.js你就下个JQ1.4的文件行了，我就不贴了
其他回答(2)
0
css +js
0
重点是css, 定位好就可以了, js只是很单纯的控制 显示和隐藏而已.
外层div :position:relative;
内层div:position:absolute; (不显)
