天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制 | RSS订阅 | 网站地图 | 联系我们
天兴工作室自用主题2015版上架销售
当前位置:网站首页 教程 正文

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

天兴工作室 2周前 (09-09) 教程 138 ℃ 0 评论
内容加载中......

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页面:点击查看

我要提问 如果你对于此文还有任何疑问欢迎在文章下面的评论区域留言,如果你的疑问比较多,欢迎在本站的在线提问专业去发布问题,点击右侧的我要提问即可到达。天兴工作室将尽我所能为你解答问题。

本文标签下拉导航 抽屉式下拉导航 zblog下拉导航

本文地址http://www.txcstx.cn/post/1014.html

版权说明:如非注明,本站文章均为 天兴工作室 原创,转载请注明出处和附带本文链接。

额!本文竟然没有沙发!你愿意来坐坐吗?

欢迎 发表评论

必填

选填

选填

必填

◎欢迎在这里交流反馈,垃圾评论会秒删的额...

联系我们
最新评论
标签云
手机支付三星I917黑色系列2015新版zblog模板半年包新入网不同IP虚拟主机狂欢节合家欢包年zblogphp广告代码模板下载备案注销侧栏加载方式刘冬夜话畅聊优惠包电信运营商标题SEO非常假期木马简洁企业模板zblog2.0下载海信HS-T30当前分类wiki全球通套餐垃圾流量联通网上商城凤凰传奇积分查询兑换hover神州行长话卡网站酷派8816缓存更新
热门模板