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页面:点击查看。
相关推荐
- 一个纯html+css的下拉导航动画效果01-24
- zblog下拉导航所需代码最简单的写法!12-25
- zblog模板实现下拉导航功能所需的代码示范10-17
- zblog如何做下拉导航?zblogphp下拉导航菜单制作方法03-04
- 转载:导航下拉菜单被底下的幻灯片遮住的解决办法12-04
- 下拉导航菜单被遮住了怎么办?12-13
- 工作记录 做复杂的下拉导航08-17
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室2025年春节放假公告01-25
- 2天兴用户中心插件“微信通知”功能设置教程11-09
- 3阿里云2024双11活动推荐 通过本站链接参与另外赠送本站代金券11-05
- 4天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 5天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 6vue3项目引入vant报错的错误原因和解决办法03-12
- 7天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 8zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 9天兴工作室2023双11活动:五折优惠券大放送11-05
- 标签聚合
- ×2404×2xml解析错误×1单篇文章调用×1ie浏览器测试工具×3zblog会员插件×1ReWrite规则×1zblogcsm模板×1订单过期×2zblog笑话模板×1zblogphp企业主题×1天兴工作室自用主题×1暗色系主题×1在线订单×1wordpress网站×1案列×1amh301×1zblogasp转换zblogphp×1iis×1文字围绕图片×1specified
最新评论
-
天兴工作室
并没有任何限制 -
访客
请问 zblog淘客主题 对使用者的要求是必须是企业吧? -
阿浩
大佬们,丢几个除了作者以外的演示站,我想看看大家的布局设置 -
有趣生活
一直想开发zblog的功能,zblog的敷在不知道够够不够 -
访客
发布文章时候,那怎么改默认状态呢比如改成默认审核状态?
有 4 位网友评论:
飞鸟博客 8年前 (2016-11-23) 回复
这段代码我测试的在IE8下没有效果,不知道怎么回事。JQ版本是1.8.3
天兴工作室 8年前 (2016-11-23) 回复
這个跟浏览器关系不大,检查下你class搞对了没有
不要放弃啊啊啊啊啊啊啊 8年前 (2016-10-12) 回复
js代码放到哪里啊
天兴工作室 8年前 (2016-10-12) 回复
就放到html代码下面就行