效果如下图:





实现方法,

首先进入后台---标签---自定义SQL标签---企业分类

把这二个标签稍做修改如下,如果没有,可以自己新建:



企业黄页分类外



SQL语句:

select ClassName,ID,OrderID from KS_EnterPriseClass where parentid=0 order by orderid,id



循环体:

<div class="boxqyhy">

<h2>企业黄页</h2>

<ul class="menuqyhy">

[loop=30]

<li class="level1">

<a href="#">{$Field(ClassName,Text,0,...,0,)}</a>

<ul class="level2">

{SQL_企业黄页分类内({$Field(ID,GetInfoUrl,0,2)})}

</ul>

</li>

[/loop]

</ul>

</div>



企业黄页分类内



SQL语句:

select top 30 ClassName,ID,OrderID,ParentID from KS_EnterPriseClass where parentid={$Param(0)} order by orderid,id



循环体:

[loop=30]

<li>

<a href="/company/list.asp?id={$Field(ID,GetInfoUrl,0,2)}">{$Field(ClassName,Text,0,...,0,)}</a>

</li>

[/loop]



然后修改相应CSS的模板:



/* 企业黄页 */



.boxqyhy{width:204px;height:100%;margin-top:10px;height:100%;background:url(../qyhy/images/menuboxbg.gif) repeat-y left top;}

.boxqyhy ul{list-style:none;text-align:left;}

.boxqyhy h2{width:204px;margin:0 auto;height:33px;background:#FFF url(../qyhy/images/menuhead.gif) no-repeat left top;text-align:center;font-size:18px; font-weight:bold; color:#FFF;}





.menuqyhy li.level1 a{display:block;line-height:31px;height:31px;padding-left:40px; font-size:12px;color:#fff;background:url(../qyhy/images/menubg.gif) no-repeat left top;}

.menuqyhy li.level1 a.hove{background-position:left -31px;}

.menuqyhy li.level1 a.cur{background-position:left -62px;}





.menuqyhy li ul{padding-left:10px;overflow:hidden;}

.menuqyhy li ul.level2{width:180px;display:none;}

.menuqyhy li ul.level2 li{height:26px;line-height:26px;}

.menuqyhy li ul.level2 li a{display:block;height:26px;line-height:26px;background:#E7E3E7 url(../qyhy/images/t1.gif) no-repeat 30px center;padding-left:50px;color:#42556B;border-top:1px #B8C2CB solid;overflow:hidden;}

.menuqyhy li ul.level2 li a.hove1{background:#F6F6F6 url(../qyhy/images/t2.gif) no-repeat 30px center;}



/* 企业黄页 */



最后在你要使用的页面调用JS代码和加入SQL标签:



{SQL_企业黄页分类外()}



<script type="text/javascript" src="{$GetInstallDir}qyhy/js/menu.js"></script>



好了,大家喜欢的话就拿去用吧,可以自己再修改做更多的美化



相关图片和JS下载如下: