メニュー項目が多すぎるとメニューのものをグループ分けし、そのグループを横並びリンクとして作っている場合があります。さらに、そのリストにカーソルを載せるとそれぞれから下にサブメニューがでてくることがあります。今日はそんなドロップダウン型メニューを作っていきたいと思います。7月21日記事

イメージ
大きなカテゴリにあてると下側にサブメニューがあらわれる

さらにサブメニューにカーソルを合わせると色も変わる



目次



作る上で注意したいこと

  1. デザイン決めとく。
    1. メインメニュー、サブメニューのそれぞれの背景色と文字色)
    2. メインメニュー、サブメニューのhover時のそれぞれの背景色と文字色)

4種類×2の8つの色を決めておかなければいけません。けっこう厄介でした・・・最終的には配色決めで懲りてしまったので、モノトーンで書いていきます(笑)

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を忘れてはいけません。 色の扱いが劇的に増えるため、色をあらかじめ決めておくとよいです。 今回は白、黒、灰色の組み合わせで行っていきましたが、 カラーになると配色のことを考えながら作っていくこと が必要です。 また、jQueryのほうでは、 show,hideのみでただ単に「表示、非表示」ができますが、slideUP,slideDownを使えば「上にあがっていったり、下に下がっていったり」すること ができます。


添付ファイル