下拉菜单这个东西很多朋友都觉的自己应该需要(这是句玩笑话...),本文呢就简单的讲下zblog是如何实现下拉导航菜单的。
说明下,此教程仅限于zblogphp程序,zblogasp择日再讲。
首先上代码,css部分是这样的:
#nav{font-size:14px;font-weight:700;background-color: #333333;width: 970px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;border-radius: 4px;padding-right: 5px;padding-left: 5px;position:relative; z-index:1} #nav ul{height: 40px;line-height: 40px;overflow: hidden;} #nav ul li{float:left;border-right-width: 1px;border-right-style: solid;border-right-color: #222;width: 100px;} #nav ul li a{display:block;text-align:center;color:#FFF;line-height: 40px;} #nav ul li a:hover,#nav ul li a.on{color:#fff;background-color:#d31f07;} #nav li ul{line-height: 35px;list-style-type: none;left: -999em;position: absolute;width: 100px;padding-top: 0px;overflow: visible;} #nav li ul li{float: left;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 1px;border-left-width: 0px;background-color: #333333;border-bottom-style: solid;border-bottom-color: #111111;} #nav li ul li a{display: block;text-align:center;width: 100px;padding: 0px;background-image: none;line-height: 40px;height: 40px;font-weight: normal;} #nav li ul a:hover{color:#ffffff;text-decoration:none;font-weight:normal;background-color: #d31f07;} #nav li:hover ul{left: auto;} #nav li.sfhover ul{left: auto;}
html部分是这样的:
<div id="nav"><ul><li><a href="{$host}">首页</a></li>{module:catalog} </ul></div>
纯css实现的,所以任性的不需要js部分了,但是要详细说明下,上面的html代码中的“{module:catalog}”调用出来的是网站分类,当某个分类下有子分类(二级分类)时自动出现下拉导航,很方便。
可是这样做有个缺陷,就是网站的单页面如留言本、关于我们啊这些就不能出现在导航栏上面了,因为调用的是网站分类而不是导航栏,所以对这个有需求的同学可以把html代码部分改成这样:
<div id="nav"><ul><li><a href="{$host}">首页</a></li>{module:navbar}</ul></div>
然后去网站后台--模块管理--导航栏自行设置下拉导航,基本样式是这样的:
<li><a href="#">一级导航</a><ul><li><a href="#">二级导航1</a></li><li><a href="#">二级导航2</a></li></ul></li>
好啦,任性的结束本文,如有疑问请在下方评论页面留言咨询,如果你是壕,请直接联系我的在线QQ:1109856918付费指导或者代劳...
本文标签:#下拉导航#zblog下拉导航
相关推荐
- 一个纯html+css的下拉导航动画效果01-24
- zblog下拉导航所需代码最简单的写法!12-25
- zblog下拉导航之:抽屉式下拉导航09-09
- zblog模板实现下拉导航功能所需的代码示范10-17
- 转载:导航下拉菜单被底下的幻灯片遮住的解决办法12-04
- 下拉导航菜单被遮住了怎么办?12-13
- 工作记录 做复杂的下拉导航08-17
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 2天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 3vue3项目引入vant报错的错误原因和解决办法03-12
- 4天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 5zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 6天兴工作室2023双11活动:五折优惠券大放送11-05
- 7腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 8新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 9天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 标签聚合
- ×1电脑端主题×1zblogasp1.8×2zblog安装教程×1文章标题×1wdcp面板×8cms模板×1日记×1mp-html×1投稿×7zblog视频教程×1二级目录×3zblog手机模板×1zblog大气企业模板×1.zba×1手机端主题×4免费主题×2nginx×1Swiper配置×1缩略图调用×1zblog商城主题
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求
有 3 位网友评论:
小六 8年前 (2016-03-29) 回复
请问css这个部分怎么改?
zrdiy电子学习网 9年前 (2015-03-06) 回复
我的是蓝色简洁那个主题是把上面那段css代码添加进css文件,,然后把header.php,,最后一行代码替换成上面的html代码吗,,我替换成上面第一段代码,导航栏直接把子分类排在父分类后面排成一行,换成第二段代码也不能下拉,,只有一级导航的那段css代码是添加还是替换,,
天兴工作室 9年前 (2015-03-06) 回复
要替换掉原来的导航栏css,而且要修改下来对应你的页面,这个css代码不是万能的,必须要做修改