织梦导航栏制作下拉菜单_M1850资源网 - 最专业的网站源码模板下载站！

M1850资源网 > 建站教程 > 织梦教程 > 织梦二次开发 > 织梦导航栏制作下拉菜单

分类

标签推荐

织梦导航栏制作下拉菜单

织梦5.7版本的默认模板中，导航栏是没有二级菜单的，其实默认模板中可以设置二级菜单。下面我们就来看看怎样实现织梦默认模板导航栏的二级菜单。

1、为了演示二级菜单的样式，我们创建一个栏目“新闻中心”，其下有3个子栏目“公司新闻”、“行业咨询”、“视频中心” ，创建完成后，生成网站，导航栏没有下拉菜单的样式。下面就是二级菜单的添加方法。

2、首先在默认模板文件夹default的footer.htm文件中的头部加上这段代码

<script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'></script>

{dede:channelartlist typeid='top' cacheid='channelsonlist'}
<ul id="dropmenu {dede:field.typeid/}" class="dropMenu">
{dede:channel type='son' noself='yes'}

<li><a href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}

</ul>
{/dede:channelartlist}
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script>

把上面代码放入footer.htm后，保存文件，生成一下网站后，网站的导航栏就已经出现二级菜单的样式，样式如下图：
织梦导航栏制作下拉菜单_lazybirdfly.com

现在就有了二级菜单的样式，并且没有背景，是透明的背景。

3、通过看上面添加的代码，其中调用了一个js文件，是织梦系统的/images/js/dropdown.js ，通过这个路径你会发现文件是织梦系统自带的，不是模板中的，所以我们就算用其他的模板也可以调用这个js样式。

另外我们现在也可以对这个透明的二级菜单做调整，因为二级菜单的样式在织梦默认模板default的style中的dedecms.css中也是默认存在的，打开dedecms.css查询“下拉菜单” 这个词，就可以找到代码，如下图
织梦导航栏制作下拉菜单_lazybirdfly.com

.dropMenu就是下拉菜单的样式，懂div+css的朋友应该知道怎样修改，不懂的请学习一下css。

4、通过上面的下拉菜单的css样式，我们可以看到，下拉菜单的背景是名称为mmenubg.Gif 的图片，我们可以把下面的图片复制到default的images文件夹下,命名为mmenubg.Gif ，这样下拉菜单就出现背景了。
织梦导航栏制作下拉菜单_lazybirdfly.com

上一篇：还原dedecms数据后系统基本参数空白的解决方法
下一篇：用织梦怎样做在线留言在线报名订购系统

M1850资源网 - 最专业的网站源码模板下载站！

分类

推荐文章

推荐下载

标签推荐

织梦导航栏制作下拉菜单

在线客服