質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.01%

トグルのクリックによって表示されるのではなく、マウスオーバーによって表示させたい。

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,009
退会済みユーザー

退会済みユーザー

Wordpressのテーマで、下記のように変更を希望しています。

【現状】
メニューのトグルをクリックすると、サブメニューが出てくる。

【希望】
メニューにマウスオーバーするだけで、サブメニューが出てくる。サブメニューからマウスを離すと表示は消える。(トグルさんには消えていただきたい。)


おそらく下記のjavulascriptとPHPのあたりを変えればいいのかな、、??
と思っているのですが、
どこをどうすればいいのでしょうか?

【現状のjavascriptとPHP】

(function() {
            $( '#navigation .current-menu-item' ).parents( '.sub-menu' ).show()
                .prev( '.submenu-switch' ).find( '.fa' ).removeClass( 'fa-angle-down' ).addClass( 'fa-angle-up' );

            $( '#navigation .submenu-switch' ).click(function() {
                var $switch = $(this);
                $switch.next( '.sub-menu' ).toggle( 500, function() {
                    $switch.find( '.fa' ).toggleClass( 'fa-angle-down fa-angle-up' );

                    if ( 'true' == $switch.attr( 'aria-expanded' ) ) {
                        $switch.attr( 'aria-expanded', 'false' );
                    } else {
                        $switch.attr( 'aria-expanded', 'true' );
                    }

                    $screenReader = $switch.find( '.screen-reader-text' );
                    if ( aesblo.expandMenu == $screenReader.text() ) {
                        $screenReader.text( aesblo.collapseMenu );
                    } else {
                        $screenReader.text( aesblo.expandMenu );
                    }
                });
            });

        })();
<div class="sidebar-buttons clearfix">
            <?php if ( is_active_sidebar( 'secondary-sidebar' ) ) : ?>
                <button type="button" class="active-secondary-sidebar button-toggle">
            <span class="screen-reader-text"><?php _e( 'Toggle to the secondary sidebar', 'aesblo' ); ?> </span>
          <span class="fa fa-ellipsis-h fa-2x"></span>
        </button>
            <?php endif; ?>
            <button type="button" class="close-primary-sidebar button-toggle">
          <span class="screen-reader-text"><?php _e( 'Close the primary sidebar', 'aesblo' ); ?> </span>
        <span class="fa fa-close fa-2x"></span>
      </button>
        </div>


まったく要領をえない質問でまことにすみません。
「詳しい人だと見ればわかるのかもな」という、なんとも安易な発想と甘えた根性でダメ元な質問です。
どなたかお詳しい方が、もし、いらっしゃいましたらよろしくお願いいたしますm(__)m

追記です。
【出力されたHTML】はこうなっているようでございます。

<div id="primary-sidebar-content" class="primary-sidebar-content">

        <div class="sidebar-buttons clearfix">
                        <button type="button" class="close-primary-sidebar button-toggle">
          <span class="screen-reader-text">Close the primary sidebar </span>
        <span class="fa fa-close fa-2x"></span>
      </button>
        </div>

                    <nav id="navigation" class="site-navigation" role="navigation" aria-label="Primary Menu">
                <ul id="ごちゃごちゃと数字と%が書いてある。。。。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/06/07 10:50

    出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記ください。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2016/06/07 17:38 編集

    この部分でよろしいでしょうか?質問文に追記いたしました。
    いまいち対応する部分がわかっておらず、的外れな追記でしたらもうしわけございません。。

    キャンセル

  • kei344

    2016/06/08 11:12

    HTMLはid="primary-sidebar-content"の閉じタグまで追記ください。

    キャンセル

回答 3

+1

php側とjavascript側の相関が実際のレイアウトを見てみないとわからないのですが、

