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

jquery导航菜单二级下拉菜单slide滑动渐隐显示

来源:http://www.erdangjiade.com/js/1120.html 沐浴春风 2017-02-08 17:51浏览(873)

jquery导航菜单二级下拉菜单slide滑动渐隐显示实现源码

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

jquery导航菜单二级下拉菜单slide滑动渐隐显示
分类:导航菜单 > 下拉导航 难易:
查看演示 下载资源 下载积分: 10 积分
<script type="text/javascript"
function dropMenu(obj){ 
    $(obj).each(function(){ 
        var theSpan = $(this); 
        var theMenu = theSpan.find(".submenu"); 
        var tarHeight = theMenu.height(); 
        theMenu.css({height:0,opacity:0}); 
        theSpan.hover( 
            function(){ 
                $(this).addClass("selected"); 
                theMenu.stop().show().animate({height:tarHeight,opacity:1},400); 
            }
            function(){ 
                $(this).removeClass("selected"); 
                theMenu.stop().animate({height:0,opacity:0},400,function(){ 
                    $(this).css({display:"none"}); 
                }); 
            } 
        ); 
    }); 
} 
 
$(document).ready(function(){ 
     
    dropMenu(".drop-menu-effect"); 
 
}); 
</script>
<div class="navbox"> 
    <div class="nav"> 
        <ul class="clearfix"> 
            <li><a class="selected" target="_blank" href="http://www.erdangjiade.com/"><span>网站首页</span></a></li> 
            <li class="drop-menu-effect"> 
                <a target="_blank" href="http://www.erdangjiade.com/"><span>jquery代码</span></a> 
                <ul class="submenu"> 
                    <li><a href="http://www.erdangjiade.com/">jquery图片特效</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery导航菜单</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery选项卡特效</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery文字特效</a></li> 
                </ul> 
            </li> 
            <li class="drop-menu-effect"> 
                <a target="_blank" href="http://www.erdangjiade.com/"><span>jquery图片特效</span></a>     
                <ul class="submenu"> 
                    <li><a href="http://www.erdangjiade.com/">jquery图片切换</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery幻灯片</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery图片滚动</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery图片放大镜</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery广告</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery更多特效</a></li> 
                </ul> 
            </li> 
            <li class="drop-menu-effect"> 
                <a target="_blank" href="http://www.erdangjiade.com/"><span>jquery导航菜单</span></a>     
                <ul class="submenu"> 
                    <li><a href="http://www.erdangjiade.com/">jquery动画菜单</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery树形菜单</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery下拉菜单</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery右键菜单</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery更多特效</a></li> 
                </ul> 
            </li> 
            <li class="drop-menu-effect"> 
                <a target="_blank" href="http://www.erdangjiade.com/"><span>jquery选项卡特效</span></a> 
                <ul class="submenu"> 
                    <li><a href="http://www.erdangjiade.com/">jquery选项卡切换</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery滑动选项卡</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery更多特效</a></li> 
                </ul> 
            </li> 
            <li class="drop-menu-effect"> 
                <a target="_blank" href="http://www.erdangjiade.com/"><span>jquery文字特效</span></a>     
                <ul class="submenu"> 
                    <li><a href="http://www.erdangjiade.com/">jquery文字滚动</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery文字闪烁</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery文字切换</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery文字数量</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery文字改变</a></li> 
                    <li><a href="http://www.erdangjiade.com/">jquery更多特效</a></li> 
                </ul> 
            </li> 
        </ul> 
    </div> 
</div>
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/1120.html
评论0
头像

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

1 2