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

2021-07-28 0 2,310

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

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

方法/步骤

  1. 下载导航下拉菜单jquery特效基础包。链接: https://pan.baidu.com/s/1OfiCNiWJXE74QNvLq70IUA 提取码: ynur 
  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 `58pic_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. 这样就可以制作出织梦下拉二级菜单导航了。
收藏 (0) 打赏

您的支持是我们前进最大的动力!

打开微信扫一扫,即可进行扫码打赏哦
点赞 (0)

本站声明: 根据2013年1月30日《计算机软件保护条例》2次修订第17条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬,鉴于此,也希望大家遵守相关法律法规使用、研究软件。 1、本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解。 2、下载用户仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。 3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。 4、本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用,如有链接无法下载、失效或广告,请联系客服处理。 5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所 以不支持任何理由的退款兑现,请熟知后再下载。

彤彤模板团 织梦CMS教程 织梦下拉二级菜单导航自动调用实现方法 https://www.xiaoyuerqingfen.cn/2854.html

一家有态度的精品资源分享平台

常见问题
  • 模板团承诺演示效果图均和网站95%一样,并且我们的模板和数据都没有留后门,请放心使用。
查看详情
  • 因为模板具有可复制性和可传播性,模板一旦发货,非质量问题,不支持退换;所以务必请您一定看清楚后再购买。
查看详情

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    资源总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数

开通会员,尊享海量资源下载特权