jQuery自定义三级菜单

渣娃程序员

已于 2024-04-01 11:46:22 修改

阅读量249

点赞数

文章标签： jquery css javascript

于 2022-01-20 11:43:22 首次发布

本文链接：https://blog.csdn.net/Hellos_Worlds/article/details/122598257

版权

注: 只需引用jquery-1.8.2.min.js脚本即可(版本无规定)

css样式:

body, div, ul, li {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei" ! important;
    font-size: 13px;
}

div, ul, li {
    list-style-type: none;
}

.oneUl {
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    background-color: #f2f2f2;
}

.oneUl li {
    float: left;
    position: relative;
}

/*这一级是导航*/
.oneUl li a {
    display: block;
    line-height: 35px;
    text-decoration: none;
    padding: 0 20px;
    color: #333333;
}

.oneUl li a:hover {
    background: #EFEFEF;
}

.oneUl li ul {
    position: absolute;
    float: left;
    width: 150px;
    border: 1px solid #D2D2D2;
    display: none;
    background-color: #FFFfff;
    z-index: 9999;
}

/*这是第二级菜单*/
.oneUl li ul a {
    width: 110px;
    text-decoration: none;
    color: #333333;
}

.oneUl li ul a:hover {
    background: #f2f2f2;
}

.oneUl li ul ul {
    top: 0;
    left: 150px;
}

body主体内容:

<body style="padding:30px; ">

<ul class="oneUl">
    <li>
        <a href="#">BJ-AUTO</a>
        <ul class="two">
            <li><a href="#" class="more">故障诊断</a>
                <ul class="three">
                    <li><a href="#">菜单一</a></li>
                    <li><a href="#">菜单二</a></li>
                </ul>
            </li>
            <li><a href="#">技术通报</a></li>
            <li><a href="#">技术会议</a></li>
            <li><a href="#">车型资料</a></li>
        </ul>
    </li>
</ul>
</body>

js脚本:

function hoverUl(ulclass) {
    $(document).ready(function () {
        $(ulclass + ' li').hover(function () {
            $(this).children("ul").show(); //mouseover
        }, function () {
            $(this).children("ul").hide(); //mouseout
        });
    });
}

hoverUl('.oneUl');

渣娃程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery自定义三级菜单

注:只需引用jquery-1.8.2.min.js脚本即可(版本无规定)css样式:body, div, ul, li { margin: 0; padding: 0; font-family: "Microsoft YaHei" ! important; font-size: 13px;}div, ul, li { list-style-type: none;}.oneUl { height: 35px; line-heigh.
复制链接

扫一扫