最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

jQuery平滑移动下拉导航菜单

来源:http://www.erdangjiade.com/ 二当家的 2015-08-20 13:31浏览(1478)

分享一款感觉很舒服的二级下拉菜单平滑效果,你可以很方便的应用在你的企业站导航菜单中。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery平滑移动下拉导航菜单
分类:导航菜单 > 下拉导航 难易:初级
查看演示 下载资源: 108

关注微信号获取此Demo视频教程:

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

HTML

在#topnanv加入一级导航菜单和二级下拉菜单切换内容#seledbox

jQuery

topnv.js定义.posbox标签 上的selec属性对应二级菜单json,并附带mouseover和mouseleave触发事件

$(function() {
    var $anvlfteb = $('#anvlfteb'),
            $posbox = $anvlfteb.find('div.posbox'),
            $seledbox = $("#seledbox"),
            anvjson = {
                bbs: '<a href="http://www.erdangjiade.com/js"><img src="img/ico7.gif">抚州快讯</a>' +
                        '<a href="http://www.erdangjiade.com/js"><img src="img/ico17.gif">国内新闻</a>' +
                        '<a href="http://www.erdangjiade.com/js"><img src="img/ico3.gif">军事快讯</a>',
                news: '<a href="http://www.erdangjiade.com/js"><img src="img/ico7.gif">抚州快讯</a>' +
                        '<a href="http://www.erdangjiade.com/js"><img src="img/ico4.gif">抚州教育</a>',
                post: '<a href="http://www.erdangjiade.com/js"><img src="img/ico7.gif">抚州快讯</a>' +
                        '<a href="http://www.erdangjiade.com/js"><img src="img/ico4.gif">抚州教育</a>' +
                        '<a href="http://www.erdangjiade.com/js"><img src="img/ico17.gif">国内新闻</a>' +
                        '<a href="http://www.erdangjiade.com/js"><img src="img/ico3.gif">军事快讯</a>',
            };


    $posbox.mouseover(function() {
        var i = $(this).index();
        $(this).addClass("anvh").siblings().removeClass("anvh");
        var selec = $(this).attr("selec");
        if ($seledbox.is(":hidden")) {
            $seledbox.show().css("left", 64 * i + 1).html("<div>" + anvjson[selec] + "</div>")
        } else {
            $seledbox.stop().animate({left: 64 * i + 1}, 200, function() {
                $("#seledbox").html("<div>" + anvjson[selec] + "</div>")
            })
        }
    });
    $anvlfteb.mouseleave(function() {
        $seledbox.hide();
        $posbox.removeClass("anvh");
    })
})
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/429.html
评论0
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2