phpcms V9多級導航調用+當前欄目高亮顯示示范代碼
使用phpcms V9制作頭部文件header.html的導航時,循環調用一級和二級以及更多級別的欄目,有時需要同時顯示當前欄目的子欄目(比如下拉菜單),還要高亮顯示當前欄目時,就可以采用如下代碼:
<div class="nav">
<ul>
<li><a href="{siteurl($siteid)}" {if !$catid} class="hover"{/if}>首頁</a></li>
{pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorder ASC"}{loop $data $k $r}
<li><a href="{$r['url']}" {if $catid==$r[catid] || $top_parentid==$r[catid]} class="hover"{/if} >{$r[catname]}</a> {pc:content action="category" catid="$k" num="15" siteid="$siteid" order="listorder ASC"}
<ul>
{loop $data $r}
<li><a href="{$r['url']}">{$r[catname]}</a></li>
{/loop}
</ul>
{/pc}</li>
{/loop}{/pc}
</ul>
</div>
以下配套的css代碼僅供參考!效果如圖:
.nav { width: 960px; height: 30px; margin: 0 auto; line-height: 30px; }
.nav ul li { float: left; width: 70px; text-align: center; cursor: pointer; }
.nav ul li a { color: #fff; display: block; text-decoration: none; }
.nav ul li:hover { background: #d9e4f9; }
.nav ul li:hover a { color: #000; }
.nav ul li a:hover { color: #f00; background: #d9e4f9; }
.nav ul li ul { display: none; position: absolute; background: #d9e4f9; z-index: 999; }
.nav ul li ul li { float: none; margin-right: 0; }
.nav ul li:hover ul { display: block; }
.nav ul li:hover ul li a { color: #000; }
.nav ul li ul li a:hover { color: #f00; background: #fff; }
.nav ul li .hover { background: #fff; color: #000; }