メニュー項目が多すぎるとメニューのものをグループ分けし、そのグループを横並びリンクとして作っている場合があります。さらに、そのリストにカーソルを載せるとそれぞれから下にサブメニューがでてくることがあります。今日はそんなドロップダウン型メニューを作っていきたいと思います。7月21日記事
イメージ
大きなカテゴリにあてると下側にサブメニューがあらわれる
さらにサブメニューにカーソルを合わせると色も変わる
目次
liタグのなかにliタグを入れるのが特徴です。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>メニュー</title>
</head>
<body>
<div class="menunav">
<ul id="menu">
<li><a href="#">ホーム</a></li>
<li><a href="#">新着情報</a>
<ul class="sub">
<li><a href="#">新着</a></li>
<li><a href="#">プレスリリース</a></li>
<li><a href="#">重要情報</a></li>
</ul>
</li>
<li><a href="#">試験概要</a>
<ul class="sub">
<li><a href="#">ITパスポート</a></li>
<li><a href="#">基本情報技術者試験</a></li>
<li><a href="#">応用情報技術者試験</a></li>
</ul>
</li>
<li><a href="#">過去問広場</a>
<ul class="sub">
<li><a href="#">午前問題</a></li>
<li><a href="#">午後問題</a></li>
<li><a href="#">午前問題解説コンテンツ</a></li>
<li><a href="#">午後問題解説コンテンツ</a></li>
</ul>
</li>
<li><a href="#">お問い合わせ</a>
<ul class="sub">
<li><a href="#">よくあるご質問</a></li>
<li><a href="#">お問い合わせ先</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
.menunav ul#menu {
margin: 20px 20px 0px 20px;
padding: 0px;
height: 40px;
}
.menunav ul#menu li {
float: left;
width: 180px;
height: 40px;
list-style-type: none;
position: relative;/*subメニューを縦方向にメニューを並べるために必要*/
}
.menunav ul#menu a {
background: #000;
color: #FFF;
line-height: 40px;
text-align: center;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
.menunav ul#menu a:hover {
background: #CCC;
color: #000;
}
.menunav ul#menu ul.sub {
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: #666;
margin: 0px;
padding: 0px;
display: none;
position: absolute;
}
.menunav ul#menu ul.sub li {
width: 195px; /*180pxよりちょっと大きくしておく。*/
height: 35px;
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #000;
}
.menunav ul#menu ul.sub li a {
background: #FFF;
color: #000;
line-height: 35px;
text-align: left;
text-indent: 5px;
}
.menunav ul#menu ul.sub li a:hover {
background: #CCC;
color: #000;
}
headタグ内に以下のものを書きます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#menu li').hover(function(){
$('ul',this).slideDown();//上から落ちてくるようならslideDown,普通にみせるならshow
},
function(){
$('ul',this).hide();//すぐに隠すならhide,上に上がっていくようにするならslideUP
});
});
</script>
position:relativeとposition:relativeを忘れてはいけません。 色の扱いが劇的に増えるため、色をあらかじめ決めておくとよいです。 今回は白、黒、灰色の組み合わせで行っていきましたが、 カラーになると配色のことを考えながら作っていくこと が必要です。 また、jQueryのほうでは、 show,hideのみでただ単に「表示、非表示」ができますが、slideUP,slideDownを使えば「上にあがっていったり、下に下がっていったり」すること ができます。
