jQueryのメニューlavaLampを使ってみる。

jQueryライブラリでお馴染みのlavaLampをヘッダー右側に設置。

マウスに付いてくる動きが気持ち良いですね。

 

使用したライブラリ：

jquery-1.3.2.min.js

jquery.easing.min.js

jquery.lavalamp.min.js 

 

参考にしたサイト：

jQueryを利用したFlashみたいなメニュー

LavaLamp for jQuery lovers!

 

注意メモ１：

サンプルソースのJavascriptをそのまま貼ると、リンク先に遷移しなかったため、

clickイベントの戻り「false」(07行目)を「true」に修正して無事OKに。

[JavaScript]

[/JavaScript]

 

注意メモ２：

currentページの表示は、liタグのクラスに「current」を追加すればOK。

[html]

• Home
• About
• Order
• Inquiry
• Link
• blog

[/html]

（追記）

WORDPRESSのテンプレート「header.php」に記述したPHPのソースも記述しておきます。

[php]

• /”>Home
• /about/”>About
• /order/”>Order
• /inquiry/”>Inquiry
• /link/”>Link
• /category/blog/”>blog

[/php]