サイドバーをセクシーに開閉させるjavascript「SlidingSideBar」
Webデザインを行う際に、見やすさが重要な要素の一つにあげられます。
この観点から言えば余計なものは削除する必要がありますが、サイト開設者としてはどうしても表示したいものがあります。
Andrew SellickのSexy sliding JavaScript side bar menuではデザインにも配慮した開閉式のサイドバーを作成することが出来ます。
sponsors
使用方法
Sexy sliding JavaScript side bar menuのDownloadからダウンロードしても解凍できなかったので以下よりダウンロードしてください。
SlidingSideBar.zip
またmootools.jsも必要です。
head内に以下を挿入します。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/side-bar.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yourdomain/side-bar.css" type="text/css">
CSS内でimgを指定している場所がありますので、ご自身のドメインに変更してください。
さらにHTMLを以下の様に記述すれば完成です。
<div id="sideBar">
<a href="#" id="sideBarTab"><amp-img src="http://yourdomain/slide-button.gif" alt="sideBar" title="sideBar"></a>
<div id="sideBarContents" style="width:0px;">
<div id="sideBarContentsInner">
<h2>side<span>bar</span></h2>
<ul>
<li><a href="リンクURI">リンクタイトル</a></li>
<li><a href="リンクURI">リンクタイトル</a></li>
<li><a href="リンクURI">リンクタイトル</a></li>
<li><a href="リンクURI">リンクタイトル</a></li>
<li><a href="リンクURI">リンクタイトル</a></li>
</ul>
</div>
</div>
</div>
サイドバーをセクシーに開閉させるjavascript「SlidingSideBar」サンプル
sponsors
記事作成:2007年8月 8日 00:00
記事URL:http://www.skuare.net/2007/08/javascriptslidingsidebar.html
TOP > javascript > メニュー関連 > サイドバーをセクシーに開閉させるjavascript「SlidingSideBar」
前の記事:テキストボックスを伸長させるjavascript「Text Grow」
次の記事:フォームの入力を限定するjavascript「MaskedInput」