洛阳网络公司,洛阳网站建设,洛阳网页设计,洛阳网站设计,洛阳网站优化,洛阳建站,洛阳网站制作,洛阳做网站,洛阳建网站,洛阳百度推广
加入收藏高级搜索手机版
  • [2018-05-02]郑州搬家公司就选郑州远大搬家!
  • [2018-04-25]北京月嫂有限公司上线了
  • [2018-04-11]减振器有限公司上线了
  • [2018-04-11]洛阳轩格格力空调售后维修 上线了
  • [2018-04-11]洛阳新程威门窗有限公司上线了
  • [2017-07-26]【团膳品牌】恒美客(北京)餐饮管理有限公司 网站上线!
  • [2015-08-01]国际网络商品线下交易博览会
  • [2015-05-19]河南省巩义市宇泰净水材料有限公司 网站优化
  • [2015-05-11]北京大勺哥半成品净菜
  • [2015-03-31]洛阳市福农农业生产资料有限公司
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 建站专题 > 正文

    织梦DEDECMS导航下拉菜单

    来源:洛阳网络公司  发表时间:2014-03-12  点击次数:

     DEDECMS实现下拉菜单的步骤:
      一、在你网站正在使用的头部模板(如head.htm)导航的位置,加入下面的代码:

    <div id="navMenu"><UL>
    <LI><A href="{dede:global.cfg_indexurl/}">首页</A> </LI>{dede:channel row='10' type ='top'}
    <LI><a href="[field:typeurl/]" [field:rel/]>[field:typename/]</a></li></LI>
    {/dede:channel}</UL></DIV></div>

      我们只要注意蓝色的这一行,这个是输出导航栏栏目的,需要在这里添加上红色的部分[field:rel/] 想要更多样式就需要自己慢慢测试了。
      提醒:这里首页必须用id="navMenu",在css表里把头部的id或者class更改为默认这个id="navMenu",因为第三步我会讲到CSS部分的修改。
      二、在你网站正在使用的底部模板(如footer.htm)添加如下代码,建议放在底部文件是为了SEO优化效果更好,同时不影响网站打开速度。
      在页面上添加如下java代码,全部复制粘贴即可:

    <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>

      三、到templets/default/style中打开dedecms.css文件,寻找“.dropMenu”这个类,复制它的所有代码到你自己的css中,你也可以直接复制下面的代码到你的css中。
      如下:

    .dropMenu {
     position:absolute;
     top: 0;
     z-index:100;
     width: 80px;
     visibility: hidden;
     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;
    }

      当然这里面可以修改下拉菜单样式,包括下拉菜单的背景颜色或背景图片以及字体样式等,具体的可以自己调试。

    与【织梦DEDECMS导航下拉菜单】相关文章:

    您的需求

    联系我们

    正确的选择

    洛阳网站优化 洛阳网站推广

    织梦DEDECMS导航下拉菜单 - 洛阳建站专题专题网站 - 洛阳网络公司