Webサイト制作におけるJavascriptを使わないプルダウンメニュー（ナビ）の作り方

HTML CSS

Webサイト制作において、jQuery（Javascript）を使わないでプルダウンするメニュー（ナビ）の作り方を
まとめておく。

画像を使わない場合

ポイントは、以下の通り。

  • HTMLで２つのリスト（通常のメニュー部にあたるulタグ-liタグとプルダウンして出てくるサブメニュー用のulタグ-liタグ）を入れ子にする。
  • メニュー部をマウスでホーバーするまでサブメニューのリストの表示を消しておく（display: none;）。
  • メニュー部をマウスでホーバーしたらサブメニューのリストを表示する（display: block; ※noneを解除したいだけなので、display: inlineでも可）。


以下、コード。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>プルダウンメニュー</title>
<style>
/* reset ---------------------------------------------------*/
body, div, p, ul, li {
  margin: 0;
  padding: 0;
}
a {
  text-decoration:none;		
}
/* プルダウンメニュー ------------------------------------*/
ul {
  list-style:none;		
}
ul.pulldownmenu {
  width: 760px;		
}
ul.pulldownmenu li {
  float: left;
  width: 150px;
  height: 40px;
  margin: 10px 1px;
  line-height: 3;
}
ul.pulldownmenu li ul li {
  margin: 0;
  clear: both;
}
ul.pulldownmenu a {
  color: #fff;
  background:#6699cc;		
}
ul.pulldownmenu a:hover {
  background:#666699;		
}
ul.pulldownmenu li a {
  display: block;
  width: 150px;
  height: 40px;	
  text-align:center;	
}
/*プルダウンで表示される部分の表示を消す--*/
ul.pulldownmenu li ul{
  display: none;
}
/*ホーバーでメニューを表示--*/
ul.pulldownmenu li:hover ul {
  display: block;		
}
</style>
</head>
<body>
<div id="content">
  <div id="gnavi">
    <ul class="pulldownmenu">
      <li><a href="#">メニュー１</a>
      　<ul>
        　<li><a href="#">サブメニュー１_1</a></li>
          <li><a href="#">サブメニュー１_2</a></li>
          <li><a href="#">サブメニュー１_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>
          <li><a href="#">サブメニュー2_3</a></li>
          <li><a href="#">サブメニュー2_4</a></li>
          <li><a href="#">サブメニュー2_5</a></li>
          <li><a href="#">サブメニュー2_6</a></li>
        </ul>
      </li>
      <li><a href="#">メニュー３</a>
        <ul>
          <li><a href="#">サブメニュー3_1</a></li>
        </ul>
      </li>
      <li><a href="#">メニュー4</a></li>
      <li><a href="#">メニュー5</a>
        <ul>
          <li><a href="#">サブメニュー5_1</a></li>
          <li><a href="#">サブメニュー5_2</a></li>
          <li><a href="#">サブメニュー5_3</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- gnavi end --> 
</div><!-- content end-->
</body>
</html>

以下、表示結果。
←クリックで拡大表示

画像を使う場合

ポイントは、以下の通り。

  • サブメニュー部にツリー構造のような線を表示する場合は、classを指定してサブメニュー部の一番下の部分とそれ以外の部分とを区別する。
  • ホーバー時のパターンも忘れないように用意する。

以下、用意する背景画像例。
←クリックで拡大表示

以下、コード。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>プルダウンメニュー</title>
<style>
/* reset ---------------------------------------------------*/
body, div, p, ul, li {
　margin: 0;
　padding: 0;
}
a {
　text-decoration:none;
}
/* プルダウンメニュー ------------------------------------*/
ul {
　list-style:none;
}
ul.pulldownmenu {
　width: 760px;
}
ul.pulldownmenu li {
　float: left;
　width: 150px;
　height: 40px;
　margin: 10px 1px;
　line-height: 3;
}
ul.pulldownmenu li ul li {
　margin: 0;
　clear: both;
}
ul.pulldownmenu li ul li a {
　vertical-align:central;
}
ul.pulldownmenu li a.menu {
　background:url(img/non_js_menu2.jpg) no-repeat;
}
ul.pulldownmenu li ul li a.sub1 {
　background:url(img/non_js_menu2.jpg) no-repeat 0 -80px;
}
ul.pulldownmenu li ul li a.sub2 {
　background:url(img/non_js_menu2.jpg) no-repeat 0 -160px;
}
ul.pulldownmenu li a {
　display: block;
　width: 150px;
　height: 40px;
　padding-left:45px;
　font-size: 14px;
}
ul.pulldownmenu a.menu:hover {
　background-position:0 -40px;
}
ul.pulldownmenu li ul li a.sub1:hover {
　background-position:0 -120px;
}
ul.pulldownmenu li ul li a.sub2:hover {
　background-position:0 -200px;
}
/*--プルダウンで表示される部分の表示を消す--*/
ul.pulldownmenu li ul {
　display: none;
}
/*--ホーバーでメニューを表示--*/
ul.pulldownmenu li:hover ul {
　display: block;
}
</style>
</head>
<body>
<div id="content">
  <div id="gnavi">
    <ul class="pulldownmenu">
      <li><a href="#" class="menu">メニュー１</a>
        <ul>
          <li><a href="#" class="sub1">サブメニュー１_1</a></li>
          <li><a href="#" class="sub1">サブメニュー１_2</a></li>
          <li><a href="#" class="sub2">サブメニュー１_3</a></li>
        </ul>
      </li>
      <li><a href="#" class="menu">メニュー2</a>
        <ul>
          <li><a href="#" class="sub1">サブメニュー2_1</a></li>
          <li><a href="#" class="sub1">サブメニュー2_2</a></li>
          <li><a href="#" class="sub1">サブメニュー2_3</a></li>
          <li><a href="#" class="sub1">サブメニュー2_4</a></li>
          <li><a href="#" class="sub1">サブメニュー2_5</a></li>
          <li><a href="#" class="sub2">サブメニュー2_6</a></li>
        </ul>
      </li>
      <li><a href="#" class="menu">メニュー３</a>
        <ul>
          <li><a href="#" class="sub2">サブメニュー3_1</a></li>
        </ul>
      </li>
      <li><a href="#" class="menu">メニュー4</a> </li>
      <li><a href="#" class="menu">メニュー5</a>
        <ul>
          <li><a href="#" class="sub1">サブメニュー5_1</a></li>
          <li><a href="#" class="sub1">サブメニュー5_2</a></li>
          <li><a href="#" class="sub2">サブメニュー5_3</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- gnavi end --> 
</div>
<!-- content end-->
</body>
</html>

以下、表示結果。
←クリックで拡大表示