新手站长论坛

 找回密码
 注册会员

QQ登录

只需一步,快速开始

查看: 4969|回复: 23

关于首页下拉横排导航的实现问题,跪谢!

  [复制链接]
发表于 2009-6-20 09:42 | 显示全部楼层 |阅读模式
我想实现在首页栏目鼠标触动型下拉横排导航条,方便打开二级子目录,请问如何实现。最好详细一点。跪谢!
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2009-6-20 09:52 | 显示全部楼层
dedecms的版本? 5.1 还是5.3?
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2009-6-20 09:53 | 显示全部楼层
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
 楼主| 发表于 2009-6-22 18:21 | 显示全部楼层
我的是5.3的,你给的链接我去看过了。看不太懂,有没有详细一点的或者简洁一点的。我感觉链接上的那个做法好像要把主页都换成别的一样。有劳数据百度大哥再提供一下资料,谢谢。
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-7-12 16:45 | 显示全部楼层
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2012-3-19 22:44 | 显示全部楼层
我的5.7的应该如何操作呢
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2012-3-23 14:12 | 显示全部楼层
很好 很好 帮你顶起来
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2012-3-24 14:30 | 显示全部楼层
给你顶起来 下次帮我顶啊
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2012-3-24 23:36 | 显示全部楼层
本帖最后由 风雨无阻 于 2012-3-24 23:37 编辑

5.7的下拉框的要不要
我昨天在本地服务器试了下还可以  就是那下拉框原色没弄好
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2012-3-25 14:52 | 显示全部楼层
有点那个啊...大家懂得 你懂得
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2012-3-26 21:15 | 显示全部楼层
我尝试过了,非常的困难呀。不好做二级导航呀
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2012-3-28 11:25 | 显示全部楼层
本帖最后由 zhongq58 于 2012-3-28 11:26 编辑

Dedecms 5.7横排下拉菜单教程

今天在群里有位朋友位到到我现在就来把这个方法分享到我的博客里,希望能帮助更多的朋友!

Dedecms横排下拉菜单教程

最终效果图:





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


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



我用的是dedecms5.7版本的。

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

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

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

这段代码就是导航下拉菜单的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的越好看,这个下拉的二级菜单肯定就越漂亮。



如果你觉的方法可以,以后记的多来钟振森博客逛逛哦,如果你有更好的方法我们可以一起交流学习!

原创文章请注明转载自东莞SEO,本文地址:http://zhongzhensen.com/post/54.html
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2012-3-28 23:46 | 显示全部楼层
这个好啊,等会去试试看
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2012-8-13 11:38 | 显示全部楼层
不错哦,婚纱艺术摄影我推荐
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2012-8-14 15:20 | 显示全部楼层
很不错的。学用经典
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2013-3-17 00:58 | 显示全部楼层
顶!!!!!!!!!!!!!!!!!!!!!!!!!
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2013-4-7 07:48 | 显示全部楼层
此帖必火!
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2013-4-15 19:14 | 显示全部楼层
没看懂
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2015-7-9 11:07 | 显示全部楼层
顶一下~~~
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2015-10-31 12:57 | 显示全部楼层


   HOHO~~~~~~
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

基础教程 HTML(网页制作基础课) Dreamweaver(网页制作课程) CSS基础知识视频教程 Photoshop(作图基础课) 进阶教程 SEO教程 PHP教程 ASP教程 JavaScript
分步教程: 域名注册教程 空间购买教程 域名解析教程 网站备案教程 域名绑定教程 上传下载教程 思路方法: 菜鸟起步教程 通用建站思路 新手建站过程 本地免费空间
实例教程 Discuz(论坛) Phpwind(论坛) ECshop(网店) Shopex(网店) Dedecms(文章资讯) PHP168(文章资讯) 114la(网址导航) uchome(交友) Wordpress(博客) | 更多
特色板块: 新手站长交流(注册后即可发帖) 数据百度大课堂授课内容 cnzhanzhang学院 站长在线答疑(建站问题免费解答) 建站教程学习区 发外链 发广告 seo交流站长群

QQ|广告报价|Archiver|手机版| 新手站长网 ( 豫ICP备14019290号 )

Powered by Discuz! X3.2

© 2007-2016 新手站长论坛 Inc.

快速回复 返回顶部 返回列表