*

Javascriptでグローバルナビをカレント表示させたい

公開日: : ウェブデザイン

Dreamweaverのテンプレートを使ってホームページを作成する事もしばしばあるのですが、
メインメニューにCSSのクラスを追加してカレント表示させる方法についていつも忘れてしまいがちなので備忘録を兼ねてブログにメモ。

1.まずjQueryは絶対必要なので読み込ませておく。
2.カレントページ判定用のJavascriptをHTMLヘッダー内に書いておく。

<script>
$(function(){
    var id = $("body").attr("id");
    $("#gnav ul li."+id).addClass("current");
});
</script>

3.次にHTMLのbodyタグのIDにを入れる。
例:

<body id="hoge">

4.メインメニューのリストにはbodyタグに入れたIDと同名のClassを入れておく。

<li class="hoge">ホゲ</li>

5.後はCSSに「.current」クラスを書いて装飾しておけばオッケー。

これだと階層化したコンテンツにもメニューをカレント表示させたい場合でも
メニューに書いたクラスと同じ名前のIDをBODYに付けておくだけで便利。

以上、自分用のメモでした。

関連記事

gb

グッドバイヤー様のホームページをリニューアルさせて頂きました

東京御徒町を拠点とする宝石・ダイヤ・腕時計・ブランド品の高額査定、高額買取で評判のグッドバイヤー様の

記事を読む

yjimage

Illustratorをウェブデザインカンプ制作ツールとして使う

ウェブデザインをする際に「Illustratorは向いてないよね!やっぱりFireworksでしょ!

記事を読む

行政書士 李法務事務所

行政書士 李法務事務所様のウェブサイトを制作しました。

神戸を拠点に活動されている行政書士 李法務事務所様のホームページを制作させていただきました。

記事を読む

monnalisa_logo

神戸三宮のチーズバー「モナリザ」

神戸三宮のチーズバー「モナリザ」様のホームページを制作させて頂きました。 様々

記事を読む

1623332_597831230299507_321041721_n

ウェブ担当者通信のご紹介!

ウェブ担当者通信 ひとりで頑張るWebディレクター応援サイト 今日はfaco高嶋も講師を務めさ

記事を読む

SEO対策

「SEO対策プラン」のご案内

facoではホームページ制作とその運営管理経験を活かしSEO対策に特化したプランをご用意しま

記事を読む

ホームページ制作10万円パック

期間限定!「ホームページ制作10万円パック」

ホームページ制作10万円パック[/caption] 10万円で綺麗なデザインとSEO対策を考

記事を読む

no image

facoホームページをリニューアルしました

ホームページ制作の流れや大まかな費用などこれまで問い合わせの多かった事項を掲載してコンテンツを整理し

記事を読む

no image

WEB上でのカーニングが出来るjQueryプラグイン

ホームページを作成するにあたって以前よりフォントのカーニングを自動調整出来ればと思っていたんですがj

記事を読む

no image

軽いPNG画像を作りたい!

数年前はホームページ制作する際に神経を使っていた画像のファイルサイズ。 画像のファイルサイズが大き

記事を読む

no image
Google パンダアップデート 4.0

4月後半よりGoogle検索順位の変動が激しいなと思っていましたがやは

SEO対策
「SEO対策プラン」のご案内

facoではホームページ制作とその運営管理経験を活かしSEO対

10321012_721582631213354_6920374301481207054_o
新長田 案山子 ランチ&お弁当 B5チラシ

以前からお世話になっております神戸新長田にある 居酒屋 案山

no image
Javascriptでグローバルナビをカレント表示させたい

Dreamweaverのテンプレートを使ってホームページを作成する事も

monnalisa_logo
神戸三宮のチーズバー「モナリザ」

神戸三宮のチーズバー「モナリザ」様のホームページを制作

→もっと見る

PAGE TOP ↑