サイドバーをセクシーに開閉させるjavascript「SlidingSideBar」に関するコメントはまだありません。
ご遠慮なくコメントしてください。
サイドバーをセクシーに開閉させるjavascript「SlidingSideBar」
｜
｜
｜
｜
｜
｜
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"><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」サンプル
2007年08月08日
前の記事：テキストボックスを伸長させるjavascript「Text Grow」
次の記事：フォームの入力を限定するjavascript「MaskedInput」
関連記事
- [mootools]mooVRotatingMenu
- [mootools]UI Tabs
- [mootools]click the birds
- [mootools]accordeon and effects
- [mootools]iFishEye
コメント投稿
この記事へのトラックバック:
- jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
- ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
- BOMBERMAN JAVASCRIPT GAME by mootools.js
- 3ステップで表をソート＆値を検索できるjavascript「dataTables」
- Movable Type 4.2にバージョンアップ
- ページの目次を自動で作成するjavascript「jqTOC」
- JavaScriptライブラリ「raphael」で図を描く
- ニューデザイン
- Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
- 奥から手前にズームするJavaScript「Spacegallery.js」
