分享一款常用的多级左侧菜单导航,鼠标悬浮菜单上,会显示弹出层子级菜单,鼠标离开菜单,子级菜单则消失。
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.sucaihuo.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.sucaihuo.com/js">泵与阀门</a></strong>
<p><span class="linesbg"><a href="http://www.sucaihuo.com/js">真空泵</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">离心泵</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">计量泵</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">水泵</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">油泵</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">阀门</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">球阀</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">安全阀</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">电磁阀</a></span><span class="more"><a href="http://www.sucaihuo.com/js">更多</a></span></p>
</div>
<div class="sidebar_popup_item"> <strong><a href="http://www.sucaihuo.com/js">机床</a></strong>
<p><span class="linesbg"><a href="http://www.sucaihuo.com/js">数控机床</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">金属切削机床</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">车床</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">磨床</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">锻压机床</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">特种加工机床</a></span><span class="linesbg"><a href="http://www.sucaihuo.com/js">机床附件</a></span></p>
</div>
</div>
<div class="sidebar_popup_all"><a href="http://www.sucaihuo.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);
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791