サポート » 使い方全般 » カスタムメニュー機能を利用した場合のメニューのオンオフ

  • 解決済 h-pine-h

    (@h-pine-h)


    こんにちは。
    WP勉強中の身です。jQueryやPHPは書いてあることがわかるようになってきた程度です。
    WP以外でメニューのロールオーバーとオフで画像を切換える場合、画像名に_on,_offなどつけてjQueryで切換える方法がありますよね?
    htmlの方にはoffの方が設置されている状態です。
    この機能をWPにとりいれたいのですが、現在カスタムメニューを使っていて。cssのバックグラウンドで画像を指定しています。この場合、上記のロールオーバー機能はcssで設定すればいいのでしょうか?
    それ以外に効率のよい方法があれば教えてください。
    ハイライトも、WP以外ではjsを使っていたのですが、カスタムメニューを使用しましたらclassでcurrentがつくようになったのでcssに切換えました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • スレッド開始 h-pine-h

    (@h-pine-h)

    追加質問させてください。
    2.レスポンシブにするのにPCサイトでは横並び、スマフォではトグルさせるjsがあったと思うのですが、こちらを利用する場合、カスタムメニューは利用しては使えないのでしょうか?

    モデレーター Daisuke Takahashi

    (@extendwings)

    CSSには:hoverセレクタというものがあります。”css hover background”などで検索すれば情報があります。

    追加の方ですが、どういう構造でそのJavaScriptが書かれているのかを見ていないのでわからないですが、通常、問題ないかと思います。WordPressテーマや自作テーマの場合はそのJavaScriptの作者などに質問した方が正確な答えがもらえます。

    スレッド開始 h-pine-h

    (@h-pine-h)

    >Daisuke Takahashiさん
    ご回答ありがとうございます。cssはわかりますので、:hoveセレクタは存じています。
    では、みなさんcssで制御している方が多いのでしょうか。wpだからといって特別に考える必要はないのですね。

    追加の方ですが、直接メニューを打てないと、jsでPCサイトとスマフォのメニューの切り替えができなかった気がします。今ちょっと記事が見当たらないのですが、あとはcssで別にスマフォ用のメニューを書いて、display:blockとnoneで切り替える方法があると思いますが、重くなるから皆さん違う方法をとっているのかな?と思い質問させていただきました。

    モデレーター Daisuke Takahashi

    (@extendwings)

    自分はカスタムメニューのように項目の量の変更が後からある場合でも対応できるようにTwitterのBootstrapのように書いています。
    メニューの入れ子などもPC/モバイル共通のHTMLで記述して、あとはJavaScriptとCSSで画面サイズに応じて、切り替えるっていう方法です

    モデレーター gatespace

    (@gatespace)

    タッチデバイスでは :hover と言う概念がないので当然cssの :hover も無視されます。
    画像の切り替えをスクリプトで実装しても当然無視されるはずですので、
    気にしなくていいような気がします。

    2.について
    一般的なWordPressのテーマを見る限り、メニューを2個作って切り替えるのでは無く
    一つのメニューをcssのメディアクエリを使って見栄えを変えているだけです。
    デフォルトテーマを参考にしてください。

    jQueryのプラグインを使う場合は、
    – jQueryがわをWordPressで出力されたクラスなどに合わせて動作するようにする
    – HTMLを修正する必要がある場合は wp_nav_menu で walker パラメーターを指定してテーマにコードを追加する

    下記ページ内の「Using a Custom Walker Function」
    http://codex.wordpress.org/Function_Reference/wp_nav_menu

    スレッド開始 h-pine-h

    (@h-pine-h)

    >Daisuke Takahashiさん
    そうです。rBootstrapがまだ使いこなせてないのですが、自動的に切り替えした際に、右上にスクエアに横のライン三本のアイコンに切り替えたいと思っています。

    >gatespaceさん
    上記のように切り替えたいと思っているのですが、walkerパラメーターに関してもみてみたいと思います。

    実はすでにWPでレスポンシブのデモサイトを作成済みなのですが、ヘッダーのcssやjsをfunctions.phpに記述しなおしたり、メニューをカスタムメニューにしていなかったので、WPらしい仕様に改修中です。メニューも今まではcssのメディアクエリで切り替えていたのですが、スマホ表示時に右上にドロップダウンを作成したかったので、ご質問いたしました。

    お二人ともありがとうございます。

    ちょっとメニューに関して改変できてから質問を閉じたいと思います。

    スレッド開始 h-pine-h

    (@h-pine-h)

    >Daisuke Takahashiさん
    >gatespaceさん
    結局コリスさんのところで紹介されていたレスポンシブメニュー対応のjsを使いました。
    まだcssでの整形が終わっていませんが、実装はできましたのでお二人にお礼申し上げます。
    ありがとうございました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「カスタムメニュー機能を利用した場合のメニューのオンオフ」には新たに返信することはできません。