ネットコンテンツ全般から日々のお役立ち情報まで分かりやすくお届け | ふかふか交易所

ふかふか交易所

HP・ブログ関連

コピペでOK!ドロップダウンメニューをHTMLとCSSだけで超簡単に作成する方法

投稿日:

サイト内のカテゴリーが多くなってしまったとき、全てを横並びにすると場所をとってしまう上、見づらくなってしまいますよね。

今回はそんな場合にオススメなのは『ドロップダウンメニュー』です!マウスカーソルを乗せると項目が下にズラッと出現するアレです。

 

▼ドロップダウンメニューの例

※スマホの場合は表示が崩れる場合があります。そもそもドロップダウンメニューはマウスオーバー時に反応するためスマホには合いません。PC表示のみの使用をおすすめします。

 

上のドロップダウンメニューにマウスカーソルを置いてみてください。小項目のある『日常』『エンタメ関連』にマウスオーバーしたときに、項目がアニメーション付きでズラッと下に出現すると思います。

そして実はこのドロップメニュー、HTMLとCSSだけで簡単に設置することができるのです!(゚∀゚) もちろんカスタマイズも容易です。

今回はこのドロップメニューの設置方法について解説したいと思います!

上で紹介したようなドロップダウンメニューは、ここで紹介するコードをコピペするだけで簡単に設置することができます。

HTMLコードの貼り付け

まず、ドロップダウンメニューを設置したいページの、設置したい個所に以下のHTMLコードを貼り付けてください。

※それぞれの大項目・小項目の名前とリンク先URLは、任意の名前に変更してください。

<ul id="dropmenu" style="clear:both;">
<li><a href="/">大項目1</a>
</li>
<li><a href="/">大項目2</a>
<ul>
<li><a href="/">小項目1</a></li>
<li><a href="/">小項目2</a></li>
<li><a href="/">小項目3</a></li>
<li><a href="/">小項目4</a></li>
<li><a href="/">小項目5</a></li>
<li><a href="/">小項目6</a></li>
<li><a href="/">小項目7</a></li>
</ul>
</li>
<li><a href="/">大項目2</a>
<ul>
<li><a href="/">小項目1</a></li>
<li><a href="/">小項目2</a></li>
</ul>
</li>
<li><a href="/">大項目3</a>
</li>
<li><a href="/">大項目4</a>
</li>
</ul>

すると以下のようなメニューが出現します。

↑このままでは、まだドロップダウンメニューにはほど遠い状態なのでCSSで形を整える必要があります。

CSSコードの貼り付け

次にメニューのスタイルを整えるため、以下のCSSコードを貼り付けてください。

※一応ベンダープレフィックスコードを付けているため、IE・Chrome・FireFox・Edgeなどすべてのプラウザに対応しているはずです

#dropmenu {
position: relative;
list-style-type: none;
width: 640px;
height: 30px;
margin: 20px 0 20px 0;
padding: 0;
background: #fff;
border-bottom: 1px solid #007CC3;
border-radius: 3px 3px 0 0;
}
#dropmenu li {
width: 18%;
float: left;
margin: 0;
padding: 0;
text-align: center;
border-right:1px #fff solid;
}
#dropmenu li a {
display: block;
margin: 0;
padding: 10px 0 6px;
color: #000;
background: #ededed;
font-size: 14px;
line-height: 1;
text-decoration: none;
}
#dropmenu li ul {
position: absolute;
top: 100%;
right: 39px;
list-style: none;
margin: 0;
border-radius: 0 0 3px 3px;
}
#dropmenu li ul li{
overflow: hidden;
width: 600px;
height: 0;
color: #000;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
#dropmenu li ul li a{
padding: 10px 15px;
background: #E8F6FF;
text-align: left;
font-size: 12px;
font-weight: normal;
}
#dropmenu li:hover > a{
background: #CFE6F7;
color: #007CC3;
}
#dropmenu > li:hover > a{
border-radius: 3px 3px 0 0;
}
#dropmenu li:hover ul li{
overflow: visible;
height: 29px;
border-top: 1px solid #007CC3;

}
#dropmenu li:hover ul li:first-child{
border-top: 0;
}
#dropmenu li:hover ul li:last-child{
border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
border-radius: 0 0 3px 3px;
}

上記のCSSを適用することで、先ほどのメニューが↓のようなドロップダウンメニューのスタイルになります。

 

HTMLコードをみると分かると思いますが、

  • <li></li>で囲まれた部分 ⇒ 大項目行
  • <ul><li></li></ul>で囲まれた部分 ⇒ 小項目行

という構成になっています。なので大項目の下に小項目を増やしたい(or減らしたい)場合は、上で示すHTMLコードにならって任意の数の小項目行を追加(or削除)してください。

 

※CSSが適用されない場合

CSSコードを適用しても見た目が変化しない場合があります。

そういった場合、おそらくプラウザに残っている昔のキャッシュが原因の可能性が高いです。

プラウザの『設定』などから『キャッシュのクリア』もしくは『キャッシュの削除』などを選択し、残っているキャッシュの削除を行ってください。

削除後にページを更新すると、スタイルが適用されていると思います。

スタイルのカスタマイズ

上で紹介したコードをそのまま貼り付けた場合、初期の状態では私好みのデザインになっています。ドロップダウンメニュー自体のスタイル(デザイン)は、CSSコードをいじることで簡単に変更できます!

▼各CSS行に対応する変更内容(行番号は上のCSSコピー部のもの)

行番号 属性 変更内容
1行目 #dropmenu ドロップダウンメニュー自体(全体)のスタイル
12行目 #dropmenu li 大項目のスタイル
30行目 #dropmenu li ul 小項目(全体)のスタイル
38行目 #dropmenu li ul li 小項目(個別)のスタイル

 

ページをスッキリさせるためにドロップダウンメニューを使おう!

ドロップダウンメニュー設置方法の紹介は以上です!単にコードをコピペするだけで、なかなかオシャレなメニューが作れると思います。

多すぎる項目を、ただそのままズラッとページ上に並べてしまうと見た目的にも利便性的にも良くありません。

ドロップダウンメニューを活用し、オシャレでスッキリしたサイトを作っちゃいましょう!(゚∀゚)

-HP・ブログ関連
-, , , , , , , , , , , , , , ,

Copyright© ふかふか交易所 , 2019 All Rights Reserved.