(cache) JavaScript + Ajax 実践サンプル集 - ドロップダウンメニュー

ドロップダウンメニュー

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

このサンプルは、シンプルなドロップダウンメニューを表示します。トップメニューにマウスを移動するとサブメニューがドロップダウンメニューとして表示されます。トップメニューに項目を追加したり、ドロップダウンメニューの項目を追加/削除するは<body>セクションを修正するだけで完了します。JavaScript/CSSの外部ファイルSは一切変更する必要がありません。

トップメニューは<li>タグ、ドロップダウンメニューは<div>タグで宣言します。

このサンプルを編集して試してみる

ドロップダウンメニューを可視、不可視に切り替えるには、CSSのvisibilityプロパティに「visible」、「hidden」を設定します。

elementObject.style.visibility='visible'; elementObject.style.visibility='hidden';

<html>
<head>
<title>DropDown Menu</title>
<link href="http://jsajax.com/Articles/dropdownmenu/css/DropDownMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://megalodon.jp/get_contents/50293916"></script>
</head>
<body>
<ul id="dd">
  <li>
    <a href="http://jsajax.com/Articles/dropdownmenu/#" class="menu" id="mmenu1" 
      onmouseover="mopen(1);"
      onmouseout="mclosetime();">Home</a>
    <div class="submenu" id="menu1"
      onmouseover="mcancelclosetime()"
      onmouseout="mclosetime();">
        <a href="http://jsajax.com/Articles/dropdownmenu/#">HTML Tutorials</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">DHTML Tutorials</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">JavaScript Tutorials</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">CSS Tutorials</a>
    </div>
  </li>
  <li>
    <a href="http://jsajax.com/Articles/dropdownmenu/#" class="menu" id="mmenu2" 
      onmouseover="mopen(2);"
      onmouseout="mclosetime();">Download</a>
    <div class="submenu" id="menu2"
      onmouseover="mcancelclosetime()"
      onmouseout="mclosetime();">
        <a href="http://jsajax.com/Articles/dropdownmenu/#">ASP Scripts</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">PHP Scripts</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">Ajax Scripts</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">Perl Scripts</a>
    </div>
  </li>  
  <li>
    <a href="http://jsajax.com/Articles/dropdownmenu/#" class="menu" id="mmenu3" 
      onmouseover="mopen(3);"
      onmouseout="mclosetime();">Contact</a>
    <div class="submenu" id="menu3"
      onmouseover="mcancelclosetime()"
      onmouseout="mclosetime();">
        <a href="http://jsajax.com/Articles/dropdownmenu/#">Office</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">Sales</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">Customer Service</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">Shipping</a>
    </div>
  </li>
</ul>

</body>
</html>

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

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

            
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Konstantin Jagello | http://javascript-array.com/ */

var TimeOut         = 300;
var currentLayer    = null;
var currentitem     = null;
var currentLayerNum = 0;
var noClose         = 0;
var closeTimer      = null;

function mopen(n) {
  var l  = document.getElementById("menu"+n);
  var mm = document.getElementById("mmenu"+n);
	
  if(l) {
    mcancelclosetime();
    l.style.visibility='visible';
    if(currentLayer && (currentLayerNum != n))
      currentLayer.style.visibility='hidden';
    currentLayer = l;
    currentitem = mm;
    currentLayerNum = n;			
  } else if(currentLayer) {
    currentLayer.style.visibility='hidden';
    currentLayerNum = 0;
    currentitem = null;
    currentLayer = null;
 	}
}

function mclosetime() {
  closeTimer = window.setTimeout(mclose, TimeOut);
}

function mcancelclosetime() {
  if(closeTimer) {
    window.clearTimeout(closeTimer);
    closeTimer = null;
  }
}

function mclose() {
  if(currentLayer && noClose!=1)   {
    currentLayer.style.visibility='hidden';
    currentLayerNum = 0;
    currentLayer = null;
    currentitem = null;
  } else {
    noClose = 0;
  }
  currentLayer = null;
  currentitem = null;
}

document.onclick = mclose;

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

            
#dd {
  margin-left: 25%;
  padding: 0 0 20px 0;
}

#dd li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  font: bold 11px arial;
}

#dd li a.menu {
  display: block;
  text-align: center;
  background: #5970B2;
  padding: 4px 10px;
  margin: 0 1px 0 0;
  color: #FFF;
  width: 60px;
  text-decoration: none;
}

#dd li a.menu:hover {
  background: #49A3FF;
}

.submenu {
  background: #EAEBD8;
  border: 1px solid #5970B2;
  visibility: hidden;
  position: absolute;
  z-index: 3;
}

.submenu a {
  display: block;
  font: 11px arial;
  text-align: left;
  text-decoration: none;
  padding: 5px;
  color: #2875DE;
}

.submenu a:hover {
  background: #49A3FF;
  color: #FFF;
}

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

            
<script type="text/javascript" src="http://megalodon.jp/get_contents/50293924"></script>
<link href="http://jsajax.com/Articles/dropdownmenu/DropDownMenu.css" rel="stylesheet" type="text/css" />

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

            
<ul id="dd">
  <li>
    <a href="http://jsajax.com/Articles/dropdownmenu/#" class="menu" id="mmenu1" 
      onmouseover="mopen(1);"
      onmouseout="mclosetime();">Home</a>
    <div class="submenu" id="menu1"
      onmouseover="mcancelclosetime()"
      onmouseout="mclosetime();">
        <a href="http://jsajax.com/Articles/dropdownmenu/#">HTML Tutorials</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">DHTML Tutorials</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">JavaScript Tutorials</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">CSS Tutorials</a>
    </div>
  </li>
  <li>
    <a href="http://jsajax.com/Articles/dropdownmenu/#" class="menu" id="mmenu2" 
      onmouseover="mopen(2);"
      onmouseout="mclosetime();">Download</a>
    <div class="submenu" id="menu2"
      onmouseover="mcancelclosetime()"
      onmouseout="mclosetime();">
        <a href="http://jsajax.com/Articles/dropdownmenu/#">ASP Scripts</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">PHP Scripts</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">Ajax Scripts</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">Perl Scripts</a>
    </div>
  </li>
  <li>
    <a href="http://jsajax.com/Articles/dropdownmenu/#" class="menu" id="mmenu3" 
      onmouseover="mopen(3);"
      onmouseout="mclosetime();">Contact</a>
    <div class="submenu" id="menu3"
      onmouseover="mcancelclosetime()"
      onmouseout="mclosetime();">
        <a href="http://jsajax.com/Articles/dropdownmenu/#">Office</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">Sales</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">Customer Service</a>
        <a href="http://jsajax.com/Articles/dropdownmenu/#">Shipping</a>
    </div>
  </li>
</ul>

コメント・提案の投稿！

名前
メール
件名
本文

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

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

ドロップダウンメニュー

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

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

ドロップダウンメニュー

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

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!