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に。

<script type="text/javascript">// <!&#91;CDATA&#91;
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout", 
speed: 700,
click: function(event, menuItem) {
return false; ← true に変更
}
});
});
// &#93;&#93;></script>

 

注意メモ２：

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

<ul id="p2" class="lavaLampNoImage">
	<li class="current"><a href="http://e-six.jp/">Home</a></li>
	<li class="page_item"><a href="http://e-six.jp/about/">About</a></li>
	<li class="page_item"><a href="http://e-six.jp/order/">Order</a></li>
	<li class="page_item"><a href="http://e-six.jp/inquiry/">Inquiry</a></li>
	<li class="page_item"><a href="http://e-six.jp/link/">Link</a></li>
	<li class="page_item"><a href="http://e-six.jp/category/blog/">blog</a></li>
</ul>

（追記）

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

<ul class="lavaLampNoImage" id="p2">
    <li class="<?php if (!is_page() && is_home()) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/">Home</a></li>
    <li class="<?php if (is_page('about')) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/about/">About</a></li>
    <li class="<?php if (is_page('order')) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/order/">Order</a></li>
    <li class="<?php if (is_page('inquiry')) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/inquiry/">Inquiry</a></li>
    <li class="<?php if (is_page('link')) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/link/">Link</a></li>
    <li class="<?php if (is_page() || is_home()) { ?>page_item<?php } else { ?>current<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/category/blog/">blog</a></li>
</ul>