グローバルナビのロールオーバーについて

  • 解決済 uhokou

    (@uhokou)


    14年、 7ヶ月前

    グローバルナビ部分を該当ページとその下層ページになると、
    liのclass(class="on")を追加して該当ページと分かる様にしたいのですが、
    どの様にphpを設定すればいいのでしょうか？

    お手数ですが、どなたか教えてください。

    参考までにグローバルナビの部分はこちらです。

    <li id="gNav1"><a>/">トップ</a></li>
<li id="gNav2"><a>/work">仕事</a></li>
<li id="gNav3"><a>/qa">よくある質問</a></li>
<li id="gNav4"><a>/experience">験談</a></li>

    例
    仕事ページとその下層ページを表示した時のグローバルナビの表示。

    <li id="gNav1"><a>/">トップ</a></li>
<li id="gNav2" class="on"><a>/work">仕事</a></li>
<li id="gNav3"><a>/qa">よくある質問</a></li>
<li id="gNav4"><a>/experience">験談</a></li>

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • shokun0803

    (@shokun0803)

    14年、 7ヶ月前

    何を行いたいかにもよるのですが･･･
    ただ現在いるページをわかるようにメニューの色を変えたいとかで、例えばbodyにclass指定（<?php body_class(); ?>）が入っているのであれば、一例ですが「仕事」のページIDが5だとして

    body.post-5 li#gNav2 {
  background:#ccc;
}

    のように指定（正確なcssはテーマに合わせてください）すれば仕事のページにいるときのみcssを変更することが可能だと思います。cssを記述する順番が重要（上書き指定）ですので注意してください。

    他の用途があるならこの方法じゃだめですが･･･

    トピック投稿者 uhokou

    (@uhokou)

    14年、 7ヶ月前

    なるほど、
    <?php body_class(); ?>を利用すれば簡単にできますね！
    困っていたので非常にうれしかったです＞＜
    ありがとうございます。

    ただ、欲を言うと、グローバルナビだけではなく、
    サイドのナビゲーションでも利用できればと思っております。
    そうすると、ページが追加される度にcssに追記しなければならないので
    他に、違った方法があれば教えていただきたいです。

    宜しくお願いいたします。

    shokun0803

    (@shokun0803)

    14年、 7ヶ月前

    ただ、欲を言うと、グローバルナビだけではなく、
    サイドのナビゲーションでも利用できればと思っております。

    サイドのナビゲーションが何を指しているのかわかりかねますが、ページリストなどをサイドバーなどで表示しているなどであれば、該当の表示用コードを改変する方が早いと思います。

    ウィジェットなどでサイドバーを構築しているとなると少々改造が面倒になりますが、使用しているウィジェットをそっくりコピーしたウィジェットプラグインなどに作り変えてしまえばウィジェットの利便性と自作の改変性が両立するのかもしれませんね。

    いずれにしても該当のコードありきの回答になるので、個別に質問を立ち上げる方がよいかもしれません。1つのスレッドで複数のコードを書いて質問するとあとで混乱しますしね;)

    KKT

    (@kvex)

    14年、 7ヶ月前

    自分でリストしているのなら別ですが、WPの機能でメニューを作っているならば、current_page_item
    などというクラスが付くので、cssだけで済むと思いますがどうでしょう？

    トピック投稿者 uhokou

    (@uhokou)

    14年、 7ヶ月前

    >>shokun0803
    いずれにしても該当のコードありきの回答になるので、個別に質問を立ち上げる方がよいかもしれません。1つのスレッドで複数のコードを書いて質問するとあとで混乱しますしね;)

    はい。以後質問の仕方を気をつけます。
    アドバイスありがとうございました。

    >>kvex
    current_page_itemというものを初めて知りました。
    勉強不足でした＞＜
    これで解決できそうです！
    どうもありがとうございました。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「グローバルナビのロールオーバーについて」には新たに返信することはできません。