请选择 进入手机版 | 继续访问电脑版
今天在群里有位朋友位到到我现在就来把这个方法分享到我的博客里,希望能帮助更多的朋友!

Dedecms横排下拉菜单教程

最终效果图:



上图是我们最终要实现的最终效果图.


其实我们在网上能搜到很关相关的下拉菜单的文章,但是大家可以对比出具体的效果,这里是横排而且中间是“|”效果的。
 


我用的是dedecms5.7版本的。

第一步添加js代码,同那些网上搜的文章一样

首先在\templets\default\footer.html文件中的头部加上这段代码

{dede:channelartlist typeid='top' cacheid='channelsonlist'}
      {dede:channel type='son' noself='yes'}  
  • [field:typename/]
  •   {/dede:channel}
    {/dede:channelartlist}

    这段代码就是导航下拉菜单的js代码,在dede的程序文件里默认的有这个js文件。
    添加上这段代码就已经出现下拉菜单了,只是我们看到的是透明的而且是竖排的效果,透明的原因是没有图片的效果

    我们到到\dede\img里找mmenubg.gif然后复制到/templets/default/images下面,刷新再看一下效果,呵呵,导航栏是不是已经出现熟悉的下拉菜单了。如图


    第二步,修改dedecms.css

    我们看到的是竖排的,下面我们就把改为横排的。
    首先找到\templets\default\style\dedecms.css文件
    找到
    .dropMenu a {
            width: auto;
            display: block;
            color: black;
            padding: 2px 0 2px 1.2em;
    将里面的里面的display: block;去掉,然后找到

    .dropMenu {
            position:absolute;
            top: 0;
            z-index:100;
            width: 120px;
            visibility: hidden;
    将 width: 120;改成width: auto;就好了。

    找到以下代码
            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;

    然后修改为如下代码:
        margin-top: -1px;
        border: 1px solid #93E1EB;
        border-top: 0px solid #3CA2DC;
        background-color: #FBFFFD;     (这里的颜色根据你图片的颜色来调整)
        background:url(../images/mmenubg.gif);  (这个背景图片你可以自己制作)
        padding-top:6px;
        padding-bottom:6px;
    }

    .dropMenu li {
        border-left:1px solid #666666;
        float:left;
        height:14px;
        line-height:14px;
        margin-left:-2px;
        padding-left:-10px;
    padding-right:6px;

    修改后效果


    这样最终的效果就如文字开始时的那样了,当然/images/mmenubg.gif是需要你自己去ps的,你ps的越好看,这个下拉的二级菜单肯定就越漂亮。

     

    如果你觉的方法可以,以后记的多来钟振森博客逛逛哦,如果你有更好的方法我们可以一起交流学习!
    来源:钟振森博客,欢迎分享,(QQ/微信:83122197)

    鄙视


    呵呵

    震惊

    打酱油
    该文章已有0人参与评论

    请发表评论

    全部评论

    本文作者2012-5-16 18:23
    钟振森
    粉丝0 阅读885 回复0
    上一篇:
    一个影视网站的宣传心得发布时间:2012-04-25
    下一篇:
    Z-Blog主博客调用二级目录微博客文章发布时间:2012-04-25

    精彩阅读

    排行榜

    钟振森微信公众号码

    扫码微信公众号
    给你想要与成长

    用心服务创业者
    400-001-2588
    周一至周五 9:00-18:00
    意见反馈:83122197@qq.com

    扫一扫关注我们

    Powered by 钟振森 © 2005-2017 Zhongzhensen.com.( 粤ICP备17048603号 )