畅想网络是一支年轻的网站设计与开发的精英团队,专业于网站开发、网站建设、网站排名、域名注册与网络服务器租用的互联网企业……

科汛CMS实现弹出二级菜单效果

本站原创   2015年09月20日

  很多科汛FANS都在纠结科汛没有可以弹出二级菜单的标签,或者说功能,有个别网友用SQL做出来了,但是,不是那么完美,比如 当鼠标离开频道(一级栏目)名称后滑向弹出的二级栏目的名称时,频道名称的鼠标经过效果就会消失,使原本高大上的页面,掉价许多....不废话, 直接先上效果图



 

  制作步骤:

  1、新建SQL标签

  这里需要两个SQL标签进行嵌套。我们分别为命名为 内循环和外循环;

  2、内循环

  内循环用于显示二级栏目使用的,  用于查询当前栏目下面的子栏目使用的。
  SQL查询内容:
  SELECT TOP 15 ID,FolderName,TN FROM KS_Class Where TN='{$Param(0)}' ORDER BY FolderOrder
  样式:
  <ul>
  [loop=15]
  <li><a href="{$Field(ID,GetInfoUrl,100,1)}" title="{$Field(FolderName,Text,0,&hellip;,0,)}">{$Field(FolderName,Text,0,&hellip;,0,)}</a></li>
  [/loop]
  </ul>

  说明一下, 在内循环里面, 在样式之前,有一个&ldquo;查询无记录时输出内容&rdquo;这一项,一定要把里面默认的项删掉,不然,如果有些栏目没有二级栏目,便会弹出一个暂无内容, 这样就大大的影响了美观了。

 

  3、外循环

  外循环用于查询网站一级栏目使用。
  SQL查询内容:
  SELECT TOP 15 ID,FolderName,TS,TN FROM KS_Class Where TN='0' ORDER BY Root
  样式:
  [loop=15]
  <li{#CurrClass}><a class="hide" href="{$Field(ID,GetInfoUrl,100,1)}">{$Field(FolderName,Text,0,&hellip;,0,)}</a>
  {SQL_内循环({$Field(ID,Text,0,&hellip;,0,)})}
  </li>
  [/loop]

  4、CSS样式 

  建议大家直接在我的这个CSS上面去修改,这样会方便一些,  为了便 于大家区别,我将一级菜单放在了定义在。nav 里面,故以。nav命名CSS
  .nav ul { padding:0; margin:0; list-style-type: none; }
  .nav ul li { float:left; position:relative; }
  .nav ul li a, .menu ul li a:visited { display:block; text-align:center; text-decoration:none; width:122px; color:#FFFFFF; font-size:16px; font-weight: bold; line-height: 45px; }
  .nav ul li ul { display: none; z-index: 9999; margin-left: 5px; }
  .nav ul li:hover a,.Nav .menu .curr .hide { color:#FFFF00; text-align: center; font-size: 16px; line-height: 45px; font-weight: bold; background-image: url(s.png); background-repeat: repeat-x; background-position: 0px -45px; }
  .navul li:hover ul { display:block; position:absolute; top:45px; left:0; width:122px; padding-top: 0px; padding-right: 0px; padding-bottom: 1px; padding-left: 0px; margin: 0px; }
  .nav ul li:hover ul li a { display:block; color:#FFFFFF; font-size: 12px; line-height: 30px; height: 30px; background-image: url(s.png); margin: 0px; padding: 0px; font-weight: normal; background-repeat: repeat-x; background-position: 0px -90px; }
  .nav ul li:hover ul li a:hover { color:#FFFF00; background-image: url(s.png); background-repeat: repeat-x; background-position: 0px -120px; }

  5、调用方法:

  <div class="nav">
  <ul>
  {SQL_外循环()}
  </ul>
  </div>
  看一下效果吧,我们想要的效果,肯定就出现了。 有一些朋友喜欢二级菜单弹出后 横着排放的, 这样的,也可以通过这样的方法实现,只需要修改对应的CSS便可以了。


 


更多资讯请关注公司网址:http://www.jccxwl.com

关于畅想服务范围套餐标准询求提交联系我们网站地图百度新闻维护工单技术交流
Copyright 2009-2015 Powered by Jccxwl.COM All Rights Reserved.
鄄城畅想网络科技有限公司 版权所有
鲁公网安备 37172602000001号  鲁ICP备15031242号