科汛CMS实现弹出二级菜单效果
很多科汛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,…,0,)}">{$Field(FolderName,Text,0,…,0,)}</a></li>
[/loop]
</ul>
说明一下, 在内循环里面, 在样式之前,有一个“查询无记录时输出内容”这一项,一定要把里面默认的项删掉,不然,如果有些栏目没有二级栏目,便会弹出一个暂无内容, 这样就大大的影响了美观了。
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,…,0,)}</a>
{SQL_内循环({$Field(ID,Text,0,…,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