|
主题:[分享]好看的企业分类二级伸缩菜单,喜欢的直接拿去用吧 [收藏主题] | 转到: |
效果如下图:
实现方法, 首先进入后台---标签---自定义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下载如下: 以下内容只有回复后才可以浏览,请先登录! |
|
支持(9) | 反对(10) 顶端 底部 |
支持(10) | 反对(9) 顶端 底部 |
支持(6) | 反对(1) 顶端 底部 |
支持(1) | 反对(1) 顶端 底部 |
<a href=http://hxxy.edu.cn:81/shangmao>厦门华厦职业学院</a><br>
商贸教学部 - 欢迎交换链接<br> | |
支持(0) | 反对(0) 顶端 底部 |
淘宝店铺分类导航网站 - 优客网:http://www.yoke88.com | |
支持(0) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
<上一主题 | 下一主题 > |