织梦DEDECMS5.7模板导航增加下拉菜单的方法

tianw

       
       
       
       

.Ryb449 { display:none; }

        织梦DEDECMS5.7模板导航增加下拉菜单的方法： DEDE模板


        在织梦dedecms5.5中官方模板里设置了下拉菜单的显示，但是之后的几个版本里面下拉菜单就没有再用在模板上了。
       
       
       
               
       
       
                下面的方法是将dedecms5.5的下拉菜单移植到5.7sp1中来实现栏目的下拉菜单.
               
                        DEDECMS模板
               
               
                       
               
               
                        首页导航栏目可以调用为：
                       
                       
                       
                               
                       
                       
                               

首页
{dede:channel type=’top’ row='8'  currentstyle=”~typename~”}
[field:typename/]
{/dede:channel}


                               
                               
                               
                                       
                               
                               
                                        id=”navMenu”这个id是必须有的.
                               
                               
                                        在模板中的任何位置添加下面的代码：
                                       
                                                DEDE模板
                                       
                                       
                                               
                                       
                                       
                                               
{dede:channelartlist typeid=’top’ cacheid=’channelsonlist’}
{dede:channel type=’son’ noself=’yes’}  [field:typename/]
{/dede:channel}

{/dede:channelartlist}
cssdropdown.startchrome(“navMenu”)
                                               
                                                        织梦模板
                                               
                                               
                                                       
                                               
                                               
                                                        在css样式表中添加：
                                                       
                                                                织梦模板
                                                       
                                                       
                                                               
                                                       
                                                       
                                                               
                                                                        /*——– 下拉菜单 ————–*/
.dropMenu {
position:absolute;
top: 0;
z-index:100;
width: 80px;
visibility: hidden;
margin-top: -1px;
border: 1px solid #003366;
border-top: 0px solid #3CA2DC; background-color:#FFFFFF;
padding-top:6px;
padding-bottom:6px;
}
                                                               
                                                               
                                                                        .dropMenu li {
margin-top:2px;
margin-bottom:4px;
padding-left:0px;
}
.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;
}
                                                               
                                                               
                                                                        这里的css样式是可以任意调整的如果您懂得css。 copyright
                                                               
                                                       
                                                       
                                                                通过上述步骤就实现了在dedecms5.7sp1模板中添加下拉菜单
                                                       
                                                       
                                                                在一位朋友修改下拉菜单时发现下拉菜单在ie6下显示不正常经反复测试发现是因为在修改导航上的css样式时a的高度影响了js在select上的运用，因为select在层中是顶级的div无法覆盖；原理还挺麻烦大家有兴趣可以百度一下div与select的关系；谨慎哦！
                                                       
                                                       
                                                                修改的时候要先做好备份哦。呵呵！