スライドするメニューをJavaScriptで作る「Sliding JavaScript Menu Highlight 1kb」

サイトで重要なメニューをもっと印象的にしてみませんか?
Sliding JavaScript Menu Highlight 1kbを利用すると、わずか1kbでスライドするメニューを作成できます。

sponsors

使用方法

Sliding JavaScript Menu Highlight 1kbからファイル一式をダウンロードします。
2パターン入っていますが、今回はより印象的な2を紹介します。

<script src="script.js" type="text/javascript"></script>
<link href="style2.css" media="screen" rel="stylesheet" type="text/css" />
上記を記述後、bodyに以下のように追記します。

<body onload="menuSlider.init('メニューのid名','スライドする要素のid名')">
最後にメニューを書き込みます。

<div class="menu">
    <ul id="メニューのid名">
        <li><a href="#">JavaScript</a></li>
        <li value="1"><a href="#">Graphic Design</a></li>
	<!-- value="1"がデフォルト位置となります。 -->
        <li><a href="#">HTML</a></li>
        <li><a href="#">User Interface</a></li>
        <li><a href="#">CSS</a></li>
    </ul>
    <div id="スライドする要素のid名"></div>
</div>

サンプル

sponsors

Javascriptサンプルページ一覧
skuare.net