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

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

デモのキャプチャ

AnyLink CSS Menu

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

デモのキャプチャ

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

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

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

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

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

sponsors

top of page

©2018 coliss