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天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 2vue3项目引入vant报错的错误原因和解决办法03-12
- 3天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 4zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 5天兴工作室2023双11活动:五折优惠券大放送11-05
- 6腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 7新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 8天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 9[已下线] 天兴工作室2023双节活动:五折优惠券09-29
- 标签聚合
- ×1侧栏调用×1emlog模板安装×1emlog自媒体模板×1网站公告×1zblog百度小程序×1zblog企业×1浏览器兼容×1zblogasp自适应模板×1伪静态配置×1单页面×1embed宽高×1精简布局×1付费主题×1zblog添加分享按钮×1zblog新闻模板×1国庆前×1老家×1zblog问答主题×1文章总数×1zblog备份
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求
有 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代码下面就行