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天兴工作室多语言翻译插件 自动翻译多达12种语言 适合外贸站点06-23
- 2有道云翻译获取appid和seckey的详细步骤和截图06-22
- 3支付宝支付后异步通知页面提示”支付签名校验失败,请联系管理员!“的原因和解决方法05-08
- 4阿里云oss配置项获取步骤截图,包含ID和Secret、区域节点Endpoint、存储空间Bucket和资源访问域名04-14
- 5zblog登录后台一直提示验证码错误的原因和解决方法03-01
- 6zblog使用api提交post数据提示419错误的原因和解决方法02-23
- 7天兴工作室2025年春节放假公告01-25
- 8天兴用户中心插件“微信通知”功能设置教程11-09
- 9阿里云2024双11活动推荐 通过本站链接参与另外赠送本站代金券11-05
- 标签聚合
- ×1网络公关×1购买zblog主题×1宝塔301×1wiki模板×1zblog插件升级×1465端口×1天兴小程序×1未知错误×1顶踩×1指定分类×1二级目录×1标题修改×1评论设置×1绝对地址×1开发票×1css占位图×1图片加alt×1标题格式×1当前栏目×1上传视频
最新评论
-
天兴工作室
并没有任何限制 -
访客
请问 zblog淘客主题 对使用者的要求是必须是企业吧? -
阿浩
大佬们,丢几个除了作者以外的演示站,我想看看大家的布局设置 -
有趣生活
一直想开发zblog的功能,zblog的敷在不知道够够不够 -
访客
发布文章时候,那怎么改默认状态呢比如改成默认审核状态?
有 4 位网友评论:
飞鸟博客 9年前 (2016-11-23) 回复
这段代码我测试的在IE8下没有效果,不知道怎么回事。JQ版本是1.8.3
天兴工作室 9年前 (2016-11-23) 回复
這个跟浏览器关系不大,检查下你class搞对了没有
不要放弃啊啊啊啊啊啊啊 9年前 (2016-10-12) 回复
js代码放到哪里啊
天兴工作室 9年前 (2016-10-12) 回复
就放到html代码下面就行