jQueryなら一行で
SlashDot風のサイトメニューを作る「Slashdot Menu」@PHPSPOT開発日記
Dynamic Drive DHTML Scripts- Slashdot Menu
This is a stylish collapsible menu modelled after the navigational menu found on Slashdot.SlashDot風のサイトメニューを作る「Slashdot Menu」。
次のようなSlashDot風のメニューを実装することが出来ます。大メニュー選択でアニメーションもします。
実装コードは次のようにシンプル。
JQueryを使えばアニメーションだけなら一行で記述できます．
例えば次のようなHTMLに対して
<p id="slide"> <h2>hoge</h2> hoooooooooooooooooooooooooooooooooooge! <h2>hoga</h2> hoooooooooooooooooooooooooooooooooooga!</p>
次のJavascript一行書くだけ．
$('#slide h2').click(function(){$(this).next().slideToggle()})
基本はこれだけで，あとは好みに応じて速度変えたり，CSSをいじったりしたり，他のエフェクトと組み合わせたりすればオリジナルなスライドメニュー完成．
デモはWordpressから書けなかった…
一応，右側のサイドバーで実装しています．サイドバーの各ブロックのヘッダーをクリックすればスライドします．
jQueryを久々に触ったけど，やっぱりJavascriptはjQueryがいいね！
