の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

【CSS】CSSで作るプルダウン/ドロップダウンメニュー

      2015/01/15

CSS初心者でも簡単に実装できるプルダウン/ドロップダウンメニューをご紹介します。

スムーズに導入できるように、メニュー以外も含めたサンプルページとして説明します。

CSS_menu

CSSで作るプルダウンメニューサンプル

CSSソース

<style type="text/css">
/* wrapper*/
.wrapper{
	width:600px;
	margin:0 auto;
	padding:0;
}
/* 1.全体設定 */
#cssmenu {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
/* 2.メインメニュー設定 */
#cssmenu li {
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
}
/* 3.装飾 */
#cssmenu li a {
	margin: 0;
	padding: 10px;
	display: block;
	width: 130px;
	background-color: #CCC;
	font-size: 14px;
	color: #000;
	text-decoration: none;
}
/* 4.マウスオーバー設定 */
#cssmenu li a:hover {
	background-color: #999;
}
/* 5.サブメニュー設定 */
#cssmenu li ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: absolute;
	display: none;/* デフォルト非表示*/
}
/* 6.サブメニューの表示*/
#cssmenu li:hover ul {
	display: block;
}
</style>

CSSの構成

CSSは6つのブロックに分かれます。それぞれの説明は次の通りです。

  1. 全体の設定です。メニューとなるULタグにIDとして設定します。
  2. メインメニューを横並びにする設定です。
  3. aタグに対して装飾します。影響範囲はメインメニューとサブメニューの両方です。
  4. マウスオーバーの設定です。単純に背景色を変更する設定をしています。
  5. サブメニューの設定です。ULタグです。デフォルトで非表示にしています。
  6. サブメニューをマウスオーバーで表示する設定です。

ポイントは3のaタグの装飾です。

フォントサイズを決めたり、全体のイメージカラーなどもここで設定します。

HTMLのソース

<div class="wrapper">
<div>ロゴ</div>
<ul id="cssmenu">
<li><a href="#">メインメニューA</a>
<ul>
<li><a href="#">サブメニューA-1</a></li>
</ul>
</li>
<li><a href="#">メインメニューB</a>
<ul>
<li><a href="#">サブメニューB-1</a></li>
<li><a href="#">サブメニューB-2</a></li>
</ul>
</li>
<li><a href="#">メインメニューC</a>
<ul>
<li><a href="#">サブメニューC-1</a></li>
<li><a href="#">サブメニューC-2</a></li>
<li><a href="#">サブメニューC-3</a></li>
</ul>
</li>
<li><a href="#">メインメニューD</a>
<ul>
<li><a href="#">サブメニューD-1標記が長い場合は折り返して表示されます。</a></li>
<li><a href="#">サブメニューD-2</a></li>
<li><a href="#">サブメニューD-3</a></li>
<li><a href="#">サブメニューD-4</a></li>
</ul>
</li>
</ul>
<div style="clear:left; height:10px;"></div>
<h1>見出し1</h1>
<p>サンプルテキスト</p>
</div>

HTMLの解説

div class = wrapper で width:600px; の真ん中寄せにしています。

HTMLのポイントはメニューの幅とfloatの解除です。

メニューの幅

まずメニューの幅は widthが130pxでpaddingが10pxついてるので、一つのメニューの幅が150pxとなります。

メニューは4つなので合計600px。wrapperのwidthも600pxなので隙間なくぴったりとなります。

float解除

ulタグを閉じた後のDivでfloatを解除しています。

通常clearfixを使うところですが、わかりやすさを優先してDivタグ使ってみました。

見出しh1との距離はこのheightで設定しています。

height:0;にすると隙間をなくすこともできます。

まとめ

CSSで実装するプルダウンメニューを紹介しました。

floatの解除が最大のポイントかと思います。

 - JS,PHP,CSS , ,

336-280

  関連記事

文字化けしたファイルがWebサーバーから削除できないときの対処方法

文字化けしているファイルが、Webサーバーから削除できない場合の対処方法を紹介し …

SNS
SNSのシェアボタンをまとめて作る方法

Twitter、Facebook、はてブ、Google+でシェアするためのボタン …

【Webアプリ】iPhoneで画面の向きを検知したい|スマホの傾きを検知して表示する方法

Webページでスマホの傾きを検知する方法を紹介します。 手順 1.HEADタグ内 …

ulタグ、liタグを使った横並びメニューの作成方法

はじめに ヘッダーなどに使う横並びのメニュー。 HTMLの構造的にもulタグ、l …

CSSボタンデザイン
CSSで実装する見た目もコードもシンプルなボタンサンプル【決定版】

シンプルで、飽きずに、フラットデザインっぽくても、アフォードする、そんなボタンを …