ナビゲーションの覚書 : WordPress

Tweet

Pocket

WordPressで1つのカスタムページテンプレート(page.php)を使ったナビゲーション。
(1) 表示ページのナビゲーション項目はアクティブ画像。
2) 表示ページ以外のナビゲーション項目は通常画像。
3) マウスオーバー時は(1)と同様のアクティブ画像

<ul id="navi">
    <li id="nav1"><a href="---">項目1</li>
    <li id="nav2"><a href="---">項目2</li>
</ul>

1.　ナビゲーション項目ごとに画像は1つ。
li#navi1 {
background: url(navi1.gif) no-repeat;
}
li#navi2 {
background: url(navi2.gif) no-repeat;
}
2. マウスオーバーのアクティグ画像はCSSで画像を移動。
#navi li:hover {
background-position: -○○px -×× !important; // 横に移動 ○○を変更 縦に移動 ××を移動
text-decoration: none;
}
3. 表示ページのアクティブ画像はマウスオーバーと同様にCSSで画像を移動。
表示ページの判定をJavaScriptで判定し、表示ページの場合はCSSを変更する。
JavaScriptによる処理(jQuery利用)
$(function()
{
var url = location.href;
var arr = url.split(“/”);
var lastpath = arr[arr.length-1];
if (lastpath == “navi1”)
{
var elem = $(“#navi1”);
elem.css(“background-position”, “-○○px -××px”)
elem.css(“text-decoration”, “none”);
}
else {
var elem = $(“#navi2”);
elem.css(“background-position”, “-○○px -××px”)
elem.css(“text-decoration”, “none”);
}
});