做网站时用的到的简单的栏目导航()

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;
      }   

效果：