: サイト構築 -JavaScript

[JS]配置済みのリンクにドロップダウンを簡単に追加できるスクリプト

ページ内に配置したリンクに、リストで作成したドロップダウン型のナビゲーションを簡単に追加できるスクリプトをDynamic Driveから紹介します。

リンクは上記デモのテキスト以外にも、既存のナビゲーションに追加することもできます。

ナビゲーションに追加したデモ

配置できるナビゲーションは、オプションで不透明度、ディレイ時間、表示位置を調整することができます。

スクリプトの設置方法は、「anylinkcssmenu.js」「anylinkcssmenu.css」を外部ファイルで指定し、リンク要素のclassに「anchorclass」を記述します。
配置するナビゲーションは、divで括りclassに「anylinkcss」を記述し、任意のid（例：submenu1）を記述します。そのidと同じものをリンク要素のrelに記述します。


<a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Anchor Link</a>
<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>

また、リンク要素に下記の記述をすることでカスタマイズも可能となっています。

表示のアクションをカスタマイズ: rel="submenu1[click]"
クリックで表示; rel="submenu1[mouseover]"
マウスオーバーで表示
表示の方向をカスタマイズ: rev="lr"
左右に表示; rev="up"
上下に表示

Post on:2009年1月23日

ページの先頭へ