jQuery 伸縮するサイドメニュー

jQuery 伸縮するサイドメニュー

今回紹介するプラグインは、メニューが伸縮し動きのあるメニューを実装してくれるjQuery プラグインです。

demo page

…ここからが続き

sliding_effect ダウンロード先、使い方

How To Create A 'Mootools Homepage' Inspired Navigation Effect Using jQueryの「Source」から一式ダウンロードしてくる事が出来ます。

head内

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="js/sliding_effect.js"></script>

XHTML

<h2>ナビゲーションタイトル</h2>
<ul id="sliding-navigation">
<li class="sliding-element"><a href="#">Link 1</a></li>
<li class="sliding-element"><a href="#">Link 2</a></li>
<li class="sliding-element"><a href="#">Link 3</a></li>
<li class="sliding-element"><a href="#">Link 4</a></li>
<li class="sliding-element"><a href="#">Link 5</a></li>
</ul>

使いたい要素に #sliding-navigation と li.sliding-element と指定するだけで実装してくれます。

#sliding-navigation li要素って感じに指定したければ sliding_effect.js の 9行目を下記のように書き換えて下さい。

var list_elements = navigation_id + " li";

後は自分の好きなようにCSSで装飾して頂いたら問題ありません。

ちなみにCSSを何も設定していない時のサンプルものせておきます。

demo page

Comments

MIYA

MIYA

Gaimaさん。

このプラグインは記事に書いてある通り、 Nettuts+ さんで配布されているものですので、ライセンスは Nettuts+ にあると思いますよ。

http://net.tutsplus.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

2010年03月25日 10:26

Gaima

Gaima

「jQuery 伸縮するサイドメニュー」
ライセンスをしりたいのですが、
わかりますでしょうか?
よろしくお願いします。

2010年03月24日 19:10

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article