javascript側のclickとなっている部分を
$( '#navigation .submenu-switch' ).click(function() {
hoverに置き換えてみたらどうなりますでしょうか。
$( '#navigation .submenu-switch' ).hover(function() {

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/07 17:12

    わ!すごい!!!!!!!!!!!笑
    一発でできましたぁ☆
    なめらかな動作に感涙でございます。

    ただ、hoverで表示されたメニューをクリックするため、その場所からマウスを離すと、表示が閉じてしまい、表示されたメニューをクリックできない様子です。(´;ω;`)

    必要なのは、出力されたHTMLさんとかいうやつですね…
    ふむ。帰ったら早速調べてまたご連絡させてください(*^^)v

    ふふ。うごくうごく。たのしい…

    キャンセル

checkベストアンサー

0

http://codepen.io/ChihiroTachikawa/pen/pyXdbJ
以前制作したものですが、デザインを変えて流用できませんか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/07 17:26

    ありがとうございます。
    イメージはまさにそういうことなのですが、なかなか流用できるスキルがなく…(´;ω;`)
    サイトで勉強させていただきます。

    キャンセル

  • 2016/06/07 17:44 編集

    ちなみに「マウスオーバー時に表示されたサブメニューが消えるタイミング」についてなんですが。。

    そちらのメニューでは「サブメニューからマウスを離したとき」になっていますよね。
    「サブメニューが消えるタイミング」をそのようにしたい場合、お書きになっているコードのどの部分が対応しているのでしょうか?

    実は、別の方のご回答によって、クリックではなくhovarにしたいという質問は解決できたのですが、その結果。
    「サブメニューが消えるタイミング」が、「サブメニューからマウスを離したとき」ではなく、「元のメニューからマウスを離したとき」になってしまっているです。
    つまり、サブメニューをクリックするために元のメニューからマウスを離すと、サブメニューが消えてしまうんです。笑

    キャンセル

0

cobmさんの言われるように、元のhtmlがどうなっているかによるんですけれども、
極簡単なhoverの例を書いてみました。

あとは、実際のhtmlの状態に当てはめて書き換えるだけかと思います。
phpを提示してもらうより、現在のその部分のhtmlがあったほうがサンプルは作りやすいかと思います。

phpを見るに、ここはボタン部分ですよね?

<button type="button" class="active-secondary-sidebar button-toggle">
  <span class="screen-reader-text">ここにセカンダリメニューを表示する (アイコン)</span>
</button>

//でメニューが表示されていたらボタンの表示が
<button type="button" class="close-secondary-sidebar button-toggle">
  <span class="screen-reader-text">セカンダリメニューを閉じる (アイコン)</span>
</button>

と言う具合で、このbuttonの次に何かしらメニューが入っていると言う感じかと思います。
で、そのメニューはcss等で非表示になっていて、ボタンをクリックしたら表示に変わるだけのようなものかと思うので、サンプルのような感じで切り替えてみてはどうかと思います。

後は、font-awesomeのあたりを変更したりですが、消したり加えたりするだけなので、イケるかと。

おそらく複雑に考えすぎておられるのではないかなぁと思うんですが、まずは動作する簡単なものを書いてみて、そこに必要なものを付け足し、その後でより簡潔に書ける書き方を探すほうが良いかと思います。

ただ、buttonをhoverすると言うのよりは、やはりボタンはクリックって感じがするので、そこらをどうされるかですね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/07 17:25

    ありがとうございます。
    出力されたHTMLから、書いていただいた部分を検索してみると、ありましたありました☆あるってよくわかりますねぇ。笑

    だた、似たような場所が何か所かありました。


    <li class="sq-primary-sidebar">
    <button type="button" class="button-toggle">
    <span class="screen-reader-text">Expand the primary sidebar </span>
    <span class="fa fa-bars fa-2x q-bars"></span>
    </button>
    </li>


    <li class="sq-search">
    <button type="button" class="button-toggle">
    <span class="screen-reader-text">Poppup the search form </span>
    <span class="fa fa-search fa-2x q-search"></span>
    </button>
    </li>



    <div id="primary-sidebar-content" class="primary-sidebar-content">

    <div class="sidebar-buttons clearfix">
    <button type="button" class="close-primary-sidebar button-toggle">
    <span class="screen-reader-text">Close the primary sidebar </span>
    <span class="fa fa-close fa-2x"></span>
    </button>
    </div>



    <div id="secondary-sidebar" class="secondary-sidebar">
    <div class="sidebar-buttons clearfix">
    <button type="button" class="active-primary-sidebar button-toggle">
    <span class="screen-reader-text">Toggle to the primary sidebar </span>
    <span class="fa fa-bars fa-2x"></span>
    </button>
    <button type="button" class="close-secondary-sidebar button-toggle">
    <span class="screen-reader-text">Close the secondary sidebar </span>
    <span class="fa fa-close fa-2x"></span>
    </button>
    </div>

    キャンセル

  • 2016/06/07 17:29

    このうち、どの部分をどのように…
    と思ったら、

    >と言う具合で、このbuttonの次に何かしらメニューが入っていると言う感じかと思います。

    とおっしゃっているので、きっと②がその部分のようです。
    メニューが②の後にずらっと書かれていました。

    ふむふむ。とりあえず思いつく限りかたっぱしからいろんな組み合わせで改造してみます。笑

    ご協力に感謝いたします!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.01%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる