提供zblog模板_zblog主题_wordpress模板的下载和定制

zblog下拉导航之:抽屉式下拉导航

天兴工作室 2016-09-09 14:49 教程 5608 4 评论


zblog下拉导航这东西天兴工作室已经写了好多篇文章了,照例还是要吐槽下zblog的导航栏,一直都是那么稳定的烂!

今天来分享一个带特效的下拉导航代码,特效大概是这样的:鼠标放上去,像抽屉一样慢慢展开下拉导航,所以就起名叫“抽屉式下拉导航”。

直接上代码。

html部分:

<div class="nav">
    <ul>
        <li><a href="#">正常的没有下拉</a></li>
        <li><a href="#">测试下拉</a>
            <ul>
                <li><a href="#">测试下拉一</a></li>
                <li><a href="#">测试下拉二</a></li>
                <li><a href="#">测试下拉三</a></li>
            </ul>
        </li>
    </ul>
</div>

jQ部分:

             <script type="text/javascript">
                    $(document).ready(function(){
                        $(".nav li").hover(function(){
                            $(this).find("ul").slideDown("slow");    
                        },function(){
                            $(this).find("ul").slideUp("fast");    
                        });
                    });
                </script>

css部分:

.nav{position: relative;line-height: 40px;height: 40px;}
.nav>ul>li{float:left;}
.nav>ul>li>a{padding:0 20px;}
.nav>ul>li>ul{display: none;position: absolute;overflow: visible;width: 150px;}
.nav>ul>li>ul>li{float: none; width:100%;}
.nav>ul>li>ul>li>a{padding:0 12px;display: block;}

注意部分:

需要引用JQ库,1.4以上版本都可以;

其他css颜色,宽度等等需要自行定义。


另直接附上一个完整的html页面:点击查看


没有找到能解决你问题的教程?

您可以试着搜索一下或者直接在线提问。我们也提供收费技术支持,有需要可以在线联系我们。

在线提问 在线客服

4 位网友评论:

  • 飞鸟博客

    飞鸟博客 7年前 (2016-11-23) 回复

    这段代码我测试的在IE8下没有效果,不知道怎么回事。JQ版本是1.8.3

    • 天兴工作室

      天兴工作室 7年前 (2016-11-23) 回复

      這个跟浏览器关系不大,检查下你class搞对了没有

  • 不要放弃啊啊啊啊啊啊啊

    不要放弃啊啊啊啊啊啊啊 8年前 (2016-10-12) 回复

    js代码放到哪里啊

    • 天兴工作室

      天兴工作室 8年前 (2016-10-12) 回复

      就放到html代码下面就行

欢迎 发表评论: 取消回复

请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合
  • 登 录
  • 注册账号 忘记密码?
  • 注 册
  • 已有账号?直接登录 忘记密码?
  • 社交账号登录