做網站時用的到的簡單的欄目導航()
phpcms多個欄目catid in(9,10,11)可以修改id
排序order by listorder ASC/DESC
{if}...{/if}爲判斷點擊爲欄目
下面是一種例子:
<div style="width:1000px;height:45px;background:#067300" 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;
}
效果: