先看看效果:
此主题相关图片如下:qq截图未命名.jpg
此主题相关图片如下:2.jpg
1、新建sql标签,命名为二级导航
查询:SELECT TOP 15 ID,FolderName,TN FROM KS_Class Where TN='{$Param(0)}' ORDER BY FolderOrder
循环:[loop=15]
<li><a href="{$Field(ID,GetInfoUrl,100,1)}">{$Field(FolderName,Text,0,...,0,)}<a></li>
[/loop]
2、新建sql标签,命名为导航
查询:SELECT TOP 15 ID,FolderName,TS,TN FROM KS_Class Where tj=1 ORDER BY FolderOrder
循环:[loop=15]
<div class="title" id="menu{$AutoID}" onclick="showmenu('{$AutoID}') ">{$Field(FolderName,Text,0,...,0,)}</div>
<div id="list{$AutoID}" class="content" style="display:none">
<ul>
{SQL_二级导航({$Field(ID,Text,0,...,0,)})}
</ul>
</div>
[/loop]
3、页面调用
js源码:
<script language = JavaScript>
function showmenu(id) {
var list = document.getElementById("list"+id);
var menu = document.getElementById("menu"+id)
if (list.style.display=="none") {
document.getElementById("list"+id).style.display="block";
menu.className = "title1";
}else {
document.getElementById("list"+id).style.display="none";
menu.className = "title";
}
}
</script>
css部分:
<style type="text/css">
<!--
* {
margin:0;
padding:0;
list-style:none;
font-size:14px
}
#nav {
margin:100px;
text-align:center;
line-height:25px;
width:200px;
}
.title {
background:#336699;
color:#fff;
border-bottom:1px solid #fff;
cursor:pointer;
}
.title1 {
background:#888;
color:#000;
border-bottom:1px solid #666;
cursor:pointer;
}
.content li {
color:#336699;
background:#ddd;
border-bottom:1px solid #fff;
}
-->
</style>
html部分
<div id="nav">
{SQL_导航()}
</div>
缺点:无法实现三级导航
注意:样式可以自己修改