首页 新闻 搜索 专区 学院

asp.net BS 按钮下拉效果

0
悬赏园豆:20 [已解决问题] 解决于 2012-08-22 20:12

上面附件是从126邮箱里面直接截图出来的.

现在想做出这个效果,望高手指点下。

dinoy的主页 dinoy | 初学一级 | 园豆:160
提问于:2012-07-12 15:48
< >
分享
最佳答案
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> &lt; 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
happydaily | 菜鸟二级 |园豆:410 | 2012-07-12 16:30

min.js你就下个JQ1.4的文件行了,我就不贴了

happydaily | 园豆:410 (菜鸟二级) | 2012-07-12 16:31
其他回答(2)
0

css +js

Qlin | 园豆:2403 (老鸟四级) | 2012-07-12 16:49
0

重点是css, 定位好就可以了,  js只是很单纯的控制 显示和隐藏而已.

 

外层div :position:relative;

内层div:position:absolute; (不显)

阿K&LiveCai | 园豆:514 (小虾三级) | 2012-07-12 17:50
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册