CMS之织梦导航二级下拉菜单

浮华落定

已于 2023-09-21 15:05:01 修改

阅读量293

点赞数

分类专栏： cms 文章标签： javascript 开发语言 ecmascript

于 2023-09-21 15:04:31 首次发布

本文链接：https://blog.csdn.net/qiufo/article/details/133134610

版权

cms 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

操作步骤

1、首先：

将下面这段代码贴到templets\default\footer.htm文件里（只要在此文件里就行，位置无所谓啦！自己看着办！）

 <!-- //二级子类下拉菜单，考虑SEO原因放置于底部 -->
    <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>

以上代码可以看出，二级子类下拉菜单是由dropdown.js控制的，我们来看dropdown.js文件：

由以上的cssdropdown.startchrome(“navMenu”)，可以看出我们调用的是 startchrome:function()
具体源码请参考/images/js/dropdown.js
由上可以看出，var cssdropdown变量中有多个函数：

getposOffset:function(what, offsettype)

swipeeffect:function()

showhide:function(obj, e)

iecompattest:function()

clearbrowseredge:function(obj, whichedge)

dropit:function(obj, e, dropmenuID)

positionshim:function()

hideshim:function()

dynamichide:function(e)

delayhidemenu:function()

clearhidemenu:function()

startchrome:function()

2、然后，奇迹就出现了，跟新一下！会发现导航栏已经出现下拉菜单了，只是背景是透明的，原因是没有背景图片。是不是很简单呢？？
在这里插入图片描述

3、可是头疼的是，这个下拉菜单是透明的！咋么办？？

接着来你需要把DedeCMS5.7程序文件夹\dede\img里的mmenubg.gif(绿色背景图片，适用于绿色主题模板)或者DedeCMS5.5程序文件夹\templets\images里的mmenubg.gif(蓝色背景图片，适用于蓝色主题模板)复制到DedeCMS5.6程序文件夹 /templets/default/images下面

现在你再看一下效果，呵呵，导航栏是不是已经出现熟悉的下拉菜单了：

在这里插入图片描述

4、此时，你想要的效果基本上已经完成了！如果你还想做其他的设置，比如调整位置，呵呵。。。只需要去/templets/default/style/dedecms.css

里你可以ctrl+f 寻找 .dropMenu 没错就是他控制着呢？

/*-------- 下拉菜单 --------------*/
.dropMenu {
position:absolute;
top: 0;
z-index:100;
width: 120px;
visibility: hidden;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA, direction=135, strength=4);
margin-top: -1px;
border: 1px solid #93E1EB;
border-top: 0px solid #3CA2DC;
background-color: #FFF;
background:url(../images/mmenubg.gif);
padding-top:6px;
padding-bottom:6px;
}.dropMenu li {
margin-top:2px;
margin-bottom:4px;
padding-left:6px;
}
.dropMenu a {
width: auto;
display: block;
color: black;
padding: 2px 0 2px 1.2em;
}
* html .dropMenu a {
width: 100%;
}
.dropMenu a:hover {
color:red;
text-decoration: underline;
}

如果只是调整宽度，只用修改：

width: 100px;/—— //原来参数是120-，如果二级标题字数少，还可以把参数调整到80，乃至是60——–/

在此，就不多说了，如果看不懂，希望去学一学css的知识！

三、原理
1、我们来看默认模板index.htm中有：

<!-- /flink -->
<div id="footAD" style="margin:10px auto; width:726px">{dede:myad name='indexfooterAD'/}</div>
{dede:include filename="footer.htm"/}
<!-- /footer -->
</body>
</html>

它其实就是链接到了footer.htm中，而在footer.htm的所有内容为：

<!-- //底部模板 -->
<div class="footer w960 center mt1 clear">
<!--
为了支持织梦团队的发展,请您保留织梦内容管理系统的链接信息.
我们对支持织梦团队发展的朋友表示真心的感谢!织梦因您更精彩!
-->
    <div class="footer_left"></div>
    <div class="footer_body">
<p class="powered">
Powered by <a href="http://www.dedecms.com" title="织梦内容管理系统(DedeCms)--国内最专业的PHP网站管理系统，轻松建站的首选利器。" target="_blank"><strong>DedeCMS_{dede:global.cfg_version/}</strong></a> © 2004-2011 <a href="http://www.desdev.cn/" target="_blank">DesDev</a> Inc.<br /><div class="copyright">{dede:global.cfg_powerby/}  {dede:global.cfg_beian/}</div></p>
<!-- /powered -->
   </div>
   <div class="footer_right"></div>
</div>

以上代码只是实现了：

2、index如何引用到head.htm文件

在系统默认模板中的index.htm中有：

</head>
<body class="index">
{dede:include filename="head.htm"/}
<!-- /header -->
在我的模板中的index.htm中有：

</head>
<body class="index">
<div class="w960 center">
    <!-- /header -->
    {dede:include filename="head_i.htm"/}
    <!-- /header -->

另一模板是：

</HEAD>
<!-- header -->
<BODY class=index>{dede:include filename="head.htm"/}
<!-- /header -->

浮华落定

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录