skuare.net

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

使用方法
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」サンプル