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

posted by on 2010.04.02, under blog, JavaScript, jQuery, PHP, Wordpress, 技術TIPS  
04/02

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

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

 

使用したライブラリ:

jquery-1.3.2.min.js

jquery.easing.min.js

jquery.lavalamp.min.js 

 

参考にしたサイト:

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

LavaLamp for jQuery lovers!

 

注意メモ1:

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

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

[JavaScript]

[/JavaScript]

 

注意メモ2:

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

[html]

[/html]

(追記)

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

[php]

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

[/php]

pagetop

  • seo