最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery左侧四级菜单导航

来源:http://www.erdangjiade.com/ 沐浴春风 2015-08-20 13:52浏览(1571)

分享一款常用的多级左侧菜单导航,鼠标悬浮菜单上,会显示弹出层子级菜单,鼠标离开菜单,子级菜单则消失。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery左侧四级菜单导航
分类:导航菜单 > 多级菜单 难易:中级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

HTML

在.sidebar_con放置dl 菜单,一级菜单标题dt,二级标题dd h3,三级和四级菜单.sidebar_popup

<div class="sidebar_con">
    <dl class="sidebar_item">
        <dt><i class="sidebar_item_icon01"></i><span>机器设备</span></dt>
        <dd>
            <h3><a href="http://www.erdangjiade.com/js">通用机械设备</a></h3>
        <s></s>
        <div class="sidebar_popup dis1" style="display:none;">
            <div class="sidebar_popup_class clearfix">
                <div class="sidebar_popup_item"> <strong><a href="http://www.erdangjiade.com/js">泵与阀门</a></strong>
                    <p><span class="linesbg"><a href="http://www.erdangjiade.com/js">真空泵</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">离心泵</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">计量泵</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">水泵</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">油泵</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">阀门</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">球阀</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">安全阀</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">电磁阀</a></span><span class="more"><a href="http://www.erdangjiade.com/js">更多</a></span></p>
                </div>
                <div class="sidebar_popup_item"> <strong><a href="http://www.erdangjiade.com/js">机床</a></strong>
                    <p><span class="linesbg"><a href="http://www.erdangjiade.com/js">数控机床</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">金属切削机床</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">车床</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">磨床</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">锻压机床</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">特种加工机床</a></span><span class="linesbg"><a href="http://www.erdangjiade.com/js">机床附件</a></span></p>
                </div>
            </div>
            <div class="sidebar_popup_all"><a href="http://www.erdangjiade.com/js"><span class="linesbg">查看全部通用机械设备</span></a></div>
        </div>
        </dd> 
    </dl>
</div>

jQuery

$(".sidebar").hoverDelay(function() {
    $("#sidebar_box").show();
    $(".sidebar_top s").addClass("s_down");
}, function() {
    $("#sidebar_box").hide();
    $(".sidebar_top s").removeClass("s_down");
});

$(".sidebar_item dd").hoverDelay(function() {
    $(this).find("h3").addClass("sidebar_focus");
    $(this).find(".sidebar_popup").show(0);
}, function() {
    $(this).find("h3").removeClass("sidebar_focus");
    $(this).find(".sidebar_popup").hide(0);
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/424.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2