ナビゲーションのでのボタン表示について

  • 解決済 the_zombis

    (@the_zombis)


    13年、 4ヶ月前

    はじめまして。今回初めて、投稿させていただきます。wordpressかなりの初心者です。
    一応調べたのですが分からずじまいで、困っているのでご教授していただけると助かります。

    今、wordpressを利用したサイトを作成しているのですが、グローバルナビゲーションをカスタムメニューで作成していてwordpressが書き出すクラス名を利用して背景画像でロールオーバー・ロールアウトの設定をしています。
    ただそのページを表示した時は、リンクを消してロールオーバー時の画像を表示したままにしたいのです。どうやらカスタムメニューを使用するとそのページを表示していてもリンクされてるので。。

    もしリンクを消すのが難しいのであればカレント表示は最低限できるようにしたいです。

    普段サイトを作る時はDreamWeaverのテンプレートタグでそのページを表示している時は条件分岐など使えるんですが、wordressのカスタムメニューだと分からないのです。

    言葉足らずかもしれませんが、ご教授お願いします。

    このグローバルナビゲーションは下記のように出力しています。
    header.php

    <div id="gnavi">
<?php wp_nav_menu(array("theme_location"=>"navmenu")); ?>
</div>

    style.css

    div#gnavi ul li#menu-item-148 a{background:url(../images/common/subnavi_company.gif) no-repeat;}

div#gnavi ul li#menu-item-148 a:hover{background:url(../images/common/subnavi_company_over.gif) no-repeat;}

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

    (@y_yu)

    13年、 4ヶ月前

    はじめまして。

    WP3.2、Twentyelevenでしか見てませんが、現在のページのliには「current-menu-item」や「current_page_item」などのクラスが自動的に付いていると思うので、背景画像の変更に使えるのではないでしょうか。

    リンクの削除はいろいろやり方があると思いますが、今考えた方法を書いておきますので参考程度に見てください。

    1、CSSでカーソルを通常のものにする

    #gnavi .current_menu_item a,
#gnavi .current_page_item a{
	cursor:default;
}

    2、Javascript(jQuery使用)でクリックを無効にする

    jQuery(function($){
	$('#gnavi .current_menu_item a, #gnavi .current_page_item a').click(
		function(){
			return false;
		}
	);
});

    今環境が無いので動作未確認です。すみません。
    もしくは少し面倒ですがaタグを消す方法もありますね。

    個人的にはクリックできても困ることはないと思うので、リンクの削除はやらなくてもいいかなという気がします。

    トピック投稿者 the_zombis

    (@the_zombis)

    13年、 4ヶ月前

    ご教授ありがとうございます。
    確かにリンクの削除は特に困らないので、こちらに関しては検証しつつリンクの削除はやらないように提案してみます。

    現在のページ表示に関しては確かにそのページを表示している場合は「「current-menu-item」などのクラスが、liに設定されますが、ページを表示していない時のクラス・・例えば「item-148」などのクラスに通常の背景画像をCSSで設定しても、そのページが表示されている時に「item-148」のクラスが削除される訳ではないので「current-menu-item」にそのページが表示されている時に設定したい背景画像をCSSで設定してもダメだと思うのですが・・・

    トピック投稿者 the_zombis

    (@the_zombis)

    13年、 4ヶ月前

    ご教授ありがとうございます。
    確かにリンクの削除は特に困らないので、こちらに関しては検証しつつリンクの削除はやらないように提案してみます。

    現在のページ表示に関しては確かにそのページを表示している場合は「current-menu-item」などのクラスが、liに設定されてるので試してみたらダメでした。

    結果として、

    li.menu-item-148 a{background:url(../images/common/subnavi_company.gif) no-repeat;}
li.menu-item-148 a:hover{background:url(../images/common/subnavi_company_over.gif) no-repeat;}
li.page-item-135 a{background:url(../images/common/subnavi_company_over.gif) no-repeat;}

    上記のように、通常時は「menu-item-148」のクラスに設定して、その対象ページが表示されてるときは新たに「page-item-135」というクラスが設定されるようなのでそいつに背景画像を指定することで実現できました。（148や135などの数字は適当です）

    ただ何か「current-menu-item」のクラス名などを利用した方法など、もう少しスマートなやり方があればいいのですが・・

    y_yu

    (@y_yu)

    13年、 4ヶ月前

    なるほど。
    下記のように、クラスを連続して指定した絞り込みでは無理ですか？

    /* 通常時 */
li.menu-item-148 a{
    background:url(../images/common/subnavi_company.gif) no-repeat;
}
/* 表示時 */
li.menu-item-148.current-menu-item a{
    background:url(../images/common/subnavi_company_over.gif) no-repeat;
}
    トピック投稿者 the_zombis

    (@the_zombis)

    13年、 4ヶ月前

    たびたびのご教授ありがとうございます。

    上記の方法で試してみたところ大丈夫でした！自分もまだまだ勉強不足です。
    リンクは仰るとおりの削除しない方向で行こうと思います。
    ありがとうございました。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「ナビゲーションのでのボタン表示について」には新たに返信することはできません。

タグ