做网站时用的到的简单的栏目导航()
PHPcms多个栏目catid in(9,10,11)可以修改id
排序order by listorder ASC/DESC
{if}...{/if}为判断点击为栏目
下面是一种例子
html:
<div style="width:1000px;height:45px;" class="dh"> <ul> <li class="navb"><a href="{siteurl($siteid)}" {if !$catid}class="hover"{/if} class="nhome">网站首页</a></li> {pc:get sql="select * from v9_category where catid in(9,10,17,11,12,13,14,15) order by listorder ASC" siteid="$siteid" return="data"} {loop $data $r} <li class="navb"><a href="{$r[url]}" {if $catid == $r[catid] || $top_parentid == $r[catid]} class="hover"{/if} class="nabout">{$r[catname]}</a></li> {/loop} {/pc} </ul> </div>
css:
.navb{float: left; height: 38px; line-height: 38px; margin-top: 4px; width: 99px;} .nabout{color:#fff; font-size:14px; display:inline-block; width:99px; text-align:center; text-decoration:none; height:38px;line-height:38px; font-weight:bold; } .nabout:hover{width:99px; color:#067300; background:url(navb.jpg) repeat-x; display:inline-block; height:45px;line-height:38px; text-decoration:none; margin:0px; font-weight:bold;} .nhome{width:99px; color:#fff; /*background:url(navb.jpg) repeat-x;*/ display:inline-block; height:45px;line-height:38px; margin:0px; text-decoration:none; font-size:14px;font-weight:bold; } .nhome:hover{text-decoration:none; display:inline-block; width:99px; color:#067300; font-size:14px; background:url(navb.jpg) repeat-x; height:45px; line-height:38px;font-weight:bold; } .hover{width:99px; color:#067300; background:url(navb.jpg) repeat-x; display:inline-block; height:45px;line-height:38px; text-decoration:none; margin:0px; font-weight:bold; font-size:14px;} .hover:hover{text-decoration:none; display:inline-block; width:99px; color:#067300; font-size:14px; background:url(navb.jpg) repeat-x; height:45px; line-height:38px;font-weight:bold; }
效果: