jQuery左侧导航分类

来源:https://www.sucaihuo.com/js/474.html 2015-09-03 16:36浏览(1135) 收藏

分享一个常用的商城左侧弹出层菜单,你可以自定义菜单选项名称和链接。
jQuery左侧导航分类
分类:导航菜单 > 二级菜单 难易:初级
查看演示 下载资源 下载积分: 20 积分

HTML

一级导航和对应的二级导航HTML代码

<div class="item">
    <div class="product">
        <h3><a href="http://www.sucaihuo.com/">名片</a></h3>
        <s></s>
    </div>
    <div class="product-wrap pos02"> 
        <div class="cf">
            <div class="fl wd252 pr20">
                <h2><a href="http://www.sucaihuo.com/">名片</a></h2>
                <p class="lh30">免费在线设计,印刷低至3.8元/盒,全国包邮。</p>
                <ul class="cf">
                    <li><a href="http://www.sucaihuo.com/" target="_blank">名片设计</a></li>
                    <li><a href="http://www.sucaihuo.com/" target="_blank">名片印刷</a></li>
                    <li><a href="http://www.sucaihuo.com/" target="_blank">名片模板</a></li>
                    <li><a href="http://www.sucaihuo.com/" target="_blank">名片欣赏</a></li>
                    <li><a href="http://www.sucaihuo.com/" target="_blank">名片常识</a></li>
                </ul>
            </div>
            <dl class="fl wd185 pl20 blee">
                <dt class="lh36">促销活动</dt>
                <dd><a href="http://www.sucaihuo.com/" target="_blank" title="logo"><img src="images/0931224551.jpg"></a></dd>
            </dl>
        </div>
    </div>
</div>

鼠标悬浮和离开菜单触发事件

$('.all-goods .item').hover(function() {
    $(this).addClass('active').find('s').hide();
    $(this).find('.product-wrap').show();
}, function() {
    $(this).removeClass('active').find('s').show();
    $(this).find('.product-wrap').hide();
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2