jquery实现导航菜单

最新推荐文章于 2022-10-20 16:45:33 发布

白天里看星星

最新推荐文章于 2022-10-20 16:45:33 发布

阅读量402

点赞数

分类专栏： jquery 文章标签：导航 jquery menu

本文链接：https://blog.csdn.net/u012311282/article/details/51386346

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、html文件jquery-1.12.3.min.js 自己去官方下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-1.12.3.min.js"></script>
    <script src="testjquerys.js"></script>
    <link rel="stylesheet" href="testjquery.css">
    <title>jquerystudy</title>
</head>
<body>
<ul >
    <li class="main"><a href="#"><span class="icon "></span>main page</a></li>
    <li class="main"><a href="#"><span class="icon "></span>photos</a>
        <ul>
            <li><a href="#">university</a></li>
            <li><a href="#">now</a></li>
        </ul>
    </li>
    <li class="main"><a href="#"><span class="icon "></span>gerenjianli</a></li>
</ul>
<p></p>
</body>
</html>

2、 testjquery.css

ul,li{
    list-style: none;
}
ul{
    margin: 0;
    padding: 0;
}
.main{
    background: url("images/ui-bg_highlight-soft_75_ffe45c_1x100.png");
    background-repeat: repeat-x;
    width: 150px;
    float: left;
    margin-right: 1px;//是每个菜单直接隔开一条横线，
}
li{
   background-color: #aaaaaa;
    line-height: 30px;
}
a{
    text-decoration: none;
    display: block;
    width: 95px;
    padding-left: 20px;
    padding-top: 3px;
    padding-bottom: 3px;

}
.main a{
    color: black;
    font-weight: bold;

}
.main li a{
    color: #363636;
    font-weight: bold;
}
.main .icon{
    position: absolute;
    margin-top: 7px;
    margin-left: 90px;
    background: url("images/ui-icons_222222_256x240.png") -63px -16px no-repeat;
    width: 15px;
    height: 15px;
}
.main ul{
    display: none;
}

3、 testjquerys.js

$(document).ready(function(){
    //$(".main a").click(function(){
    //    var uiNode=$(this).next("ul");
    //    //if(uiNode.css("display")=="none"){
    //    //    //uiNode.css("display","block");
    //    //    uiNode.show();
    //    //}else{
    //    //    //uiNode.css("display","none");
    //    //    uiNode.hide();
    //    //}
    //    //uiNode.toggle("slowly");
    //    //uiNode.slideDown();
    //    //uiNode.slideUp();
    //    uiNode.slideToggle();
    //})
    $(".main").hover(function(){
        $(this).children("ul").slideDown();
    },function(){
            $(this).children("ul").slideUp();
        }
    )

});