首页 > 代码库 > 下拉菜单的若干种实现方式

下拉菜单的若干种实现方式

2024-10-01 23:39:01   212人阅读

1.javascript方式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/a1.css">
<script src="http://www.mamicode.com/js/jquery.min.js"></script>
<style>
* {
    margin: 0;
    padding: 0;
}

#nav {
    background-color: #eee;
    width: 350px;
    height: 40px;
    margin: 0 auto; /*居中*/
}

#nav ul li {
    list-style: none; /*清除li样式*/
}

#nav ul li {
    float: left;
    /*padding: 0px 10px;*/
    /*解决自适应问题，当li中文字内容过长时，会导致溢出。*/
    line-height: 40px; /*使文字居于中间位置*/
    text-align: center;
    position: relative; /*父级语速定位*/
}

a {
    text-decoration: none;
    color: #000;
    display: block; /*a标签是行内元素，现使其呈现为块级元素，这样鼠标移至上方，整个块的属性都会据hover变化*/
    padding: 0 10px;
    height: 40px;
}

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; /*相对于div的top*/
    display: none;
}

ul li ul li a:hover {
    background-color: #b3d9d9;
}
</style>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="http://www.mamicode.com/#">首页</a></li>
            <li onm ouseover="show(this)" onm ouseout="hide(this)"><a href="http://www.mamicode.com/#">链接1</a>
                <ul>
                    <li><a href="">文本1</a></li>
                    <li><a href="">文本2</a></li>
                </ul></li>
        </ul>
    </div>
</body>
<script>
function show(li){
    var li_ul = li.getElementsByTagName("ul")[0];
    li_ul.style.display = ‘block‘;
}
function hide(li){
    var submeau = li.getElementsByTagName("ul")[0];
    submeau.style.display = ‘none‘;
}
</script>
</html>

2.show()和hide()方式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/a1.css">
<script src="http://www.mamicode.com/js/jquery.min.js"></script>
<style>
* {
    margin: 0;
    padding: 0;
}

#nav {
    background-color: #eee;
    width: 350px;
    height: 40px;
    margin: 0 auto; /*居中*/
}

#nav ul li {
    list-style: none; /*清除li样式*/
}

#nav ul li {
    float: left;
    /*padding: 0px 10px;*/
    /*解决自适应问题，当li中文字内容过长时，会导致溢出。*/
    line-height: 40px; /*使文字居于中间位置*/
    text-align: center;
    position: relative; /*父级语速定位*/
}

a {
    text-decoration: none;
    color: #000;
    display: block; /*a标签是行内元素，现使其呈现为块级元素，这样鼠标移至上方，整个块的属性都会据hover变化*/
    padding: 0 10px;
    height: 40px;
}

a:hover {
    color: #fff;
    background-color: #666;
}

ul li ul li {
    float: none; /*清除样式*/
    background-color: #eee;
}

ul li ul {
    position: absolute;
    left: 0;
    top: 40px; /*相对于div的top*/
    display: none;
}

ul li ul li a:hover {
    background-color: #b3d9d9;
}
</style>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="http://www.mamicode.com/#">首页</a></li>
            <li class="navmenu"><a href="http://www.mamicode.com/#">链接1</a>
                <ul>
                    <li><a href="">文本1</a></li>
                    <li><a href="">文本2</a></li>
                </ul>
            </li>
            <li class="navmenu"><a href="http://www.mamicode.com/#">链接2</a>
                <ul>
                    <li><a href="">文本1</a></li>
                    <li><a href="">文本2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script>
// $(".navmenu").mouseover(function(){
//     $(this).children("ul").show();         //获得孩子元素
// });

$(function(){
    $(".navmenu").mouseover(function(){
        $(this).children("ul").show();         //获得孩子元素
    })
    $(".navmenu").mouseout(function(){
        $(this).children("ul").hide();
    })
})
</script>
</html>

 

下拉菜单的若干种实现方式


联系
我们