こちらの記事で紹介したドロップダウン型のメニューの余白を調整するコードを紹介します。
コード
HTMLファイル (popupmenu03.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="popupmenu03.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>
CSSファイル (popupmenu03.css)
#menu {
list-style: none;
padding: 0px 0px 0px 0px;
}
#menu>li {
display: block;
position: relative;
float: left;
background-color:#808080;
color: #ffffff;
padding: 5px 15px 5px 15px;
}
#menu>li>a {
text-decoration:none;
color: #ffffff;
}
#menu>li:hover {
background-color: #ff6a00;
}
#menu>li>ul {
display: none;
padding: 0px 0px 0px 0px;
}
#menu>li:hover>ul {
display: block;
position: absolute;
margin-top:5px;
margin-left:-15px;
}
}
#menu>li:hover>ul>li {
float: none;
}
#menu>li:hover>ul>li>a {
background: #ff6a00;
padding: 5px 15px 5px 15px;
}
#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>li {
display: block;
position: relative;
float: left;
background-color:#808080;
color: #ffffff;
padding: 5px 15px 5px 15px;
}
上記は親メニューの余白を設定しています。余白はpaddingプロパティを指定します。(Marginで指定すると外側に余白ができメニューが離れているように見えるため)
#menu>li:hover>ul {
display: block;
position: absolute;
margin-top:5px;
margin-left:-15px;
}
#menu>li:hover>ul>li>a {
background: #ff6a00;
padding: 5px 15px 5px 15px;
}
上記がポップアップ表示されるメニューの余白を設定している部分です。こちらも親メニューと同様にpaddingプロパティで余白を指定します。また、paddingの指定だけではポップアップメニューが親メニューと重なってしまうため、枠全体を定義するulのスタイルで余白分marginを調整して親メニューに重ならないようにしています。
実行結果
HTMLファイルを表示すると下図の画面が表示されます。メニュー間の余白がとられていることがわかります。
ポップアップ表示されるメニューも余白がとられています。
補足 - margin を設定しない場合
単純にmarginを記述しない場合
marginを設定しなかった場合の表示結果を紹介します。
#menu>li:hover>ul {
display: block;
position: absolute;
margin-top:5px;
margin-left:-15px;
}
の部分のmarginを設定せず、下記のコードに変更します。
#menu>li:hover>ul {
display: block;
position: absolute;
}
表示結果
上記のHTMLファイルを表示すると下図の表示となります。ポップアップメニューがメインメニューに被さって表示されています。(ただし親メニューのほうが上に表示されています。)
メニューにマウスポインタを乗せた場合も同様にメインメニューのほうが上に表示されています。
z-indexを記述した場合
メニューが重なっている外観にしたい場合は、merginを設定しないことで実現できます。ただし先の例ではポップアップメニューがメインメニューの裏側に隠れてしまいます。z-indexプロパティを設定することでこの問題を回避できます。
#menu>li:hover>ul {
display: block;
position: absolute;
margin-top:5px;
margin-left:-15px;
}
の部分を下記に変更します。
#menu>li:hover>ul {
display: block;
position: absolute;
z-index:10;
}
表示結果
HTMLファイルを表示すると下図の画面が表示されます。
Z-Indexを指定しているため、ポップアップメニュー側が上に表示されます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2021-02-03
作成日: 2013-12-10
