ポップアップ(ドロップダウン) メニュー のようなUIを作成する - CSSによるポップアップメニュー - CSS
デザインにこだわったWebサイトではWindows アプリのメニューのようなポップアップメニューが表示されるサイトがあります。この記事ではCSSを用いてポップアップメニューのUIを実現する方法を紹介します。
シンプルなポップアップメニュー
シンプルなポップアップメニューのコードを紹介します。
コード
以下のコードを記述します。あいまいさを無くすためCSSは制約の強い書式で記述してあります。
HTMLファイル (popupmenu01.html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="popupmenu01.css" />
</head>
<body>
メニューサンプル
<ul id="menu">
<li>
メニュー1
<ul>
<li><a href="">サブメニュー1-1</a></li>
<li><a href="">サブメニュー1-2</a></li>
<li><a href="">サブメニュー1-3</a></li>
</ul>
</li>
<li>
メニュー2
<ul>
<li><a href="">サブメニュー2-1</a></li>
<li><a href="">サブメニュー2-2</a></li>
</ul>
</li>
<li>
メニュー3
<ul>
<li><a href="">サブメニュー3-1</a></li>
<li><a href="">サブメニュー3-2</a></li>
<li><a href="">サブメニュー3-3</a></li>
</ul>
</li>
</ul>
</body>
</html>
解説
HTMLファイル側はネストされたul(順序のないリスト)を記述します。
スタイルシートが適用されていない場合の表示は下図となります。
CSSファイル (popupmenu01.css)
#menu {
list-style: none;
padding: 0px 0px 0px 0px;
}
#menu>li {
display: block;
position: relative;
float: left;
background-color:#808080;
color: #ffffff;
}
#menu>li:hover {
background-color: #ff6a00;
}
#menu>li>ul {
list-style: none;
display: none;
padding: 0px 0px 0px 0px;
}
#menu>li:hover>ul {
display: block;
position: absolute;
}
#menu>li:hover>ul>li {
float: none;
}
#menu>li:hover>ul>li>a {
background: #ff6a00;
}
#menu>li:hover>ul>li>a:hover {
background: #ff0000;
}
#menu>li>ul>li>a {
display: block;
text-decoration: none;
color: #ffffff;
white-space: nowrap;
}
解説
#menu {
list-style: none;
padding: 0px 0px 0px 0px;
}
メインのメニュー部分のスタイルを設定しています。list-styleを"none"に設定し、見出しの記号を非表示にします。また、paddingを0pxに設定し、見出しの記号のマージンを無くします。
#menu>li {
display: block;
position: relative;
float: left;
background-color:#808080;
color: #ffffff;
}
メインのメニューの文字部分のスタイルを設定しています。displayを"block"に設定し、floatを"left"にすることで左詰めで並ぶように設定します。
#menu>li:hover {
background-color: #ff6a00;
}
メインのメニューにマウスオーバーした場合の処理です。背景色をオレンジにします。
#menu>li>ul {
list-style: none;
display: none;
padding: 0px 0px 0px 0px;
}
ネストされたULの要素のスタイルです。この領域はポップアップで表示されるため、初期状態ではdisplayを"nono"に設定しておき非表示の状態にします。
#menu>li:hover>ul {
display: block;
position: absolute;
}
上記のULの要素で親のli要素にマウスオーバーした場合のスタイル設定です。親のli要素にマウスオーバーしたため、displayプロパティを"block"に変更し、子要素のULを表示します。
#menu>li:hover>ul>li {
float: none;
}
ポップアップ表示されたメニューのli要素のスタイルを設定します。
#menu>li:hover>ul>li>a {
background: #ff6a00;
}
ポップアップ表示されたメニューのli要素のリンク文字のスタイルを設定します。今回の例ではオレンジの背景色に設定します。
#menu>li:hover>ul>li>a:hover {
background: #ff0000;
}
ポップアップ表示されたメニューのli要素のリンク文字にマウスオーバーした際のスタイルを設定します。今回の例では赤背景に設定します。
#menu>li>ul>li>a {
display: block;
text-decoration: none;
color: #ffffff;
white-space: nowrap;
}
ポップアップ表示されるメニューのli要素のリンク文字のデフォルトのスタイルを設定します。文字色とワードラップをしない設定をしてします。またリンクをブロック要素として指定しています。
実行結果
HTMLファイルを表示します。下図の画面が表示されます。
[メニュー1]の位置にマウスポインタを乗せるとポップアップメニューが開きます。
隣の項目にポインタを移動すると隣のポップアップメニューが表示されます。
一番右も同様です。
ポップアップしたサブメニューにマウスポインタを乗せると背景色が変わり、マウスポインタがリンクの選択ポインタに変わります。
親メニューも繊維可能なメニューの場合
親メニューもリンクになっており、親メニューをクリックした場合も遷移できるようにするコードを紹介します。
コード
以下のコードを記述します。あいまいさを無くすためCSSは制約の強い書式で記述してあります。
HTMLファイル (popupmenu02.html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="popupmenu02.css" />
</head>
<body>
<ul id="menu">
<li>
<a href="">メニュー1</a>
<ul>
<li><a href="">サブメニュー1-1</a></li>
<li><a href="">サブメニュー1-2</a></li>
<li><a href="">サブメニュー1-3</a></li>
</ul>
</li>
<li>
<a href="">メニュー2</a>
<ul>
<li><a href="">サブメニュー2-1</a></li>
<li><a href="">サブメニュー2-2</a></li>
</ul>
</li>
<li>
メニュー3
<ul>
<li><a href="">サブメニュー3-1</a></li>
<li><a href="">サブメニュー3-2</a></li>
<li><a href="">サブメニュー3-3</a></li>
</ul>
</li>
</ul>
</body>
</html>
解説
HTMLファイルは先のシンプル版とほぼ同じです。メニュー1、メニュー2の親メニューの文字列部分がリンクになっている部分のみ異なります。
CSSファイル (popupmenu02.css)
#menu {
list-style: none;
padding: 0px 0px 0px 0px;
}
#menu>li {
display: block;
position: relative;
float: left;
background-color:#808080;
color: #ffffff;
}
#menu>li>a {
text-decoration:none;
color: #ffffff;
}
#menu>li:hover {
background-color: #ff6a00;
}
#menu>li>ul {
list-style: none;
display: none;
padding: 0px 0px 0px 0px;
}
#menu>li:hover>ul {
display: block;
position: absolute;
}
}
#menu>li:hover>ul>li {
float: none;
}
#menu>li:hover>ul>li>a {
background: #ff6a00;
}
#menu>li:hover>ul>li>a:hover {
background: #ff0000;
}
#menu>li>ul>li>a {
display: block;
text-decoration: none;
color: #ffffff;
white-space: nowrap;
}
解説
先のシンプル版のCSSとほぼ同じです。変更点は下記の部分です。
#menu>li>a {
text-decoration:none;
color: #ffffff;
}
親メニューのリンク文字列部分のテキストスタイルを設定しています。親メニューはul(id=menu)内のli内にあるaタグですのでセレクタは上記の"#menu>li>a"としています。
実行結果
HTMLファイルを表示します。下図の画面が表示されます。
[メニュー1]にマウスカーソルを載せます。[メニュー1]はリンクですのでマウスポインタがリンク選択のポインタ形状に代わります。また、サブメニューがポップアップ表示します。
[メニュー2]にマウスカーソルを乗せた場合も同様の動作をします。
[メニュー3]の場合も同様ですが、[メニュー3]はリンクとして記述はしていないため、文字をクリックすることはできません。マウスポインタの形状もIビームの形状になっています。
ポップアップ表示したサブメニューにマウスポインタを乗せると背景色が赤く変わります。また、マウスポインタがリンク選択時の形状に変わります。
応用編
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
