2013.08.13
グローバルメニューをssiなど、外部ファイルで管理したい時があるじゃないですか。
さらに表示してるページに対応して、メニューの状態を変えたいときあるじゃないですか。
例えば「会社情報」のページの時は、メニューにある「会社情報」だけ色を変えておきたいとか・・・
見てくれてる人に「今はこのページ開いてますよ～」となんとなくわかってもらえるようにしたいときなどにやりますよね。
メニューを1ファイルで管理している関係上、ソースに直接classやスタイルを書いておくことはできないので、そういう時はページを読み込んだあとに、javascriptでclassを追加してしまうのが良いかと思います。
■ 結構重要
サイト設計の段階である程度カテゴリーに対応したID的なものを考えておきます。
例）
会社情報・・・・・・About
製品情報・・・・・・Products
など
これをHTMLを手書きするとき、またはCMSで吐き出すときに
<body class="About">
と、書かれるようにします。
（bodyタグじゃなくても問題ないんですけどね・・・）
■ cssの準備
cssでメニューを作るときは、
・ただ単に表示されている状態
・マウスオーバーの状態
・今見ているページをわかりやすくする状態
そんな感じで作っておくことが多いですよね？
li,a {
display:block;
width:200px;
height:30px;
}
li .gmenuAbout a {
background:url(../img/menu_01.gif) no-repeat 0 0;
}
li .gmenuProducts a {
background:url(../img/menu_02.gif) no-repeat 0 0;
}
li .gmenuAbout a:hover,
li .gmenuProducts a:hover,
li .gmenuAbout a.active,
li .gmenuProducts a.active {
background-position:0 -30px;
}
「a.active」というのが開いているページの状態です。
■ jQueryを使ってます
head内であらかじめ読み込んでおいてください。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
メニューのhtmlはこんなかんじでしょうか？
<ul>
<li class="gmenuAbout"><la>会社情報<l/a></li>
<li class="gmenuProducts"><la>製品情報<l/a></li>
</ul>
■ javascriptはこれだけです
$(document).ready(function(){
var className = $("body").attr("class");
if (className) {
var activeNavi = "li." + "gmenu" + className + " > a";
$(activeNavi).addClass("active");
}
});
ようは、bodyに付けられたclassから表示されているページを判別し、対応したメニュー（今回はliタグ）の中にあるaタグのclassに「.active」を追加する、という事です。
あまり難しいことはしていないのでメニューの作り方によっても対応しやすいと思いますので、もし使えそうでしたら是非・・・
さらに表示してるページに対応して、メニューの状態を変えたいときあるじゃないですか。
例えば「会社情報」のページの時は、メニューにある「会社情報」だけ色を変えておきたいとか・・・
見てくれてる人に「今はこのページ開いてますよ～」となんとなくわかってもらえるようにしたいときなどにやりますよね。
メニューを1ファイルで管理している関係上、ソースに直接classやスタイルを書いておくことはできないので、そういう時はページを読み込んだあとに、javascriptでclassを追加してしまうのが良いかと思います。
■ 結構重要
サイト設計の段階である程度カテゴリーに対応したID的なものを考えておきます。
例）
会社情報・・・・・・About
製品情報・・・・・・Products
など
これをHTMLを手書きするとき、またはCMSで吐き出すときに
<body class="About">
と、書かれるようにします。
（bodyタグじゃなくても問題ないんですけどね・・・）
■ cssの準備
cssでメニューを作るときは、
・ただ単に表示されている状態
・マウスオーバーの状態
・今見ているページをわかりやすくする状態
そんな感じで作っておくことが多いですよね？
li,a {
display:block;
width:200px;
height:30px;
}
li .gmenuAbout a {
background:url(../img/menu_01.gif) no-repeat 0 0;
}
li .gmenuProducts a {
background:url(../img/menu_02.gif) no-repeat 0 0;
}
li .gmenuAbout a:hover,
li .gmenuProducts a:hover,
li .gmenuAbout a.active,
li .gmenuProducts a.active {
background-position:0 -30px;
}
「a.active」というのが開いているページの状態です。
■ jQueryを使ってます
head内であらかじめ読み込んでおいてください。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
メニューのhtmlはこんなかんじでしょうか？
<ul>
<li class="gmenuAbout"><la>会社情報<l/a></li>
<li class="gmenuProducts"><la>製品情報<l/a></li>
</ul>
■ javascriptはこれだけです
$(document).ready(function(){
var className = $("body").attr("class");
if (className) {
var activeNavi = "li." + "gmenu" + className + " > a";
$(activeNavi).addClass("active");
}
});
ようは、bodyに付けられたclassから表示されているページを判別し、対応したメニュー（今回はliタグ）の中にあるaタグのclassに「.active」を追加する、という事です。
あまり難しいことはしていないのでメニューの作り方によっても対応しやすいと思いますので、もし使えそうでしたら是非・・・
「ページによってメニューの表示を変える」ようにしたく、こちらのページにたどり着き、ローカルではどうにかできたのですが、サーバーにアップしたところ動かずに四苦八苦しております。
head内には
cssを読み込ませた後に、jQueryの読み込みをさせているのですが、動きません。
javascriptの書いた位置ではないかとか、いろいろ試したのですが、どうにもできずご迷惑かと思いつつ、ご教授いただければありがたいと思い、コメント欄に書かせていただきました。
お目に止めていただけましたら、アドバイスをいただけると幸いです。よろしくお願いします。
コメントを書かせていただいた後に、jQueryの読み込みをhttps://に変更したところ、実行することができました。
私のサーバーの問題なのか不明ですがどうにか解決しました。ご迷惑をおかけいしました。
Negishi様
コメントありがとうございます。
お力になれませんでしたが、解決できたようでなによりです。
ページのアドレスが https:// のとき、http:// のファイルをブロックしてしまうことがあるのでその関係かもしれませんね。