サイドバーをセクシーに開閉させるjavascript「SlidingSideBar」

Webデザインを行う際に、見やすさが重要な要素の一つにあげられます。
この観点から言えば余計なものは削除する必要がありますが、サイト開設者としてはどうしても表示したいものがあります。
Andrew SellickSexy sliding JavaScript side bar menuではデザインにも配慮した開閉式のサイドバーを作成することが出来ます。
slidingsidebar

使用方法
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"><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

「サイドバーをセクシーに開閉させるjavascript「SlidingSideBar」」をシェアする

記事作成:
記事URL:

TOP > > > サイドバーをセクシーに開閉させるjavascript「SlidingSideBar」