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

投稿日 : 2009年3月2日 | 更新日 : 2010年09月16日 前のページへ戻る

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

WordPress | 固定リンク | Comments (0)

関連記事

関連記事は見つかりませんでした。
検索ボックスからの検索もお試しください。

このページの上へ移動

このページの上へ