縦にフェード展開するドロップダウンメニュー/ナビゲーション/SolidStateEveryday

スポンサードリンク

SAMPLE
CODE
DownLoad

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Dropdown Menu Demo</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
</head>
<body>
<div id="wrapper">
<div class="dropdown">
  <h3 id="first-ddheader" onmouseover="ddMenu('first',1)" onmouseout="ddMenu('first',-1)">DropdownMenu1</h3>
  <div id="first-ddcontent" onmouseover="cancelHide('first')" onmouseout="ddMenu('first',-1)">
    <ul>
      <li><a href="#" class="underline">Navigation Item 1</a></li>
      <li><a href="#" class="underline">Navigation Item 2</a></li>
      <li><a href="#" class="underline">Navigation Item 3</a></li>
      <li><a href="#" class="underline">Navigation Item 4</a></li>
      <li><a href="#">Navigation Item 5</a></li>
    </ul>
  </div>
</div>

<dl class="dropdown">
  <dt id="second-ddheader" onmouseover="ddMenu('second',1)" onmouseout="ddMenu('second',-1)">DropdownMenu2</dt>
  <dd id="second-ddcontent" onmouseover="cancelHide('second')" onmouseout="ddMenu('second',-1)">
    <ul>
      <li><a href="#" class="underline">Navigation Item 1</a></li>
      <li><a href="#" class="underline">Navigation Item 2</a></li>
      <li><a href="#" class="underline">Navigation Item 3</a></li>
      <li><a href="#" class="underline">Navigation Item 4</a></li>
      <li><a href="#">Navigation Item 5</a></li>
    </ul>
  </dd>
</dl>
</div>
</body>
</html>

	Sliding JavaScript Dropdown Menu - Web Development Blog

フェードアニメーションで、縦に展開するドロップダウンメニュー。
フェードアニメーションが滑らかで美しい。
load的な要素はないので、別のファイルに書き込んで使用してもよいかもしれない。

セットアップ
タグの構造
スクリプトの調整

ダウンロード

上記タブから、「doropdown.zip」をダウンロード。
Click here to download the source.をクリックする。

<head>～</head>

ヘッダーに「dropdown.js」と「dropdown.css」を読み込ませる。

設定はこれだけ。

トリガーと、それに反応する箇所、といった具合に分けてある。
サンプルでいうとトリガーになるのは、

<h3 id="first-ddheader" onmouseover="ddMenu('first',1)" onmouseout="ddMenu('first',-1)">DropdownMenu1</h3>

の部分。
idと onmouseover、onmouseout部分のfirstという記述が、このトリガーの固有の識別標になる。
それから標的になる箇所は以下。

ここでも固有の識別としてfirstを設定する。
この範囲のものがトリガーによって、フェードしながら出現してくる。
もちろんfirstというのは任意で変更可能。（複数設置する場合は変更して設置する）
idについている -ddheaderと-ddcontentはスクリプト内での識別に使っているので、変更するならdropdown.js内の該当する箇所も変更する。

アニメーションの具合を、自分の好みに変更可能だ。

var DDSPEED = 10; var DDTIMER = 15;

スクリプト先頭のこの箇所の数値を減らせば、アニメーションが早くなる。

h.timer = setTimeout(function(){ddCollapse(c)},50);

20行目のこの箇所の数値を増やすことで、マウスアウトしたときの展開した箇所の維持時間を延長できる。

好みで変更すると良い。

新着記事
ページ履歴
人気ページ

縦にフェード展開するドロップダウンメニュー

感想

ドロップダウンメニューって、いきなり「パッ」って感じで現れると、なんか意識が付いていけなくて違和感を感じることが多かったのですが、このスクリプトのようにフェードアニメーションで展開してくれれば、ナチュラルにおっていけるような気がします。
ただリスト部分をタグで囲まないとちょっとうまくいかないので、そこがどうだろなって感じです。

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。

ダウンロード

<head>～</head>

関連スクリプト

感想

スクリプトの使用について