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>

とりあえずW3C準拠の確認を

posted by on 2010.03.31, under blog, CSS, HTML, 技術TIPS  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
03/31

W3C(World Wide Web Consortium)に完全に準拠のサイト作りが、果たしてどれだけの価値があるのか実証したわけでもないものの、よくわからないから尚のこと「SEO的な影響アリ」という定説には反論もできず、権威にすがることで少しの安心と少しの信用を獲得すべく対策することに異論はありません。それに、できたてのサイトで「エラー有り」状態ではやはり気持ち悪いもので、一応チェックしてつぶすことにします。

:utf-8

:XHTML 1.0 Transitional

CSS レベル 2.1

 

Valid XHTML 1.0 Transitional 正当なCSSです!

 

WORDPRESSで作成して、まだ特別なことはしてなかったけれど、TOPページに設置していたFLASH記述部分でエラーが出る。

英語の解読はなかなかやっかいで面倒なので、とりあえずJavascriptの記述あたりがあやしそうなのでflash.jsとして外部ファイルに。

予想通りOKをもらうことができ、すっきりしました。

エラーのはっきりとした原因究明を行うべきか?残りの警告を消すべきか?

1分悩んだ末、この件今日は先送りに決定。また今度。

それにしても、CSSのチェッカーは日本語サイトになっているのに、なぜHTMLは英語しかないのかな?

当サイトの方針

posted by on 2010.03.26, under blog  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
03/26

今回「イーシックス」という屋号を付けて営業を開始し、それに伴いWEBサイトを開設いたしました。

当サイトはまだ発展途上ではありますが、これをWEBサイト構築の実験場として位置づけ、情報整理・情報収集を行いながら技術ノウハウの蓄積、情報発信を続けて行くことで、今後の営業活動の基礎を作っていきたいと考えています。

ホームページを開設しました。

posted by on 2010.03.20, under blog, news  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
03/20

このたび、ようやくホームページを開設することになりました。

これから徐々に業務もサイト内容も充実をはかりたいと思います。

pagetop

  • seo