• かちびと.net

    アコーディオンとグローバルメニューを併せたコンテンツを実装出来るjQueryプラグイン・facetsのご紹介。ちょっとユニークだったので備忘録です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

アコーディオンとグローバルメニューを併せたコンテンツを実装出来るjQueryプラグイン・facets

スポンサーリンク

ユニークだったのでご紹介。グローバル
メニューに連動してアコーディオンが
連動して開閉するコンテンツを実装する
jQueryプラグイン。使いどころはあまり
無さそうですけど、もしかしたら、とい
うことで・・

IE6や7でも動いてくれます・・・が、tableに置き換える事でなんとか実装してるようです。少しチカチカするので使いどころに悩みますが・・

facets


グローバルメニューにマウスを乗せると、下部のアコーディオンが開閉します。なかなかインパクトありますねー。


下層メニューも作れる。


IETesterによるIE6のキャプチャです。


こういうのも出来るそうな。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js'></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.clip.js"></script>
<script type="text/javascript" src="js/jquery.facets.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#main-image-box').children().removeClass('facets').end().facets({
		control: 'ul#mainlevel',
		clipSpacing: 1,
		animationSpeed: 400,
		beforeMax: function(index) {
			$('#main-image-box .clip:eq('+index+') .container').show();
		},
		beforeMin: function(index) {
			$('#main-image-box .clip:eq('+index+') .container').hide();
		}
	});
});
</script>

ちょっとファイル多いですね。テーブルに置き換えるあたりも気軽に使えるものではないかな。でもアイデアは参考になりました。

デモもダウンロードできるのでマークアップなんかはそちらでご確認ください。ライセンスはGPLです。

facets

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services