「jQueryで横並びメニューのドロップダウン型メニューを作る」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
メニュー項目が多すぎるとメニューのものをグループ分けし、そのグループを横並びリンクとして作っている場合があります。さらに、そのリストにカーソルを載せるとそれぞれから下にサブメニューがでてくることがあります。今日はそんなドロップダウン型メニューを作っていきたいと思います。7月21日記事
~
~
イメージ~
大きなカテゴリにあてると下側にサブメニューがあらわれる
#image(width=400,001.png)
さらにサブメニューにカーソルを合わせると色も変わる
#image(width=400,002.png)
~
~
目次
#contents
~
~
*作る上で注意したいこと
+デザイン決めとく。
++メインメニュー、サブメニューのそれぞれの背景色と文字色）
++メインメニュー、サブメニューのhover時のそれぞれの背景色と文字色）
4種類×2の８つの色を決めておかなければいけません。けっこう厄介でした・・・最終的には配色決めで懲りてしまったので、モノトーンで書いていきます（笑）
*HTML記述
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>
*CSS記述
@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;
}
*jQuery
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を忘れてはいけません。
色の扱いが劇的に増えるため、色をあらかじめ決めておくとよいです。
今回は白、黒、灰色の組み合わせで行っていきましたが、&color(red){カラーになると配色のことを考えながら作っていくこと}が必要です。
また、jQueryのほうでは、&color(red){show,hideのみでただ単に「表示、非表示」ができますが、slideUP,slideDownを使えば「上にあがっていったり、下に下がっていったり」すること}ができます。
メニュー項目が多すぎるとメニューのものをグループ分けし、そのグループを横並びリンクとして作っている場合があります。さらに、そのリストにカーソルを載せるとそれぞれから下にサブメニューがでてくることがあります。今日はそんなドロップダウン型メニューを作っていきたいと思います。7月21日記事
~
~
イメージ~
大きなカテゴリにあてると下側にサブメニューがあらわれる
#image(width=600,001.png)
さらにサブメニューにカーソルを合わせると色も変わる
#image(width=600,002.png)
~
~
目次
#contents
~
~
*作る上で注意したいこと
+デザイン決めとく。
++メインメニュー、サブメニューのそれぞれの背景色と文字色）
++メインメニュー、サブメニューのhover時のそれぞれの背景色と文字色）
4種類×2の８つの色を決めておかなければいけません。けっこう厄介でした・・・最終的には配色決めで懲りてしまったので、モノトーンで書いていきます（笑）
*HTML記述
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>
*CSS記述
@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;
}
*jQuery
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を忘れてはいけません。
色の扱いが劇的に増えるため、色をあらかじめ決めておくとよいです。
今回は白、黒、灰色の組み合わせで行っていきましたが、&color(red){カラーになると配色のことを考えながら作っていくこと}が必要です。
また、jQueryのほうでは、&color(red){show,hideのみでただ単に「表示、非表示」ができますが、slideUP,slideDownを使えば「上にあがっていったり、下に下がっていったり」すること}ができます。
