Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css

cssでドロップダウンメニューを作る方法

投稿日:

Pocket

うも、チャーさんです。

 

あなたはcssでドロップダウンメニューを

作りたいと思っていませんか?

 

この記事ではjavascriptなどを使わずに

htmlとcssのみでドロップダウンメニューを

自作する方法を書いています。

 

 

なので、あなたがこの記事を読めば、

ドロップダウンメニューを作れるように

なるでしょう。

 

*この記事では作り方がわかりやすいように、

装飾系のcssは載せてません。

 

ドロップダウンメニューを表示させる方法に

焦点を絞ってるので仕組みや作り方を

知りたい場合にどうぞ。

 

スポンサードサーチ

cssでドロップダウンメニューを作る方法

 

ということで結論からです。

 

cssでドロップダウンメニューを作る

方法ですが、以下のようにすれば、

あなたで自作できます。

 

 

やり方ですが、

1、メニューを作る

2、メニューの中にサブメニューを作る

3、サブメニューにdisplay:noneをつける

4、: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;

}

 

 

上記でして、2番目の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でドロップダウンメニューを作るには、

以下をやれば作れます。

 

1、メニューを作る

2、メニューの中にサブメニューを作る

3、サブメニューにdisplay:noneをつける

4、: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でドロップダウンメニューを

作る方法でした。

 

それでは読んでもらってありがとうございました。

 

チャーさん

-css

スポンサードサーチ

関連記事

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。