スマホ/タブレットでのグローバルメニュープルダウン

わいひら様

お返事ありがとうございます。

URLはこちらになります。

PCで操作した場合、例えば”カテゴリー別レビュー”にカーソルを合わせると自動でプルダウンメニューが表示されるのですが、タブレットだとタップしても何も起こりません。。。

ちなみに最初の投稿で”スマホ/タブレット”と表記してしまったんですが、スマホ向けにはスマホ用のデザインで対応するのでPC表示にするのはタブレットのみです。

よろしくお願いします。

僕がchromeの携帯シミュレーションで見た所、質問部分は動作していますが、わいひらさんはもう少し検証できるかも知れないエミュレーターとか知ってるかも知れないので、一応それらの回答があるまで手を入れるのは待ってて下さい。

で、僕が思うに問題があるとすれば本来、

#navi ul > li(.menu-item-has-children) をクリックした時に.sub-menuがdisplay: noneからdisplay: blockになることでサブメニューが表示されます。

#navi ul > liで良いわけですが、その中にaタグがある場合、それをクリックしている可能性も無きにしもあらず。特にiOSとかのwebkitはアレなのでそういういらん所に反応する可能性もあります。どのタブレットから確認されたかも書いてもらえると、そういう事例があるかどうかを確認もできそうですが、わからないのでひとまずの所、ipadだとして、aタグに問題があるのではなかろうかと推定し、aタグを無効化すればよいのではなかろうかと思ったりもします。

と言うのがパッと思いつく所。

aタグの無効化は、

.test {
  pointer-events: none;
}

こうするだけですが、問題はその.testを入れられるかどうか。カスタムメニューとか使ったことがないのでclassを付けれるのかどうかも知れませんが、何かしらで付けられるのであれば.testを任意の名称に変えて、

<a class="test">オススメSHOP</a>

となるようにします。しかし、これだけでは常に.testが無効になってしまいます。色々確認した所、タブレットはだいたい768pxからのサイズで、大きいものがどこまであるのかはわかりませんが、仮に1200pxまでとする場合、

.test {
  pointer-events: auto;
}

/* 768 */
@media (min-width: 48em) {
  .test {
    pointer-events: none;
  }
}

/* 1200 */
@media (min-width: 75em) {
  .test {
    pointer-events: auto;
  }
}

みたいな感じでしょうか。

僕が前に何かで書いたようにも思うんですが、Simplicityはaタグにスタイルされていることが多いのでPC時にマウスオーバーした時に背景色を変えたりする場合にpointer-eventsを再びautoにする必要があると言う感じです。
本来はマウスオーバーしているliに背景色を持たせて変えるべきです。それをしようと思うと隙間が出たり色々と修正が大変になったりするかも知れませんけどね。

jQueryで、aタグのhrefがカラの場合は.test(仮名)を追加するか、aタグをとってしまうというのも方法です。ただし、その場合aタグに入っているスタイルが効かなくなりますので、別途それらでスタイルを変更する必要が出る場合もあります。
これらはjQueryを使わずともカスタムメニューにclassが入れられるかどうかで利用するかどうかが変わるかと思います。

またこれらとは別に問題があるかも知れませんので、ひとまずの情報として。

Hidekichiさん

ありがとうございます。

わいひらさんの回答を待ってから試してみようかと思います。

いつも本当に助かります。

Hidekichiさん
わいひらさん

ご確認ありがとうございます。

確かにエミュレータでは正常に動くんですよね。。。

Hidekichiさんに頂いたコードを試してみようと思うんですが、
<a class="test">オススメSHOP</a>
はどのファイルに記述すればいいのでしょうか？

度々の質問すいません。。。

ちなみにiPadを使っています。

サンプル: ナビのaタグにhrefが無い場合jqueryで任意のクラスを入れる | jsFiddle

こんな感じです。
左下のjs欄はそのまんま子テーマjavascript.js(※1)に追記して下さい。
右上のcss欄は、子テーマstyle.cssに追記ですが、本来デベロッパーツールで確認してもらう所なんですけれどもわかりやすいように色で変化するように(※2)サンプルは記載してありますので、コメントで不要と書いてある以降のものは必要ありません。

※1: 1つしか出てこないのでわかると思いますがjQueryの中でaddClass(“test”)とあります。これがクラスを付けている箇所です。testを変更する際はここを変更して下さい。addClassはクラスを付ける専用のものなので先頭の「.」は必要なくクラス名だけ付けます。
.testの変更を行えば自ずとcssのクラスも変更して下さい。こちらは先頭に必ず「.」が必要です。

※2: 1200px時を確認するには結構なブラウザ幅が必要です。js欄と右下のリザルト欄の境界ボーダーは左右にドラッグできます。

ただし、これらで質問内容が改善されるかは何とも言えない感じです。

Hidekichiさん

ありがとうございます。

コードを貼ったんですがやっぱりタップしても何も反応しないですね。。。

.testの変更を行えば自ずとcssのクラスも変更して下さい。こちらは先頭に必ず「.」が必要です。

jQueryで変更したクラス名がcssで変更されてませんが、再度変更して試してみて下さい。
ただこれが正常に適応されたとして問題が回避できるかはわかりません。

すいません色々試すうちにCSSの方のクラス名を変えていませんでした。。

修正しましたがやっぱり反応せずですね。。

とりあえずカスタムリンクにサイトトップのURLを入れて運用するのが良いのでしょうか？

最終手段ですが、aタグをpタグに変えてやるというのではどうでしょうか？

サンプル: #naviのhrefのないaタグをpに変えて試してみる | jsFiddle

