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

jQuery左侧导航分类

来源:http://www.erdangjiade.com/ 沐浴春风 2015-09-03 16:36浏览(1523)

分享一个常用的商城左侧弹出层菜单,你可以自定义菜单选项名称和链接。

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

jQuery左侧导航分类
分类:导航菜单 > 二级菜单 难易:初级
查看演示 下载资源 下载积分: 30 积分

HTML

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

<div class="item"> 
    <div class="product"> 
        <h3><a href="http://www.erdangjiade.com/">名片</a></h3> 
        <s></s> 
    </div> 
    <div class="product-wrap pos02">  
        <div class="cf"> 
            <div class="fl wd252 pr20"> 
                <h2><a href="http://www.erdangjiade.com/">名片</a></h2> 
                <p class="lh30">免费在线设计,印刷低至3.8元/盒,全国包邮。</p> 
                <ul class="cf"> 
                    <li><a href="http://www.erdangjiade.com/" target="_blank">名片设计</a></li> 
                    <li><a href="http://www.erdangjiade.com/" target="_blank">名片印刷</a></li> 
                    <li><a href="http://www.erdangjiade.com/" target="_blank">名片模板</a></li> 
                    <li><a href="http://www.erdangjiade.com/" target="_blank">名片欣赏</a></li> 
                    <li><a href="http://www.erdangjiade.com/" target="_blank">名片常识</a></li> 
                </ul> 
            </div> 
            <dl class="fl wd185 pl20 blee"> 
                <dt class="lh36">促销活动</dt> 
                <dd><a href="http://www.erdangjiade.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(); 
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/474.html
评论0
头像

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

1 2