スマホでブログサイトを表示したときのナビゲーションメニューの動作を変更したい

  • 解決済 echizenya

    (@echizenya)


    6年、 2ヶ月前

    いつもお世話になっております。
    下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

    —

    【質問の主旨】

    スマホでブログサイトを表示したときのナビゲーションメニューの動作を以下の通り変更したいと考えています。そのためには現在のheader.phpとstyle.cssの記述をどのように変更すればよろしいでしょうか？

    1. 親メニューをクリックしたときに、その親メニューを再度クリックするか、親に属する子メニューをクリックするまでは勝手に画面遷移しないようにする

    2. 親メニューをクリックしたときに表示される子メニューをクリックすると、必ずその子メニューに遷移できるようにする

    【質問の補足】

    現在、ブログサイトにおいて6つのナビゲーションメニューがあります(Home, about meを除く)。その6つのナビゲーションメニューをスマホで操作すると以下の2種類の動作が発生します。

    1. 自他の親メニューをクリックする前に画面遷移をした上に、子メニューには遷移できない

    – Webサービス
    – インフラ
    – ビットコイン
    – 本の感想

    2. 自他の親メニューをクリックする前に画面遷移するが、子メニューには遷移できる

    – Web学習法
    – あれこれ

    1と2ともに自分の意図しない動作です。
    「全ての親メニューは自他のメニューをクリックしないと遷移しない。また親メニューに属する子メニューをクリックすると必ず遷移できる」
    ようにしたいと考えています。

    3. コードについて

    ブログサイトのコードはGitHub上に公開しています。

    – header.php
    https://github.com/echizenyayota/e-yota/blob/master/wp-content/themes/mytheme/header.php#L128-L140

    – style.css
    https://github.com/echizenyayota/e-yota/blob/master/wp-content/themes/mytheme/style.css#L1238-L1281

    4.
    エミュレーターで試すと、親子メニューをクリックしないときに遷移するという現象は起こります。一方、子メニューは選択できるようになります。

    http://www.responsinator.com/

    —

    以上、よろしくお願い申し上げます。

    ヘルプの必要なページ: [リンクを見るにはログイン]

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • ishitaka

    (@ishitaka)

    6年、 2ヶ月前

    こんにちは

    下記スクリプトではどうでしょうか。
    navbtn.js あたりに追加してみてください。

    jQuery('ul#menu-menu li:has(.sub-menu) > a').click(function() {
  if (jQuery('#navbtn').css('display') != 'none') {
    jQuery('.sub-menu', jQuery(this).parent()).toggle();
    return false;
  }
});

    あと、スタイルを下記のように変更して置いたほうがいいかも（エミュレータ対策）しれません。

    .menu-item-has-children:hover .sub-menu {
  display: block;
}

    ↓

    @media (min-width: 768px) {
  .menu-item-has-children:hover .sub-menu {
    display: block;
  }
}
    トピック投稿者 echizenya

    (@echizenya)

    6年、 2ヶ月前

    @ishitaka さん。
    いつもコメントありがとうございます。

    >下記スクリプトではどうでしょうか。

    教えていただいたスクリプトをnavbtn.jsに追記したことろ以下のような状態になりました。
    自分（Andoroid）と知り合い（iPhone）の実機で試した結果です。

    – 親メニューをクリックすると、一定の速度で親メニューのページに遷移する
    （ユーザーが素早く子メニューをクリックしないと、サイトが自動的に親メニューに遷移させてしまう）
    – 子メニューは必ず選択できる
    （ユーザーが素早く子メニューをクリックすると、当該子メニューに遷移できる）

    スマホのナビメニューを改良する目的はブログサイトへのアクセス（PV）を向上させることです。
    今回の改良が目的にかなっているかどうかは、ある程度時間が経過しないと分かりません。
    したがって、いただいたコメントをもって解決済みとさせていただきます。

    アドバイスありがとうございました。
    今後ともどうぞよろしくお願い申し上げます

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「スマホでブログサイトを表示したときのナビゲーションメニューの動作を変更したい」には新たに返信することはできません。