下拉菜单

一、静态页面

demo:http://jellyandjammy.sinaapp.com/menu/

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">课程大厅</a>
                <ul>
                    <li><a href="">JavaScipt</a></li>
                    <li><a href="">JQuery</a></li>
                </ul>
            </li>
            <li><a href="#">学习中心</a>
                <ul>
                    <li><a href="">视频学习</a></li>
                    <li><a href="">实例学习</a></li>
                    <li><a href="">问与答</a></li>
                </ul>
            </li>
            <li><a href="#">经典案例</a></li>
            <li><a href="#">学习中心</a></li>
        </ul>
    </div>
</body>
</html>
index.html
    *{
        margin: 0;
        padding: 0;
    }
    #nav{
        background: #eee;
        width: 600px;
        height: 40px;
        margin: 0 auto;
    }
    ul{
        list-style-type: none;
    }
    ul li{
        float: left;    
        line-height: 40px;
        text-align: center;
        position: relative;
    }
    a{
        height: 40px;
        display:block;
        text-decoration: none;
        color:#000;
        padding: 0 10px; /*不直接设置a的宽度而是设置左右内边距这样就可以使a自适应宽度*/
    }
    a:hover{

        color: #fff;
        background-color: #666;    
    }
    ul li ul li {
        float: none;
        background-color: #eee;
        margin-top: 2px;
    }
    ul li ul{
        position: absolute;   /*以一级菜单绝对定位*/
        left: 0;
        top: 40px;
    }
main.css

 

二、HTMl/CSS方法实现

先把二级菜单隐藏,当鼠标经过一级菜单li时让二级菜单ul显示

ul li ul{
    display: none;  /*先把二级菜单隐藏*/
}
ul li:hover ul{
    display: block;  /*当鼠标经过一级菜单时二级菜单显示*/
}
style.css

 

三、JQuery实现

可以用mouseover，mouseout添加事件，也可以用hover来添加事件;显示和隐藏可以用css改变样式,可以用show(),hide(),可以用toggle()

// 方法一：
$(function(){
    $('#nav ul li').mouseover(function(){
        $(this).children('ul').css("display","block");
    });
    $('#nav ul li').mouseout(function(){
        $(this).children('ul').css("display","none");
    });
});


// 方法二：
$(function(){
    $('#nav ul li').mouseover(function(){
        $(this).children('ul').show();
    });
    $('#nav ul li').mouseout(function(){
        $(this).children('ul').hide();
    });
});


// 方法三：
$(function(){
    $('#nav ul li').hover(
        function(){
            $(this).children('ul').show();
        },
        function(){
            $(this).children('ul').hide();
        })
})

//方法四
$(function(){
    $('#nav ul li').hover(
        function(){
            $(this).children('ul').toggle();
        })
})
jq.js

 

 

 

posted @ 2014-09-23 20:57  jellyANDjammy  阅读(162)  评论(0)  编辑  收藏  举报