多階層ドロップダウンのスマホ化について

質問

現在PCサイトにおいて多階層のドロップダウンメニューのスマホ対応を、jQueryプラグインを使うことによって実装致しました。
しかし一つ問題があるのですが、スマホ化した際に、liの親要素は全てリンクがヌルリンクになり、タッチして下の階層が開ける仕様になっているため、PCの方ではコンテンツのあるメニューの一部が開けなくなってしまいました。
他のプラグインやbootsstrap等の例も見たのですが、やはりスマホでは親要素はクリックできるようになっているため、ヌルリンクになっているようです。
メニューの構成自体を変えた方が良いのでしょうか？それとも他に実装できる方法があれば、解説サイトのリンクだけでも良いのでご教示お願い致します。

回答No.2

ORUKA1951

jqueryではなく普通にCSSだけでよいのでは？？
　スマホはHTML5,CSS3に対応していますので・・
　そのプルダウンメニューのソースを提示してください。
<header>
　・・・
　<nav>
　　<ul>
　　　<li><a href="/">Top</a></li>
　　　<li><a href="/Products">Products</a>
　　　　<ul>
　　　　　<li><a href="/Products/a.html">製品A</a></li>
　　　　　<li><a href="/Products/b.html">製品B</a></li>
　　　　　<li><a href="/Products/c.html">製品C</a></li>
　　　　</ul>
　　　</li>
　　　<li><a href="/Manual">Manual</a>
　　　　<ul>
　　　　　<li><a href="/Manual/a.html">説明A</a></li>
　　　　　<li><a href="/Manual/b.html">説明B</a></li>
　　　　　<li><a href="/Manual/c.html">説明C</a></li>
　　　　</ul>
　　　</li>
　　　<li><a href="/ContactUs">ContautUs</a>
　　　</li>
　　</ul>
　</nav>
</header>
<!-- header,navはHTML4などでは、div class="header"のようになります。 -->
そのうえで、
・ニ階層目のリストは隠しておいて
・focusまたはhoverの時に二階層目が開くようにする。
＞タッチして下の階層が開ける仕様になっているため、
　この意味が分からないのですか、タップではなくタッチですか？？タップ/クリックだとリンク先に飛んでしまうので、hocus,hoverでないとまずい気がしますが？？？

　jqueryではなく、スタイルシートを使うほうが良いでしょう。スタイルシートでリキッドでデザインし、それ以上のことがしたければmediaqueryでスタイル自体を変更できますからね。

　HTMLをデザイン目的で書いたら、それに制約されてメディアごとにデザインを変える事を始め何もできなくなります。HTMLには文書構造しか書かない。そのための
『文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる---2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』
ですから・・

お礼

すみません、お礼と補足が前後いたしましたが、
もう一つ補足です。
書いて頂いたサンプルと異なる部分があります。
<nav>
　　<ul>
　　　<li><a href="/">Top</a></li>
　　　<li><a href="/Products.html">Products</a>
　　　　<ul>
　　　　　<li><a href="/Products/a.html">製品A</a></li>
　　　　　<li><a href="/Products/b.html">製品B</a></li>
　　　　　<li><a href="/Products/c.html">製品C</a></li>
　　　　</ul>
　　　</li>
　　　<li><a href="/Manual">Manual</a>
　　　　<ul>
　　　　　<li><a href="/Manual/a.html">説明A</a></li>
　　　　　<li><a href="/Manual/b.html">説明B</a></li>
　　　　　<li><a href="/Manual/c.html">説明C</a></li>
　　　　</ul>
　　　</li>
　　　<li><a href="/ContactUs">ContautUs</a>
　　　</li>
　　</ul>
　</nav>
３階層ある場合、２階層目にもリンク（コンテンツ）があるのです。
やはりこれをアコーディオンにするのは無理ですよね...。
メニューの階層を変更することもできるので、アコーディオンにしたいなら、
構成を練り直した方がいいでしょうか。
補足に書きましたが、20以上もあるメニューがスマホで表示した時に全て表示されているのはコンテンツ重視と言ってもUIが不便だと思うのですがいかがでしょうか。

まだ経験が未熟なのでアドバイス頂ければと思います。

補足

回答ありがとうございます。
プルダウンメニューは仰る通りhtml5とcss3だけで実装していて、サンプルで書かれているようなhtmlです。
jQueryは、スマホ化したときにアコーディオンにするために使いました。
メニューが20以上もあるので、スマホ化した時に、画面いっぱいにメニューが開いているのはよくないと思うのです。
多階層のドロップダウンメニューをスマホでアコーディオン化したものは、やはりいろんなサンプルを見ても、アコーディオンの親要素をタップして下の階層を開く仕様なので、ヌルリンクなのだと思います。

今まで多階層でないドロップダウンのアコーディオン化しかしたことがなかったので、そのことに気づきませんでした。

スマホ化してもスマートに見えるには、どのような実現方法がいいのでしょうか？

回答No.1

fujillin

実装の方法以前に、質問者様が実現したいＵＩはどのようなものなのでしょうか？

ユーザがリンクしたいと思うとリンクになり、ドロップダウンと思うとドロップダウンになるというのだとすると、今のところ難しそうです。（そのうち実現できるようになるかもしれませんが…）

お礼

回答有り難うございます。
すみません、順番が前後しましたが、２番目の回答者様の補足に書いたように、
PCサイトのプルダウンメニューはhtml5とcss3だけで実装していて、
jQueryは、スマホ化したときにアコーディオンにするために使いました。
メニューが20以上もあるので、スマホ化した時に、画面いっぱいにメニューが開いているのはよくないと思うのです。

どのようなメニューのスマホ化が適しているのでしょうか？