どうも、チャーさんです。
あなたはcssでドロップダウンメニューを
作りたいと思っていませんか？
この記事ではjavascriptなどを使わずに
htmlとcssのみでドロップダウンメニューを
自作する方法を書いています。
なので、あなたがこの記事を読めば、
ドロップダウンメニューを作れるように
なるでしょう。
*この記事では作り方がわかりやすいように、
装飾系のcssは載せてません。
ドロップダウンメニューを表示させる方法に
焦点を絞ってるので仕組みや作り方を
知りたい場合にどうぞ。
スポンサードサーチ
cssでドロップダウンメニューを作る方法
ということで結論からです。
cssでドロップダウンメニューを作る
方法ですが、以下のようにすれば、
あなたで自作できます。
やり方ですが、
１、メニューを作る
２、メニューの中にサブメニューを作る
３、サブメニューにdisplay:noneをつける
４、:hoverでホバーした時にサブメニューをdisplay:blockする
以上でcssとhtmlのみでドロップダウンメニューを
作ることができます。
ということで、説明していきます。
メニューを作る
まずメニューを作るですが、
これは簡単でして、
<ul></ul>のなかに<li>タグを書くだけでokです。
コードの例としては、
<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>
上記の感じです。
が、このままだと縦並びなので、
ulに対してdisplay:flexつければ横並びになります。
でこれでメニューはできました。
サブメニューを作ろう
次にサブメニューの作り方ですが、
これはulのliタグの中にulをもう一度
書くことでできます。
わかりにくいと思うので、
コードを載せますと、
以下の感じです。
<ul>
<li>メニュー
<ul>
<li>サブメニュー1</li>
<li>サブメニュー2</li>
<li>サブメニュー3</li>
</ul>
</li>
</ul>
みていただいた通り、
liタグの中に、ulタグがまた入り、
その中にliタグを書いてますよね。
このように書くとメニューのなかにメニューを
作れます。
(わかりやすくするため便宜上aタグは今は抜いてます)
上記のようにメニューの中に
メニューができます。
サブメニューを隠しましょう
で、次にサブメニューをdisplay:none;で
隠すです。
ドロップダウンメニューは、
メニューにマウスを持っていた時に、
サブメニューが表示されるようにするため、
サブメニューは普段はdisplay:blockで
隠しておきます。
やり方は簡単で、
サブメニューのulにdisplay:noneをつけましょう。
コードイメージとしては、
<ul>
<li>メニュー
<ul class=”submenu”><!–ここにdisplay:none;を指定する–>
<li>サブメニュー1</li>
<li>サブメニュー2</li>
<li>サブメニュー3</li>
</ul>
</li>
</ul>
.submenu {
display:none;
}
上記でして、２番目のulに、
クラスつけて、display:noneで
隠しましょう。
すると、普段はサブメニューが
表示されない状態になります。
ホバーした時にサブメニューを表示しましょう。
で次にhoverでメニューにマウスを載せたときに、
サブメニューが表示されるようにするわけですが、
これはhoverを使えば可能です。
hoverではホバーした時に、
別の要素のcssを変化させることができまして、
例えば以下のコードのように、
<ul>
<li class=”main_menu”>メニュー
<ul class=”sub”>
<li>サブメニュー1</li>
<li>サブメニュー2</li>
<li>サブメニュー3</li>
</ul>
</li>
</ul>
.main_menu:hover .sub{
display:block;
}
hoverの後に変化させたい
他の要素(上記では.subの部分)を半角スペース
開けて続けて書くと、
.subにdisplay:blockを適用することができます。
これにより、
メニューにホバーした時に、
サブメニューにdisplay:blockがきき、
サブメニューが表示されるようになります。
でこれでメニューに対して
ホバーした時にサブメニューを表示できるように
なったので、
あとはサブメニューの表示位置を、
整えてやればokです。
メニューの下に出したければ、
positionを使えばいけますし、
あとは枠をつけたければborderつけましょう。
スポンサードサーチ
まとめ
それではまとめに入ります。
cssでドロップダウンメニューを作るには、
以下をやれば作れます。
１、メニューを作る
２、メニューの中にサブメニューを作る
３、サブメニューにdisplay:noneをつける
４、:hoverでホバーした時にサブメニューをdisplay:blockする
あと、上記の手順がめんどい場合、
これコピペすればとりあえずメニューホバーで
サブメニューが表示されるコード貼っときます。
html
<ul>
<li class=”main_menu”>メニュー
<ul class=”sub”>
<li>サブメニュー1</li>
<li>サブメニュー2</li>
<li>サブメニュー3</li>
</ul>
</li>
</ul>
css
.sub {
display:none;
}
.main_menu:hover .sub{
display:block;
}
あとは見た目をあなたの好みで
いじればokですし、
サブメニューを増やしたければ、
同じ要領で、liタグにulタグを足していけば
okです。
ということで、これでやり方がわかった
と思いますので、あなたの方でも実践してみましょう。
やればあなたのスキルアップです。
で、まずはメニューを作り、
次にメニューの中にサブメニューを作りましょう。
そしてサブメニューをdisplay:none;で隠し、
ホバーした時に表示されるようにしましょう。
そうすればドロップダウンメニューの
原型が出来上がりますよ。
それでは、cssでドロップダウンメニューを
作る方法でした。
それでは読んでもらってありがとうございました。
チャーさん
