注册 登录 天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制

教程

分享一些有关于zblog的教程,这里有zblog初级教程、zblog中级教程和zblog进阶版教程,如果对你有所帮助,深感荣幸

当前位置:网站首页 教程 正文

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

天兴工作室管理 2016-09-09 教程 686 ℃ 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页面:点击查看

赞 (2)

已有 4 位小伙伴发表了看法

飞鸟博客

回应ta飞鸟博客 (游客)

评论于 2016-11-23 21:23:14

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

回应ta天兴工作室管理 (管理员)

评论于 2016-11-23 23:20:02

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

回应ta不要放弃啊啊啊啊啊啊啊 (普通用户)

评论于 2016-10-12 13:41:21

js代码放到哪里啊
天兴工作室管理

回应ta天兴工作室管理 (管理员)

评论于 2016-10-12 14:40:20

就放到html代码下面就行

欢迎 发表评论

服务项目

快速入口

常见问题

天兴工作室 | www.txcstx.cn

天兴工作室介绍天兴工作室承接:网站建设、zblog模板和dedecms模板定制、仿站(像素级仿站)、html单页面定制和修改、网站模板修改等服务;我们的办事准则:要么不答应、答应则一定做到

  • 交流群:ZBLOG交流群
  • 客户群:天兴工作室客户群
在线QQ 评论文章