织梦dede下拉菜单的实现方法-织梦下拉菜单的添加制作

  完成下面的3个步骤,只要是织梦dedecms建的站不管是默认的还是自己建立的模板都可以实现下拉菜单。雨过天晴工作室亲测有效!
  织梦dede实现下拉菜单步骤:
  一、你自己网站正在用的模板的head
  {/dede:channel}
  首页
  {dede:channel row='10'type='top'}
  [field:rel/]>[field:typename/]
  我们只要注意黑色的这一行,这个是输出导航栏栏目的,需要在这里添加上红色的部分[field:rel/]你想要更多样式需要你自己慢慢测试了。
  提醒:这里首页必须用id="navMenu",在css表格里吧头部的id或者class更改为默认这个。
  二、你自己网站正在用的模板的footer.htm或者index.htm,head.htm等等均可,这里推荐footer.htm。
  在页面上添加如下java代码,全部复制黏贴即可。
  {dede:channelartlist typeid='top'cacheid='channelsonlist'}
  {dede:channel type='son'noself='yes'}
  [field:typename/]
  {/dede:channel}
  {/dede:channelartlist}
  三、到templets\default\style中打开dedecms.css
  寻找.dropMenu这个类,复制他的所有代码到你自己的css中,
  你也可以直接复制下面的代码到你的css中。
  如下:
  .dropMenu{
  position:absolute;
  top:0;
  z-index:100;
  width:80px;
  visibility:hidden;https://www.cqxftyyj.com
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
  margin-top:-1px;
  border:3px solid#FF0000;
  border-top:0px solid#3CA2DC;
  background-color:#FFF;
  background:url(templets/sdgwy/index_files/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;
  }
  当然这里面可以修改下拉菜单样式,这个可以自己调试,包括下拉的背景色。
  经过上面的三步后,你的dede下拉菜单功能就实现了,相信对你很有帮助的。
  以下是我修改过的代码
  首页
  {dede:channel row='10'type='top'}
  [field:typename/]
  {/dede:channel}
  {dede:channelartlist typeid='top'cacheid='channelsonlist'}
  {dede:channel type='son'noself='yes'}
  [field:typename/]
  {/dede:channel}
  {/dede:channelartlist}

猜你喜欢

转载自www.cnblogs.com/zqw111/p/12921668.html