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

posted by on 2010.04.02, under blog, JavaScript, jQuery, PHP, Wordpress, 技術TIPS  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
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に。

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

 

注意メモ2:

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>

pagetop

  • seo