JavaScript + Ajax 実践サンプル集 - Dropdown Menu (Pull up 1)

Dropdown Menu (Pull up 1)　《プログラマーがネットで副収入を得る方法とは》

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、スタイルシートとイメージを使用してプルアップ型のメニューを表示します。マウスをメニューに移動するとサブメニューがプルアップします。サブメニューにマウスを移動すると下位メニューがフライアウトします。

このサンプルで使用しているイメージです。イメージを右クリックしてダウンロードしてください。

#menu li a.sub
{
  background: #333 url(up-arrow.gif) no-repeat right center;
}
#menu li.current a.sub
{
  color: #fff;
  background: #084 url(up-arrow.gif) no-repeat right center;
}
#menu :hover ul li a.fly
{
  background: #333 url(right-arrow.gif) no-repeat right center;
}
#menu :hover ul li.currentsub a.fly
{
  background: #084 url(right-arrow.gif) no-repeat right center;
  color: #fff;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Menu - Dropdown Menu Pull Up 1</title>
<link href="DhtmlAdvanced/cssMenus/cssmenus.css" rel="stylesheet" type="text/css" />
<link href="DhtmlAdvanced/cssDropdownPullUp1/dropdown_two.css" rel="stylesheet" type="text/css" />
<script src="DhtmlAdvanced/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
// current, currentsub, currentfly
$(function() {
  $("#menu li").click(function() {
    $("#menu li").removeClass("current");
    $(this).addClass("current");
    $("#h2left").html($(this).children("a").html());
  });    
});
</script>

</head>
<body>

<div id="header">
    <h1>CSS Menu<br />(Pull up 1)</h1>
    <div id="pad"></div>
    <div id="menuPositioner">
    <div id="menuHolder">   
 
      <ul id="menu">
              
	      <li><a href="#"><b>jQuery</b></a></li>
	      <li><a href="#"><b>Selectors</b></a></li>
	      <li><a class="sub" href="#"><b>Events</b></a>
	      
		      <ul class="sub1">
	          		      
			      <li><a class="fly" href="#url">Events 1</a>
			      
				      <ul class="fly1">
			          				      
					      <li><a href="#url">Events 1.1</a></li>
					      <li><a href="#url">Events 1.2</a></li>
					      <li><a href="#url">Events 1.3</a></li>
					      <li><a href="#url">Events 1.4</a></li>
					      <li><a href="#url">Events 1.5</a></li>
					      <li><a href="#url">Events 1.6</a></li>
				      </ul>
			      
			      </li>
			      <li><a class="fly" href="#url">Events 2</a>
			      
				      <ul class="fly2">
					      <li><a href="#url">Events 2.1</a></li>
					      <li><a href="#url">Events 2.2</a></li>
					      <li><a href="#url">Events 2.3</a></li>
					      <li><a href="#url">Events 2.4</a></li>
					      <li><a href="#url">Events 2.5</a></li>
				      </ul>
			      
			      </li>
			      <li><a href="#url">Events 3</a></li>
			      <li><a href="#url">Events 4</a></li>
			      <li><a class="fly" href="#url">Events 5</a>
			      
				      <ul class="fly3">
					      <li><a href="#url">Events 5.1</a></li>
					      <li><a href="#url">Events 5.2</a></li>
					      <li><a href="#url">Events 5.3</a></li>
				      </ul>
			      
			      </li>
		      </ul>
	      
	      </li>
	      <li><a class="sub" href="#"><b>Traversing</b></a>
	      
		      <ul class="sub2">
			      <li><a href="#url">Traversing 1</a></li>
			      <li><a href="#url">Traversing 2</a></li>
			      <li><a href="#url">Traversing 3</a></li>
			      <li><a href="#url">Traversing 4</a></li>
			      <li><a href="#url">Traversing 5</a></li>
			      <li><a href="#url">Traversing 6</a></li>
		      </ul>
	      
	      </li>
	      <li><a class="sub" href="#"><b>UI Effects</b></a>
	      
		      <ul class="sub3">
			      <li><a href="#url">UI Effects 1</a></li>
			      <li><a href="#url">UI Effects 2</a></li>
			      <li><a href="#url">UI Effects 3</a></li>
			      <li><a href="#url">UI Effects 4</a></li>
		      </ul>
	      
	      </li>
	      <li><a href="#"><b>Manipulating</b></a></li>
	      <li><a href="#"><b>Ajax</b></a></li>
      </ul>    
  
    </div>
    </div>
  </div>
  
  <div id="content">
    <div class="leftCol">
      <div class="inner">
        <h2 id="h2left">jQuery</h2>
        <p>
        </p>
      </div>
    </div>      
    <div class="rightCol">
      <div class="inner">
        <h2 id="h2right" >JavaScript + Ajax</h2>
        <p>
        </p>
      </div>
    </div>      
    <br class="clear" />
  </div>
  
</div>

<div id="footerTop">
  <div id="footerT">
    <div class="leftCol">
      <div class="inner">
        <p>Copyright ©2009 </p>
      </div>
    </div>
    <div class="rightCol foot">
      <div class="inner"> 
      </div>
    </div>
    <br class="clear" />
  </div>
</div>

</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
$(function() {
  $("#menu li").click(function() {
    $("#menu li").removeClass("current");
    $(this).addClass("current");
    $("#h2left").html($(this).children("a").html());
  });    
});

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
#pad
{
  height: 155px;
}
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssmenus.co.uk
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#menu
{
  padding: 0 0 0 10px; /* 0 0 0 30 */
  margin: 0;
  list-style: none;
  height: 25px;
  position: relative;
  z-index: 500;
  font-family: arial, verdana, sans-serif;
}
#menu li
{
  float: left;
  margin-right: 1px;
}
#menu li a
{
  display: block;
  float: left;
  height: 25px;
  line-height: 25px;
  background: #333;
  color: #ccc;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
  padding: 0 30px 0 20px;
}


#menu table
{
  border-collapse: collapse;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#menu li a:hover
{
  z-index: 200;
  position: relative;
  color: #fff;
  background-color: #0c6;
}
#menu li:hover
{
  position: relative;
  z-index: 200;
}

#menu li:hover > a
{
  color: #fff;
  background: #0c6;
}
#menu li:hover > a.sub
{
  color: #fff;
  background-color: #0c6;
}

#menu li.current a
{
  color: #fff;
  background: #084;
}

#menu li a.sub
{
  background: #333 url(up-arrow.gif) no-repeat right center;
}
#menu li.current a.sub
{
  color: #fff;
  background: #084 url(up-arrow.gif) no-repeat right center;
}
#menu li:hover ul
{
  left: 0;
  top: auto;
  bottom: 25px;
  width: 120px;
  background: #444;
}
#menu a:hover ul
{
  left: 0;
  top: auto;
  bottom: 0;
  width: 120px;
  background: #444;
}

/* keep the 'next' level invisible by placing it off screen. */

#menu ul, #menu :hover ul ul
{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu :hover ul :hover ul
{
  left: 120px;
  top: auto;
  background: #222;
  white-space: nowrap;
  width: 100px;
  z-index: 200;
  height: auto;
}
#menu :hover ul :hover ul.fly3
{
  bottom: auto;
  top: -53px; /* -53 */
}
#menu :hover ul :hover ul.fly2
{
  bottom: auto;
  top: -27px; /* -27 */
}
#menu :hover ul :hover ul.fly1
{
  bottom: auto;
  top: -27px; /* -27 */
}

#menu :hover ul li
{
  margin: 0;
  border-top: 1px solid #666;
}
#menu :hover ul li a
{
  width: 120px;
  padding: 0;
  text-indent: 10px;
  background: #333;
  color: #ccc;
  height: 25px;
  line-height: 25px;
}
#menu :hover ul li a.fly
{
  background: #333 url(right-arrow.gif) no-repeat right center;
}

#menu :hover ul :hover
{
  background-color: #0c6;
  color: #fff;
}
#menu :hover ul :hover a.fly
{
  background-color: #0c6;
  color: #fff;
}

#menu :hover ul li.currentsub a
{
  background: #084;
  color: #fff;
}
#menu :hover ul li.currentsub a.fly
{
  background: #084 url(right-arrow.gif) no-repeat right center;
  color: #fff;
}

#menu :hover ul :hover ul li a
{
  width: 100px;
  padding: 0;
  text-indent: 10px;
  background: #3e3e3e;
  color: #ccc;
}
#menu :hover ul :hover ul :hover
{
  background-color: #0d7;
  color: #fff;
}

#menu :hover ul :hover ul li.currentfly a, #menu :hover ul :hover ul li.currentfly a:hover
{
  background: #084;
  color: #fff;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="DhtmlAdvanced/cssMenus/cssmenus.css" rel="stylesheet" type="text/css" />
<link href="DhtmlAdvanced/cssDropdownPullUp1/dropdown_two.css" rel="stylesheet" type="text/css" />
<script src="DhtmlAdvanced/jquery-1.3.1.js" type="text/javascript"></script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div id="wrapper">

  <div id="header">
    <h1>CSS Menu<br />(Pull up 1)</h1>
    <div id="pad"></div>
    <div id="menuPositioner">
    <div id="menuHolder">   
 
      <ul id="menu">
        <!--
        <li class="current">...
        -->      
	      <li><a href="#"><b>jQuery</b></a></li>
	      <li><a href="#"><b>Selectors</b></a></li>
	      <li><a class="sub" href="#"><b>Events</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	      <!--[if lte IE 6]><table><tr><td><![endif]-->
		      <ul class="sub1">
	          <!-- 
		        <li class="currentsub">....
		        -->		      
			      <li><a class="fly" href="#url">Events 1<!--[if gte IE 7]><!--></a><!--<![endif]-->
			      <!--[if lte IE 6]><table><tr><td><![endif]-->
				      <ul class="fly1">
			          <!--
			          <li class="currentfly" >....
			          -->				      
					      <li><a href="#url">Events 1.1</a></li>
					      <li><a href="#url">Events 1.2</a></li>
					      <li><a href="#url">Events 1.3</a></li>
					      <li><a href="#url">Events 1.4</a></li>
					      <li><a href="#url">Events 1.5</a></li>
					      <li><a href="#url">Events 1.6</a></li>
				      </ul>
			      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
			      </li>
			      <li><a class="fly" href="#url">Events 2<!--[if gte IE 7]><!--></a><!--<![endif]-->
			      <!--[if lte IE 6]><table><tr><td><![endif]-->
				      <ul class="fly2">
					      <li><a href="#url">Events 2.1</a></li>
					      <li><a href="#url">Events 2.2</a></li>
					      <li><a href="#url">Events 2.3</a></li>
					      <li><a href="#url">Events 2.4</a></li>
					      <li><a href="#url">Events 2.5</a></li>
				      </ul>
			      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
			      </li>
			      <li><a href="#url">Events 3</a></li>
			      <li><a href="#url">Events 4</a></li>
			      <li><a class="fly" href="#url">Events 5<!--[if gte IE 7]><!--></a><!--<![endif]-->
			      <!--[if lte IE 6]><table><tr><td><![endif]-->
				      <ul class="fly3">
					      <li><a href="#url">Events 5.1</a></li>
					      <li><a href="#url">Events 5.2</a></li>
					      <li><a href="#url">Events 5.3</a></li>
				      </ul>
			      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
			      </li>
		      </ul>
	      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
	      </li>
	      <li><a class="sub" href="#"><b>Traversing</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	      <!--[if lte IE 6]><table><tr><td><![endif]-->
		      <ul class="sub2">
			      <li><a href="#url">Traversing 1</a></li>
			      <li><a href="#url">Traversing 2</a></li>
			      <li><a href="#url">Traversing 3</a></li>
			      <li><a href="#url">Traversing 4</a></li>
			      <li><a href="#url">Traversing 5</a></li>
			      <li><a href="#url">Traversing 6</a></li>
		      </ul>
	      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
	      </li>
	      <li><a class="sub" href="#"><b>UI Effects</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	      <!--[if lte IE 6]><table><tr><td><![endif]-->
		      <ul class="sub3">
			      <li><a href="#url">UI Effects 1</a></li>
			      <li><a href="#url">UI Effects 2</a></li>
			      <li><a href="#url">UI Effects 3</a></li>
			      <li><a href="#url">UI Effects 4</a></li>
		      </ul>
	      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
	      </li>
	      <li><a href="#"><b>Manipulating</b></a></li>
	      <li><a href="#"><b>Ajax</b></a></li>
      </ul>    
  
    </div>
    </div>
  </div>
  
  <div id="content">
    <div class="leftCol">
      <div class="inner">
        <h2 id="h2left">jQuery</h2>
        <p>
        </p>
      </div>
    </div>      
    <div class="rightCol">
      <div class="inner">
        <h2 id="h2right" >JavaScript + Ajax</h2>
        <p>
        </p>
      </div>
    </div>      
    <br class="clear" />
  </div>
  
</div>

<div id="footerTop">
  <div id="footerT">
    <div class="leftCol">
      <div class="inner">
        <p>Copyright ©2009 </p>
      </div>
    </div>
    <div class="rightCol foot">
      <div class="inner"> 
      </div>
    </div>
    <br class="clear" />
  </div>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Dropdown Menu (Pull up 1)　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Dropdown Menu (Pull up 1) 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Dropdown Menu (Pull up 1)　《プログラマーがネットで副収入を得る方法とは》