帰ってきたNucleus

ナビゲーションをアクティブにする

現在アクセスしているページのボタンやリンクの色やデザインを変えて現在地がわかりやすいようにします。この方法はナビゲーションの項目が固定の場合です。

アクティブなナビゲーション

ブログの場合

現在のブログIDを判断して「class="active"」を追加します。

<ul id="navi">
	<li<%if(blogsetting,bumber,1)%> class="active"<%endif%>><a href="#">ブログ1</a></li>
	<li<%if(blogsetting,bumber,2)%> class="active"<%endif%>><a href="#">ブログ2</a></li>
	<li<%if(blogsetting,bumber,3)%> class="active"<%endif%>><a href="#">ブログ3</a></li>
	<li<%if(blogsetting,bumber,4)%> class="active"<%endif%>><a href="#">ブログ4</a></li>
	<li<%if(blogsetting,bumber,5)%> class="active"<%endif%>><a href="#">ブログ5</a></li>
</ul>

カテゴリーの場合

現在のカテゴリーIDを判断して「class="active"」を追加します。

<ul id="navi">
	<li<%if(category,catid,1)%> class="active"<%endif%>><a href="#">カテゴリー1</a></li>
	<li<%if(category,catid,2)%> class="active"<%endif%>><a href="#">カテゴリー2</a></li>
	<li<%if(category,catid,3)%> class="active"<%endif%>><a href="#">カテゴリー3</a></li>
	<li<%if(category,catid,4)%> class="active"<%endif%>><a href="#">カテゴリー4</a></li>
	<li<%if(category,catid,5)%> class="active"<%endif%>><a href="#">カテゴリー5</a></li>
</ul>

画像の場合

画像ナビゲーションの場合はファイル名を置き換えます。

<ul id="navi">
	<li><a href="#"><img src="./images/b_blog1_<%if(blogsetting,bnumber,1)%>active<%else%>off<%endif%>.png" alt="ブログ1"></a></li>
	<li><a href="#"><img src="./images/b_blog2_<%if(blogsetting,bnumber,2)%>active<%else%>off<%endif%>.png" alt="ブログ2"></a></li>
	<li><a href="#"><img src="./images/b_blog3_<%if(blogsetting,bnumber,3)%>active<%else%>off<%endif%>.png" alt="ブログ3"></a></li>
	<li><a href="#"><img src="./images/b_blog4_<%if(blogsetting,bnumber,4)%>active<%else%>off<%endif%>.png" alt="ブログ4"></a></li>
	<li><a href="#"><img src="./images/b_blog5_<%if(blogsetting,bnumber,5)%>active<%else%>off<%endif%>.png" alt="ブログ5"></a></li>
</ul>