[JS]jQuery を利用して、現在のページのメニューデザインを変更する方法
この記事は around design 様の記事を参考にさせていただきました。
jQuery を利用して、特定の要素にクラスを付けたり外したりする処理です。
例えば、グローバルメニューやサイドメニューなどをクリックした時、現在のページ（カレントページ）であるメニューのデザインを変更して、「今このページにいます」という見せ方ができるようになります。
Javascript の記述例
<head> 内にjquery ファイルを設置し、以下のようなjavascript のコードを記述します。<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#nav li a').each(function(){
var $href = $(this).attr('href');
if(location.href.match($href)) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
</script>
今回の例では、現在のページのメニューに class="active" のクラスを付ける事で、メニューが選択された状態（active な状態）とそうでない状態とでデザインを変えます。CSS の記述例
以下のCSS のサンプルですが、グローバルメニューを想定してリストを横並びにしています。メニューが選択された状態は
#nav li a.activeで、選択されていない状態は #nav li a で、それぞれ背景色や文字色を変更しています。#nav {
margin:0 auto;
text-align:center
}
#nav li {
width:20%;
display:inline-block;
/display:inline;
/zoom:1;
vertical-align:middle;
}
#nav li a {
display:block;
width:100%;
color:#000;
text-decoration:none;
padding:5px 0
background:#fff;
border:1px solid #ccc;
}
#nav li a:hover {
color:#fff;
background:#dd0000;
}
#nav li a.active {
color:#fff;
background:#dd0000;
}
HTML の記述例
最後に HTML ファイルのサンプルです。<ul id="nav"> <li><a href="index.html">トップページ</a></li> <li><a href="company.html">会社概要</a></li> <li><a href="service.html">製品紹介</a></li> <li><a href="work.html">導入事例</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul>
実際にどのような見え方になるのか？については、以下のページにサンプルを用意しましたのでご覧下さい。
現在のページのメニューデザインを変更する デモ
このカテゴリとの関連記事
[JS]SimpleModal と jQuery Cookie による認証ボックスの実装方法
[JS]jQuery を利用して <table> の <tr> にリンク先を指定できるようにする方法
[JS]jQuery の animate によるアニメーションのサンプルまとめ
[JS]「jQuery Text Resizer」と「jQuery Cookie」を利用して文字サイズを大中小と変更する- [JS]jQuery で画像をランダムに出力する方法
- [JS]背景画像にスライドやフェードの動きを付与できる「jQuery.BgSwitcher」
- [JS]jQuery とCSS で画像をトリミングしてセンタリング表示する方法
- [JS]文字量に応じてテキストエリアが自動でリサイズするjQueryプラグイン「jQuery Autosize」
[JS]Pinterestっぽいサイトを作れるjQueryプラグイン「jQuery Masonry」
[JS]Pinterestのようにタイル状にコンテンツを配置できるjavascript「The Wookmark jQuery plugin」
[JS]IE下位バージョンでも透過画像を使えるようにするjQueryプラグイン「jquery.belatedPNG」- [JS]jQuery の fadeIn() でページ読込み時にフェードインで要素を表示する
[JS]画面の右や左から、ダイナミックにメニューをスライド表示できるjQueryプラグイン「PageSlide」
[JS]IE7、8でも background-size:contain が利用できるjQueryプラグイン「jquery.backgroundSize」- [JS]jQuery のアラートで「OK」ボタンクリック時に指定のページへ遷移させる方法
[JS]jQuery と jQueryUI を利用したお手軽Datepicker の実装方法
[JS]背景全体に画像を固定させ、ランダム表示もできるjQuery プラグイン「jQuery Backstretch」
[JS]複数の要素を縦にも横にも「ふわふわ」動かすjQueryプラグイン「jqFloat」- [CSS]CSS で円形、三角形、台形、星形 などを表現する方法のまとめ
[JS]フォームのバリデーションと入力ヒントの表示も可能なjQueryプラグイン「JQuery Form Validation And Hints」
zenback読み込み中です。
コメント