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
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1vue3项目引入vant报错的错误原因和解决办法03-12
- 2天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 3zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 4天兴工作室2023双11活动:五折优惠券大放送11-05
- 5腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 6新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 7天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 8[已下线] 天兴工作室2023双节活动:五折优惠券09-29
- 951.la统计的js文件被劫持了会跳转违法网站09-27
- 标签聚合
- ×1zblogphp面包屑×1php7.4×1zblog资源主题×1zblog附件×1图片滚动×1评论实名制×1operateWXData×1robots.txt×1zblog调用标签×1搜索优化×1二级域名×1zblogasp备份×1小皮面板×1tab切换×1小视频主题×1表单插件×1旅游模板×1zblogasp转换×1乐视云视频×1轻量服务器
最新评论
-
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求 -
访客
01-16点击分类,能不能下面显示所有分类的名字。 -
天兴工作室
01-13多条件筛选很麻烦,主题不考虑加,有需求可以联系我定制
有 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代码下面就行