学做网站培训课程介绍

当前位置:

织梦下拉二级菜单导航自动调用实现方法

使用织梦建网站时,很多网站需要二级菜单导航,这时就需要通过代码将后台的所有一级菜单和二级菜单都调用出来。效果如下图:

织梦下拉二级菜单导航自动调用实现方法

下面学做网站论坛给广大学习建网站的学员介绍一下织梦下拉二级菜单导航自动调用实现方法

方法/步骤

  1. 下载导航下拉菜单jquery特效基础包。点击下载 提取码: cme9;
  2. 将下载的压缩包解压出来,将里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二个文件通过FTP工具上传到自己模板的js文件夹里;
  3. 在头部模板head.htm里找到</head>标签,将下的代码放到</head>标签上面;(注意文件路径)
    
    
    <script type="text/javascript" src="{dede:global.cfg_templets_skin/}/static/js/jquery1.42.min.js"></script>
    <script type="text/javascript" src="{dede:global.cfg_templets_skin/}/static/js/jquery.SuperSlide.2.1.3.js"></script>
  4. 使用以下的代码替换原来的网站导航菜单代码。
    
    
    <div id="navvr">
      <ul>
    <li><a href="{dede:global.cfg_cmsurl/}/">网站首页</a></li>
       
    {dede:channelartlist row='10' typeid='top' }
    <li class="nLi">
    <a href="{dede:field name='typeurl'/}">{dede:field name='typename'/} </a>
    <ul {dede:field name=typeid runphp="yes"}
    global $dsql;
    $sql = "SELECT id From `#@__arctype` WHERE reid='@me' And ishidden<>1 order by sortrank asc limit 0, 100 ";
    $row = $dsql->GetOne($sql);
                @me=is_array($row)?'class="submeau"':'class="subno"';{/dede:field}>
    {dede:channel type='son' noself='yes' }
    <li><a href='[field:typelink/]'>[field:typename/]</a></li>
    {/dede:channel}
    </ul>
    </li>
    {/dede:channelartlist}
    </ul>
    </div>
    <script id="jsID" type="text/javascript">
               
                jQuery("#navvr").slide({
                    type:"menu",// 效果类型,针对菜单/导航而引入的参数(默认slide)
                    titCell:".nLi", //鼠标触发对象
                    targetCell:".submeau", //titCell里面包含的要显示/消失的对象
                    effect:"slideDown", //targetCell下拉效果
                    delayTime:300 , //效果时间
                    triggerTime:0, //鼠标延迟触发时间(默认150)
                    returnDefault:true //鼠标移走后返回默认状态,例如默认频道是“预告片”,鼠标移走后会返回“预告片”(默认false)
                });
            </script>
  5. 将以下的CSS样式代码粘贴到style.css文件最下面。
    
    
            .nLi{float:left;position:relative;}
    .submeau{ display:none; width:130px; left:-30px; top:100%;  position:absolute; z-index:999;background:#4E4E4E;  line-height:26px; padding:0;  }
    .submeau li{ zoom:1; width:100%;margin:0 !important;padding:5px 0; }
    .submeau a{ display:block; width:100%;margin:0; }
    .submeau a:hover{ background:#6d6d6d; color:#fff;  }
    .subno{display:none;}
  6. 在网站后台--核心---网站栏目管理,进行一级栏目与二级栏目的添加。
  7. 这样就可以制作出织梦下拉二级菜单导航了。

发表评论

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

相关教程

  • 使用织梦建网站时,很多网站需要二级菜单导航,这时就需要通过代码将后台的所有一级菜单和二级菜单都调用出来。效果如下图:下面学做网站论坛
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • Dreamweaver跳转菜单制作 视频教程 (1123736 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 感谢VIP学员:卓新红  的无私分享,此模板已通过学做网站论坛网的审核,大家可放心使用。分享一个网址导航站模板,这个网址导航模板可以制作图片
  • 经常更换wordpress主题,会有一个困扰,就是之前主题的内容区域宽度比较大,很多正文图片的尺寸可能是500px,而换了一个主题,内容区域的宽度比较小,
  • 在日常上网过程中,复制,粘贴是特别寻常不过的了,有时我们在某一网站复制后,粘贴到别的地方时,它会自己加上它网站的一个版权信息链接。比如:此文章转
  • 我们在浏览网站时,会发现有些网站的顶部会有天气预报功能,并且可以根据用户所在的城市自动变换成当地的天气预报信息。那么我们在自己建网站时,怎么