jQueryのメニューlavaLampを使ってみる。
04/02
jQueryライブラリでお馴染みのlavaLampをヘッダー右側に設置。
マウスに付いてくる動きが気持ち良いですね。
使用したライブラリ:
参考にしたサイト:
注意メモ1:
サンプルソースのJavascriptをそのまま貼ると、リンク先に遷移しなかったため、
clickイベントの戻り「false」(07行目)を「true」に修正して無事OKに。
<script type="text/javascript">// <![CDATA[ $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; ← true に変更 } }); }); // ]]></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>