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

jquery通用三级导航菜单

来源:http://www.erdangjiade.com/ 沐浴春风 2015-08-20 21:27浏览(1519)

分享一个常用的三级导航分类,鼠标悬浮在各个导航按钮试试吧。

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

jquery通用三级导航菜单
分类:导航菜单 > 多级菜单 难易:中级
查看演示

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

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

HTML

<ul class="menu ul">
    <li><h3 class="selected"><a href="http://www.erdangjiade.com" class="depth_1">网站首页</a></h3></li>
    <li><h3><a href="http://www.erdangjiade.com/templates" class="depth_1">我的素材火</a></h3></li>
    <li>
        <h3 id="menu_01"><a href="http://www.erdangjiade.com" class="depth_1">设计素材</a></h3>
        <ul id="children_01" class="children">
            <li>
                <h3 id="menu_02c"><a href="http://www.erdangjiade.com" class="depth_2"><span class="icon10"></span>PSD分层</a></h3>
                <ul id="children_02c">
                    <li><a href="http://www.erdangjiade.com" class="depth_3">其他</a></li>
                </ul>
            </li>
        </ul>			
    </li>
    <li><h3><a href="http://www.erdangjiade.com" class="depth_1">原创作品</a></h3></li>
    <li><h3><a href="http://www.erdangjiade.com/js" class="depth_1">网页特效</a></h3></li>
    <li><h3><a href="http://www.erdangjiade.com/topic" class="depth_1">设计趋势</a></h3></li>
</ul>

jQuery

$(function() {
    var navstr = '';
    for (c in vars = '0'.split(',')) {
        $('#menu_' + vars[c]).addClass('selected');
    }
    $('#wrap-nav ul.menu > li').hover(function() {
        $(this).find('.children').show();
        if ($(this).find('.children').length) $(this).addClass('hover');
    },
    function() {
        $('.children').hide();
        $(this).removeClass('hover');
    });
    $('#wrap-nav ul.menu h3, #wrap-nav ul.menu ul.children > li, #wrap-cats h3').hover(function() {
        $(this).addClass('hover');
    },
    function() {
        $(this).removeClass('hover');
    });
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/407.html
评论0
头像

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

1 2