«ソースコードを綺麗に表示するJS「dp.SyntaxHighlighter」｜ メイン ｜アクセス数が好きなやつちょっとこいｗｗｗｗｗｗ»
2008年05月20日
mootools.jsを使用してsliding-side-barを実装するサンプル
JSライブラリmootoolsを使用した良い感じのサイドバーサンプルをご紹介。
なかなかセクシーな動きをします。
デモはこちら→サンプル
shadowbox.jsでデモはこちら→サンプル
DLはこちら→Sexy sliding JavaScript side bar menu using mootools at Andrew Sellick
以下実装時の注意点とかです。
sliding-side-barの実装方法
実装は非常に簡単です。
上記リンク先よりDLして.rarファイルを解凍します。
解凍後の構成は以下のようになっています。
- sliding_side_bar.html
- js
- images
htmlファイル側のhead部分で以下のようにscriptを読み込みます。
<!-- sliding-side-bar --> <script type="text/javascript" src="/js/sliding-side-bar/mootools.js"></script> <script type="text/javascript" src="/js/sliding-side-bar/side-bar.js"></script> <!-- //sliding-side-bar -->
CSSはsliding_side_bar.htmlに直書きになっています。
重要そうな部分をピックアップ↓
<style media="all" type="text/css">
body{
position:relative;/*ここ*/
paddign:0px;
font-size:100%;
}
#sideBar{
position: absolute;/*絶対位置への配置*/
width: auto;
height: auto;
top: 200px;/*縦配置位置*/
right:0;/*横配置位置（デフォルトでは-7px、スクロールバーが出てしまうので0）*/
background-image:url(/img/sliding-side-bar/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarContents{
overflow:hidden !important;/*はみ出さないようにね*/
}
#sideBarContents {
width:0;/*style直書きだったものを移動*/
}
</style>
↑コメントアウトを参考にしてください。
HTML側の記述も非常にシンプルなのでいじり易いです。
<div id="sideBar"> <a href="#" id="sideBarTab"><img src="/img/sliding-side-bar/slide-button.gif" alt="sideBar" title="sideBar" /></a> <!-- slide-button.gifのactive時の画像を画像名-activeの形式で用意する --> <!-- a href="javascript:void(0)"にした方が良いかもマウスジェスチャー的な意味で --> <div id="sideBarContents"> <div id="sideBarContentsInner"> <h2>side<span>bar</span></h2> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Four</a></li> <li><a href="#">Link Five</a></li> </ul> </div> </div> </div>
使用画像は
slide-button.gif
slide-button-active.gif
background.gif
の3つです。
最後に微妙にside-bar.jsをカスタマイズします。
var isExtended = 0;//ここはいじっちゃだめ var height = 450;//展開時の高さ var width = 200;//展開時の横幅 var slideDuration = 700;//速度 デフォルトより少し早くしてみた var opacityDuration = 1000;//透明度
色違いとか作ってみました→色違いサンプル
思ったよりできが悪くてびっくり。
色々応用は利きそうですね。
Posted by ; k. 2008年05月20日 02:42
このエントリーのタグ
このカテゴリーの最新記事
トラックバック
このエントリーのトラックバックURL：
http://blog.caraldo.net/mt/mt-tb.cgi/93
