HonestyWorks TechNote

概要

WebアプリケーションやWebサイトを構築するときにヘッダーやサイドバー領域などにメニューやタブを（アコーディオンや短冊型など)配置するデザインが一般的かと思います。
このようなデザインでは現在表示されているページのメニューには class=”active” などと指定してフォーカスを当てるようになっていることが多いですね。
全てのページをべたで静的HTMLとして作る場合はいいですがメニューやサイドバーを共通部品としてSSIやサーバーサイドのテンプレートエンジンでインクルードしている場合はどうやってメニューにフォーカスを当てようか思案のしどころです。

このような場面で使えそうなアイディアを紹介します。

アイディア

jqueryを使ってonload時にメニューにフォーカスを当てる(classを追加する)ようにします。
まず、メニューのフォーカスを当てたい要素には menu_ではじまるidをつけます。
つぎに、各ページのbodyのクラス属性に activeにしたいメニューのid名を列挙します。(メニューが多段構造になっている場合を考慮。）
このようにすることで全ページを共通処理できます。

jqueryコードサンプル

jQuery(function($){
	// メニューアクティブ
    var classes = $('body').attr('class');
    if (classes) {
        var class_ar = classes.split(' ');
        for (i=0; i<class_ar.length; i++) {
            if (class_ar[i].match(/^menu_/)) {
                var obj = $("#"+class_ar[i]);
                obj.addClass("active");
            }
        }
    }
});