サポート » 使い方全般 » ナビゲーションをカレント表示する方法

  • 解決済 chatm

    (@chatm)


    サイドメニューをcategory-temp.phpに入れてレイアウトしていますが、
    ナビゲーションをカレント表示する方法としてjsを設定しています。

    しかし、子カテゴリーまではちゃんとカレント表示できるのですが、
    孫カテゴリーでは、子カテゴリー全部がアクティブ表示になってしまいます。
    jsの条件分岐で、孫カテゴリーの現在表示しているページだけカレント表示したいのですが
    何か良い方法があれば教えて下さい。

    js

    // サイドメニュー css「.current」がアクティブ設定
    $(function(){
    	$(".side .category li a").each(function(){
    		if(this.href == location.href) {
    			$(this).parents("li").addClass("current");
    		}
    	});
    });
    

    html

    <aside class="side">
        
        <div class="category">
        
        <ul>
        <li><a href="#">子ページ</a></li>
        <li><a href="#">子ページ</a></li>
        <li>子ページ
        <ul>
        <li><a href="#">孫ページ</a></li>
        <li><a href="#">孫ページ</a></li>
        <li><a href="#">孫ページ</a></li>
        </ul>
    	</li>
        <li><a href="#">子ページ</a></li>
        </ul>
        </div><!-- /category -->
    </aside>
    
    css
    

    /* activ / カレント表示 */
    .side .category li.current a{background-color: #EEE;}
    .side .category li.current a:after{ border-top: 1px solid #EC1A0F; border-right: 1px solid #EC1A0F;}`

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは

    jsの条件分岐で、孫カテゴリーの現在表示しているページだけカレント表示したいのですが

    js はそのままでいいのではないでしょうか?
    CSS を下記のように変更するのはどうでしょうか。

    .side .category li.current a {}
    .side .category li.current a:after {}

    .side .category li.current > a {}
    .side .category li.current > a:after {}
    トピック投稿者 chatm

    (@chatm)

    なんてことでしょう!できました。魔法のようですね。
    こんな単純な事だったなんて・・・
    教えていただきまして本当にありがとうございます!

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「ナビゲーションをカレント表示する方法」には新たに返信することはできません。