零基础学做网站培训介绍

当前位置:

织梦二级导航制作 DEDE下拉菜单制作方法

在制作DEDECMS织梦网站的模板和学习仿站教程时,特别头痛的莫过于去制作网站的多级菜单导航了,很多时候制作出来的下拉菜单导航很多都会移位,使用固定的二级菜单导航代码,又不能自动调用网站的内容。

DEDECMS织梦网站下拉菜单导航的制作

学习DedeCMS教程,我们就可以使用下面的织梦网站下拉菜单导航代码就可以轻松制作出动态调用后台菜单的导航了。此方法已由学做网站论坛实测可用,学建网站学员在学习网站建设教程时,可以放心使用。

方法/步骤

  1. 下载DEDECMS二级下拉菜单导航必需要JS文件jquery-xl.js。下载地址:https://pan.baidu.com/s/1eQH7EP8
  2. 将下载下来的jquery-xl.js通过FTP软件上传到DEDECMS程序根目录的images文件夹。如图:caidan
  3. 打开自己DEDECMS网站的头部文件head.htm,在代码顶部放上以下的代码,用于调用jquery-xl.js文件。
    
    
    <script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/jquery-xl.js'></script>

    DEDECMS织梦网站下拉菜单导航

  4. 使用以下的代码替换原来调用导航菜单的代码,这个代码也是在head.htm中。(原来的代码只会调用一级菜单栏目)
    
    
    <div class="base-nav">
      <ul id="ermeau" class="wrap clearfix">
        <li {dede:field name=typeid runphp="yes"}(@me=="")? @me=" class='current'":@me="";{/dede:field}><a href="/">网站首页</a></li>
            {dede:channelartlist row='9' typeid='top'}
            <li class="nLi"> <a {dede:field name='currentstyle'/} href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>
               <ul class="sub">
                {dede:channel type='son' noself='yes'}
                <li> <a href="[field:typelink/]">[field:typename/]</a></li>
                {/dede:channel}
              </ul>
            </li>
            {/dede:channelartlist}
        <li class="last"></li>
      </ul>
    </div>
    <script type="text/javascript">
    var topMenuNum = 0;
    $("#ermeau li").hover(
    function(){
    topMenuNum++;
    $(this).attr("id","kindMenuHover"+topMenuNum);
    $("#kindMenuHover" + topMenuNum + " > ul").show();
    $(this).parent().addClass("hover");
    },
    function(){
    $("#"+$(this).attr("id")+" > ul").hide();
    $(this).attr("id","");
    $(this).parent().removeClass("hover");
    }
    );
    </script>
  5. 最后,还要在放几句CSS代码,用于控制下拉二级菜单导航的样式。可以直接放在head.htm顶部。(CSS样式可以根据自己网站进行调整。)
    
    
    <style>
    /* Base-nav */
    .base-nav{background-color:#ec1a6c;width:100%;padding:15px 0;height:30px;}
    .base-nav ul{}
    .base-nav li,.base-nav h3,.base-nav .cont,.base-nav p a{float:left;display:inline;}
    .base-nav li{float:left;position:relative; height:30px; line-height:30px; margin-right:16px;}
    .base-nav li.current,.base-nav li:hover{background:#B73551; }
    .base-nav li.current a,.base-nav li:hover a{color:#fff;}
    .base-nav a{display:block;font-size:16px;color:#f8d3d9; padding:0 10px; line-height:30px;height:30px;}
    #ermeau>li{position:relative}
    .base-nav #ermeau ul {display: none}
    .base-nav #ermeau ul li {   background: #ec1a6c;    border-top: 1px solid #b73551;    padding: 5px 0;    width: 86px;    text-align: center; overflow: hidden;
     white-space: nowrap;}
    .sub li:hover{background:#b73551;}
    </style>
  6. 代码部分结束了。接下来,在自己网站后台栏目里创建几个子栏目。DEDECMS织梦网站下拉菜单导航
  7. 最后去生成一下整个网站,清除一下网站缓存。就可以发现自己的DEDECMS网站已经拥有了二级下拉菜单导航了。

相关阅读:

网站导航如何制作“热”“顶”动态图标

如何制作网站面包屑导航

如何在网站上制作下拉菜单

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 分享一个DEDECMS织梦淘客模板,个人比较喜欢使用DEDECMS程序,后台不需要怎么开发,这是我学习了学做网站论坛的织梦仿站课程,自己仿的一个淘客网站,
  • 使用DEDECMS建网站时,根据不同网站类型,需要建立与自己网站风格要求的管理后台,修改了织梦5.7的后台系统,并详细介绍每一块儿的修改方法。此篇
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • 感谢VIP学员:卓新红  的无私分享,此模板已通过学做网站论坛网的审核,大家可放心使用。分享一个网址导航站模板,这个网址导航模板可以制作图片
  • Wordpress与dedecms是二款国内使用量最大的建网站程序,都可以用来制作各类型网站。下面是Wordpress与dedecms程序的不同点: 1、wordpres
  • 在学做网站时,网站导航上经常有下拉菜单,这样可以在有限的导航上呈现出更多的栏目。如何在做网站时,能够制作出下拉菜单呢?【相关知识:如
  • 在制作DEDECMS织梦网站的模板和学习仿站教程时,特别头痛的莫过于去制作网站的多级菜单导航了,很多时候制作出来的下拉菜单导航很多都会移位,使用固
  • Dreamweaver跳转菜单制作 视频教程 (1120294 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 很多网站都有对联广告,当我们打开它的网站的时候,会在屏幕的两边自动的出现二个对联广告,显的很醒目。网站对联广告对于做cpa,cps的朋友有很大