前のサンプルの部分的な変更です。どこがかわったかわからない場合は、前回のものを今回ので上書きして下さい。
jQueryとcssを変更しています。見た目はaと同じようにしてあるはずですが微調整が必要になるかも知れません。多分大丈夫かと。
pタグにしてしまうことから、前回のpointer-eventsのcssは不要になります。もしカーソルが変わったほうが良いということなら、

#navi .menu-item-has-children pにcursor: pointer;を追加して下さい。

もしこれでダメな場合は他の原因が考えられます。
#navi ul li aのz-indexとか。

見ておられるタブレットが不明なのでそこらにバグがあるかどうかはわかりませんが。z-indexが問題なのであればz-indexをaではなくliに設定するべきです。その場合はそういう不具合があるということで親テーマのstyleを変更する必要もありますが、ここらは(おそらく)わいひらさんも僕も検証する実機がないので何とも言えません。

他の方で同じような質問がなかったようにも思うので、それ以外にも問題があることも十分に考えられますが、使用環境はどのタブレットでバージョンはいくつで、他の方で同じような環境の時そうなるかによって対応は変わるかと。

ちなみにpに変更したものにはz-indexはつけていません。ヒロさんのサイトのナビの背景が黒ということもあり、サブメニューが親に重なってる感じには見えないので。

下記2台のタブレットで検証したのですがダメでした。。

iPad mini 2 (ME814J/A)
iPad mini 4 (MK702J/A)

やはりipadか…と言う感じです(笑)

ipadというよりiosはバグの温床なので:hoverは例外漏れず何かしら問題があります。
ただ考え方としては、タッチデバイスにはhoverはないので無視するというのもわかります。単に無視しているだけならまだわかりやすいですが、そうではない所に色々あるみたいです。

ただし、iosのwebkitは確かオープンソースになったとかで今後凄腕プログラマーがこれら温床を何とかしてくれるかも知れません。

iosが最新で、かつsafari以外のwebkit系のブラウザ(もしくはchrome)ならもしかすると動作するかも知れませんが、ここは基本にかえって、

サンプル: ipad/iphoneの場合にトグルでサブメニューを表示・非表示

こんな感じにしてみました。前回のサンプルのアップデートです。実機がないので試せてませんが、多分動作するだろうと思います。トグルでサブメニューの表示非表示なので案外面倒です。

ここらもあるのでタブレットでPC用のグローバルメニューを使わず、モバイル用のメニューを使うのが良いです。わかり良いのはoffCanvasメニューのように、何かしらのボタンをクリック(タッチ)すると、左なり右なりからパネルがスライドして表示するやつです。

サンプル: ナビをモバイル時にパネルで表示 | codepen

これは以前質問があったものに追加で入れたものですが、このようにすることでメニューは単にリンク一覧になるので一挙に全部が見れてわかりやすくなります。
PCより画面が狭いタブレットでもメインの記事部分を多少なりとも広く使えます。

色々な問題が重なって今回の事例になったと思われますが、モバイル端末ではPC表示ではなく、モバイル端末の本来の姿で利用するのが最も良いかと思います。

それから、cssのpaddingですが、
padding: .5em 1.8em; では記事幅に入り切らないみたいなので、padding: .5em 1.6em;ぐらいに変更して下さい。

メニューをもバル用のものに変更されるなら、今回追加したjsFiddleのjQueryとcssは不要になります。

Hidekichiさん

ありがとうございます。

トグルでサブメニューの表示もチャレンジしたのですがやはりダメでした。
iOSを更新してChromeで見ても同じでした。

モバイル用メニューの使用を検討したいと思います。

色々調べて頂き本当にありがとうございました。

> トグルでサブメニューの表示もチャレンジしたのですがやはりダメでした。

あ、すいませんclickで検証してたので、完全に記述ミスに気が付きませんでした。
$("#navi ul > .menu-item-has-children").on("tachstart", function() {
ここの「tachstart」ってなんやねんってことでした。

正しくは、touchstartです。ご面倒かけますが再度修正確認してもらえますか？

修正したらプルダウンが出るようになりました！
一回タップすると色が変わり、もう一度タップするとプルダウンが出現します！

ありがとうございます！

ただ、、
出たプルダウンメニューがタップできないので更に何か設定が必要なのでしょうか？

> 出たプルダウンメニューがタップできないので
> 更に何か設定が必要なのでしょうか？

出たサブメニューはデフォルトで何もしていませんが、デフォルトではサブメニューにもhoverが仕込んであります。a:hoverなので、ダブルタップで遷移できると思いますが、できない場合はosの設定の問題かも知れません。

新しいユーザーを作って、試してみるということで、何かしらの設定によってできないのかそもそもができないのかの見当がつくかと思います。

また別の方法として、header.phpを調べると、
<div id="header" class="clearfix">
というのが見つかると思います。ここに、
<div id="header" class="clearfix" ontouchstart=""> とontouchstart=""付けてみて下さい。これは一応テストなのでそれで効くかどうかは何とも言えません。

とまぁ色々やらねばならないほどにiOSは面倒くさいOSなので、モバイルメニューを利用するというのがベスト。問題の切り分けができて、どうすればタップ可能になるかがわかればその対策をするというのがベターでしょうね。

しかも話によると、appleもそのことを知っていて直していないとか何とか。ios10.xとかでは一部修復されているようですが、それでもまだリンクがタップできないというような問題もあるようです。
javascriptをoffにすればいけるとかと言う報告もあるようですが、昨今の事情でjavascriptをoffにするというのはナンセンスなので、何とかしてもらいたいところですね。

iOSって結構面倒なOSなんですね（笑）
頂いたコードをheader.phpに記述したんですがやっぱり遷移しませんでした。。。

でも今回は色々勉強になりました。
デザインを直してタブレットではモバイル表示にする方向で考えます。

本当にありがとうございました。