手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

Discuz!X3.2(二级导航)导航下拉菜单样式修改

时间:2024-10-13 20:54:36

1、首先我们先来确定一下要做到什么样才能到达自己想要的效果,而在修改之前我们先来看一下目标吧!这样方便接下来的修改:

Discuz!X3.2(二级导航)导航下拉菜单样式修改

2、想要看到效果首先就是现在后台添加好一级栏目和二级栏目,这样做出更改以后才能看到效果。打开后台---登录---选择左上方界面----导航设置---添加主导航---添加二级导航

Discuz!X3.2(二级导航)导航下拉菜单样式修改
Discuz!X3.2(二级导航)导航下拉菜单样式修改

3、最终的效果就是添加一个主导航然后再在主导航里添加两三个二级导航,这样在你接下来的修改才能看到明显的效果。

Discuz!X3.2(二级导航)导航下拉菜单样式修改

4、这一步就是设置二级导肾禀嚼隳航的样式,也就是图片的箭头所指的位置,这里可设置成1、菜单样式,2、横排样式,两种效果,这两种效果琼藻樘哒具体什么样的我就不说了,在这主要是图片中框中的,这里最好有链接,加上链接后样式文件中的a才能起到相应的效果:

Discuz!X3.2(二级导航)导航下拉菜单样式修改

5、做完第四步后更新一下缓存,到前台刷新一下就能看到效果了。但是你很可能选择横排发现没效果,但是不用担心,这个问题你可以去源码中实现,找到common.css文件(图片中已经显示中去那些文件夹里找)

Discuz!X3.2(二级导航)导航下拉菜单样式修改

6、然后用DW打开文件(如果你不知道这个软件就用记事本打开也行),用查找工具找到 .p_pop li 然后在后面的括号内加上:float:left; border-right:1px soli颊俄岿髭d #666; padding-left:5px; padding-right:5px;

Discuz!X3.2(二级导航)导航下拉菜单样式修改

7、做到这一步基本上就完成了,如果你还想要加一下自己想要的效果的话可以在图片中的代码中更改,绝对能达到你想要的效果的(前台你懂那些代码)。

Discuz!X3.2(二级导航)导航下拉菜单样式修改
© 手抄报圈