给Zblog设置鼠标放在导航栏分类可以显示子分类下拉菜单

很多独立博客的博主喜欢给博客的分类下设置子分类并且在博客的首页导航栏可以显示下拉菜单显示出子分类,如图:

给Zblog设置鼠标放在导航栏分类可以显示子分类下拉菜单  第1张

zblog博客程序后台目前是没有设置导航下拉菜单这个功能设置的,那么我们怎么来实现呢?其实方法很简单。

首先我们进入zblog博客的后台管理页面,点击左侧的“模块管理”,然后点击编辑右侧模块里的“网站分类”模块,如图(小众博客这里将网站分类改名字为博客分类了,可以无视):

给Zblog设置鼠标放在导航栏分类可以显示子分类下拉菜单  第2张

进入网站分类设置后我们把样式的默认“普通型”改为“URL嵌套型然后点击提交(下面的禁止系统更新模块内容请保持OFF状态)如下图:

给Zblog设置鼠标放在导航栏分类可以显示子分类下拉菜单  第3张

提交后我们再次进到“网站分类”的编辑页面,将正文框里的代码全选复制,如图:

给Zblog设置鼠标放在导航栏分类可以显示子分类下拉菜单  第4张

然后我们编辑导航栏,将刚刚复制的代码粘贴到导航栏设置的正文框内,覆盖之前的导航栏代码,如下图:

给Zblog设置鼠标放在导航栏分类可以显示子分类下拉菜单  第5张

给Zblog设置鼠标放在导航栏分类可以显示子分类下拉菜单  第6张

OK,点击提交,然后我们去首页刷新下看看,zblog的导航栏是不是已经显示子分类的下拉菜单了。但是效果估计会暴丑,因为没有给下拉菜单设置CSS样式,因为每个博客的主题使用不同,小众博客这里仅分享本站使用的样式给博友们做参考。将代码加入CSS中即可。代码如下:

#hamburgermenu li ul li
{clear: left;width:100%;
background-color:#2080B0;
border-right-width:0px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#2080B0;}

本文由小众博客原创分享,转载请注明出处!

版权声明:本站部分文章为网络转载,文章结尾已注明出处,如侵犯您的权益请联系我们删除。

联系我们:turbochao@126.com

腾讯QQ这些年推出的逗比功能