menu

Web制作のTipsとかアレコレ。

ローカルナビにcurrentやactiveクラスを付加するスクリプト(ローカルナビ用)

2013.11.10

今回はローカルナビなど、同一ディレクトリの同一階層内にある場合のみ使える感じの改変です。

元ネタは、よく見るような、現在のURLをスプリットして、メニュー内のhrefからリンクを抜き出して一致してたらactiveクラスを付与っていう、あれです。

jQueryを使っているのですが、.pop()という便利なのんがあるのを初めて知ったので使ってみたってのが実情ですがw
で、実はこれ、前回ポストのロールオーバーネタの上流にあったスクリプトなんですね。
このスクリプトでcurrentクラスを付加するんじゃなくて画像のファイル名を書き換えてるのは、そういう事情です。

$(document).ready(function() {
    var activeUrl = location.pathname.split("/").pop();
    if (activeUrl == ""){
    	activeUrl = "index.html";
    }

    navList = $(".side-nav").find("a");
    navList.each(function(){
    //リンク内のファイル名を取得
	 var fileName = $(this).attr("href").split("/").pop();
        if( fileName == activeUrl ) {
          // リンク用の画像名を取り出す
             var imgName = $(this).children("img").attr('src');
          // _onを付加
             newImgName = imgName.replace(".png", "_on.png");
          //alert ( newImgName );
            $(this).children("img").attr("src", newImgName);
            return false;
        };
   });
});

activeUrl :これは現在地のURLを”/(スラッシュ)”で分割して出来た配列の最後の要素を取り出したもの。
で、これは通常ファイル名になるんですけど、http://hogehoge.com/みたいになると空要素になります。
上のブロックはこのケースで自動的にindex.htmlを付加するようにしてます。
制作するサイトによってindex.phpやらなんやらに変化するとかパターンがいろいろで使えないとか、いろいろ考えられますが。

それにしても・・・jQueryではこの処理っていらなかったような記憶があるんだよなぁ…でもこれを書かなかったらちゃんと動かなかったんだよな・・・。とりあえず調べるのが面倒だったので条件分岐を書きました(苦)

で、下のブロックの前半は説明するまでもありませんな。

後半、相変わらずのpng決め打ちです。そしていかなるパス内にもpng画像以外で[.png]という文字列は出現しないという(まあ普通はしないでしょう)、それも決め打ち。

なお、画像入れかえじゃなくて、まっとうに.activeとか付加する場合は適当に
$(this).addClass(“active”) とかやって下さいませ。

とにかく、アピールしたいのは、.pop() 便利。ローカルマシンの開発環境だろうがローカルサーバーだろうがテストサーバーだろうが本番環境だろうが、一定です。変えなくていい。

そのかわり、少なくともこのままではドキュメントのファイル名しか吟味しないので、絶対同一ディレクトリの特定の階層内に限定されたナビゲーション専用ってわけです。

まあ、もう少し拡張したらもっと便利になりそうなんですが、それはまたの機会に。

Comments

please leave your comment...

▲ Page Top