やりたいこと

ウェブページ上で、文字の上にカーソルを持ってきたときにメニューを表示するようにしたいと思っています。イメージとしてはこのサイトで、ページ右上に薄灰色で「カテゴリーA」、「カテゴリーB」という文字があって、そこにカーソルを持っていくと「All」などのメニューが表示されるようなことを実現したいと考えています。

このページのHTMLコードを見ると、該当部分周辺が

html
1<div class="group" id="Filters">
2  <div class="drop_down wf"> <span class="anim150">カテゴリA</span>
3    <ul class="anim250">
4      <li class="active" data-filter="all" data-dimension="categoryA">All</li>
5      <li data-filter="A11111" data-dimension="categoryA">A11111</li>
6      <li data-filter="A22222" data-dimension="categoryA">A22222</li>
7      <li data-filter="A33333" data-dimension="categoryA">A33333</li>
8      <li data-filter="A44444" data-dimension="categoryA">A44444</li>
9    </ul>
10  </div>
11  <div class="drop_down wf"> <span class="anim150">カテゴリB</span>
12    <ul class="anim250">
13      <li class="active" data-filter="all" data-dimension="categoryB">All</li>
14      <li data-filter="B11111" data-dimension="categoryB">B11111</li>
15      <li data-filter="B22222" data-dimension="categoryB">B22222</li>
16      <li data-filter="B33333" data-dimension="categoryB">B33333</li>
17      <li data-filter="B44444" data-dimension="categoryB">B44444</li>
18    </ul>
19  </div>
20</div>

のようになっており、最初から出てくるメニューがHTML上に記述されており、最初は非表示になっているようであるというところまでわかったのですが、実際にどのようにしてこれが実現されているのかわかりません。

よろしくおねがいします。

行動規範の内容に同意します

回答1件

ベストアンサー

「ドロップダウンメニュー」とか「ドロップダウンリスト」と呼ばれるもので、CSS だけでも作れますし JavaScript を利用する物もあります。表示非表示の切り替えだけでも実装できますし、動きや表現をどうするか次第では様々な組み方ができるでしょう。ご自分のやりたい実装に近い物を参考にしてください。

【JavaScript ドロップダウンメニュー作り方 - Google 検索】
https://www.google.co.jp/search?safe=off&q=JavaScriptドロップダウンメニュー+作り方

【CSS ドロップダウンメニュー作り方 - Google 検索】
https://www.google.co.jp/search?safe=off&q=CSS+ドロップダウンメニュー+作り方

投稿2019/03/31 15:14