メニューの現在ページハイライトについて

  • 解決済 poem

    (@poem)


    16年、 7ヶ月前

    wordpress2.7.1でオリジナルテーマ作ってます。

    グローバルメニューを画像で表示（CSS Sprites）してますが、
    マウスオーバー時と現在いるページをハイライト表示したいと思っています。

    マウスオーバー時のハイライトはできたのですが、
    「現在ページのハイライト」ができません。
    もしかするとものすごい初歩的なことかもしれませんが
    わかる方いらっしゃったら教えてください。

    XHTMLソースはこんな感じです。

    <div id=”gnav”>

      <?php wp_list_pages(‘title_li=&depth=1’); ?>
      <?php wp_list_cats(”); ?>

    </div><!– #gnav –>

    ※「ページ」で作ったのが4つと「投稿」（ブログ）が1つ並びます。

    CSSはこんなです。

    #gnav li a {
    text-indent: -10000em;
    background: url(images/gnav_sprite.png) no-repeat top left;
    }

    #gnav .page-item-17 a:link,
    #gnav .page-item-17 a:visited
    { background-position: 0 -30px; }

    #gnav .page-item-5 a:link,
    #gnav .page-item-5 a:visited
    { background-position: 0 -170px; }

    #gnav .page-item-8 a:link,
    #gnav .page-item-8 a:visited
    { background-position: 0 -310px; }

    #gnav .page-item-10 a:link,
    #gnav .page-item-10 a:visited
    { background-position: 0 -450px; }

    #gnav .cat-item-4 a:link,
    #gnav .cat-item-4 a:visited
    { background-position: 0 -590px; }

    #gnav .page-item-17 a:hover,
    #gnav .page-item-17 a:active
    { background-position: 0 -100px; }

    #gnav .page-item-5 a:hover,
    #gnav .page-item-5 a:active
    { background-position: 0 -240px; }

    #gnav .page-item-8 a:hover,
    #gnav .page-item-8 a:active
    { background-position: 0 -380px; }

    #gnav .page-item-10 a:hover,
    #gnav .page-item-10 a:active
    { background-position: 0 -520px; }

    #gnav .cat-item-4 a:hover,
    #gnav .cat-item-4 a:active
    { background-position: 0 -660px; }

    現在ページに「current_page_item」というクラスが
    つくので、それを利用したいんですが、どうやってもうまくいきません。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック投稿者 poem

    (@poem)

    16年、 7ヶ月前

    http://wordpress.dk/forum/topic/current_page_item-og-css-sprites

    このページに行き着いて自己解決しました。

    正解はこれでした。

    #gnav .page-item-17 a:hover,
#gnav .page-item-17 a:active,
#gnav .page-item-17.current_page_item a
{ background-position: 0 -100px; }

#gnav .page-item-5 a:hover,
#gnav .page-item-5 a:active,
#gnav .page-item-5.current_page_item a
{ background-position: 0 -240px; }

#gnav .page-item-8 a:hover,
#gnav .page-item-8 a:active,
#gnav .page-item-8.current_page_item a
{ background-position: 0 -380px; }

#gnav .page-item-10 a:hover,
#gnav .page-item-10 a:active,
#gnav .page-item-10.current_page_item a
{ background-position: 0 -520px; } 

#gnav .cat-item-4  a:hover,
#gnav .cat-item-4  a:active,
#gnav .cat-item-4.current-cat a
{ background-position: 0 -660px; }
1件の返信を表示中 - 1 - 1件目 (全1件中)

トピック「メニューの現在ページハイライトについて」には新たに返信することはできません。