Discuz!X3.2导航下拉菜单样式修改

通过谷歌“审查元素”可以发现dz导航下拉代码如下：

$_G[setting][menunavs]

发现是G变量函数，一般没法改的！但是dz自带的下拉菜单样式实在太难看了，本人接触dz也是4个月时间，很多代码都不懂，就找了相关的模版查看源代码进行模仿。

方法如下：

在G变量上面加一个class并且赋予相关的css样式，代码：


1
2
3
4
5
6
7
8
9
10
11
12
<div class="comeing_nv_pop">
                <!--{if !empty($_G[‘setting‘][‘plugins‘][‘jsmenu‘])}-->
                    <ul class="p_pop h_pop" id="plugin_menu" style="display: none">
                    <!--{loop $_G[‘setting‘][‘plugins‘][‘jsmenu‘] $module}-->
                         <!--{if !$module[‘adminid‘] || ($module[‘adminid‘] && $_G[‘adminid‘] > 0 && $module[‘adminid‘] >= $_G[‘adminid‘])}-->
                         <li>$module[url]</li>
                         <!--{/if}-->
                    <!--{/loop}-->
                    </ul>
                <!--{/if}-->
                $_G[setting][menunavs]
         </div>

css样式：


1
2
3
4
5
6
7
8
/*导航下拉样式*/
.comeing_nv_pop .p_pop{ background:#0A5D80; border:0; border-radius:0 0 5px 5px; min-width:130px; overflow:hidden}
.comeing_nv_pop .p_pop a { padding: 10px 8px;  color:#fff}
.comeing_nv_pop .p_pop a:hover,.comeing_nv_pop .p_pop a.a{ background:#0E6A9C; color:#fff;}
.p_pop a {border-bottom:none;}
.p_pop, .p_pof, .sllt {padding:0px;}
.p_pop{border:0px;}
.xl1 li {height:25px}

效果图：

下拉菜单

注意

1、样式颜色，宽度，间距根据自己网站修改；

2、请不要在论坛默认模版上面修改；

时间： 2024-11-01 17:02:29

Discuz!X3.2导航下拉菜单样式修改的相关文章

二级导航下拉菜单

纯css3二级导航下拉菜单,新增一些css3的特效,提供借鉴学习,如有雷同之处勿喷 <!DOCTYPE html><html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>二级下拉导航</title> <meta name=&

纯CSS实现二级导航下拉菜单--css的简单应用

思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级导航下拉菜单代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" content="text/html" http

用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消失.为了便于理解我画了一个图,如下: 在这个案例主要用到的知识有:设置定时器,清除定时器,mouseout和mouseover事件,另外还有css中position相关知识.本案例分为两部分讲解.第一部分html和css,第二部分js. 一. html和css 将导航这个导航条包裹在一个div中,这

导航下拉菜单被遮住或显示不全问题所在和解决办法

一.导航下拉菜单被遮住,那是因为层叠关系错误 我们必须理解层叠关系满足的2个条件: 1.必须是同级: 2.二者分别设定了position:relative 或 absolute 或 fixed: 这时候通过设置z-index才有效 连接:https://blog.csdn.net/FireBird_one/article/details/78864929 原文地址:https://www.cnblogs.com/web-fusheng/p/11397955.html

MDNavBarView下拉导航菜单（仿美团导航下拉菜单）

说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下,感觉挺不错的,复用性也比较好,但要 是换成别的样式就要去修改代码了,感觉这有点不方便也比较容易出错.于是参照他的大致思路写了一个仿下拉菜单. 具体的实现就不多说了,觉得有意思的话可以下来看看.下面说一下使用方法吧: 1.添加navbarview包下的代码与对应资源 2.布局文件中添加: <com.m

iOS 下拉菜单 FFDropDownMenu自定义下拉菜单样式实战-b

Demo地址:https://github.com/chenfanfang/CollectionsOfExampleFFDropDownMenu框架地址:https://github.com/chenfanfang/FFDropDownMenu 老样子,先附上两张效果图 customMenuStyle.gif customMenuStyle.png 首先自定义一个继承于FFDropDownMenuBasedModel的菜单模型.h文件 #import <FFDropDownMenuBasedMo

兼容ie7的导航下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

【特效】导航下拉菜单（二级三级都有）

导航的下拉菜单,分别写了二级的和三级的.其实下拉菜单最重要的是写好结构,哪一层是哪一层的,要清晰,做到心中有数. css定位时注意给隐藏的下拉菜单添加absolute绝对定位,但是其父级不必加relative.js嘛,简单,一个hover() 打遍天下.动画用了slideDown,slideUp,fadeIn,fadeOut,当然可换成其他效果,动画前加了stop() 是为了快速多次滑动时,不会一直闪呀闪个不停. html: <h1>二级下拉菜单</h1> <ul class

小米网css3导航下拉菜单代码

效果:http://hovertree.com/texiao/css3/19/ 代码如下: 1 <!doctype html> 2 <!-- W3C规范 --> 3 <html lang="zh"> 4 <!-- 声明 --> 5 <head> 6 <meta charset="UTF-8"> 7 <!-- 声明当前页面的三要素 --> 8 <title>CSS3菜单仿小