jQuery ui Tabs

いそぎメモ |∵|

$(function(){
	var pn = location.search.match(/(?|&)tab=(d+)(&|b)/)?RegExp.$2:'0';
	$("#tabs").tabs().tabs('select', parseInt(pn));
})

jQuery ui tabsで他ページからのリンクでも直接指定したタブへリンクが出来ます。
リンク先をhref=”xxx.html?tab=1″にします、この場合二番目のタブへリンクします。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
  <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>

演算子

イベントまでの残り日数をカウントするjavascript

today = new Date();
count_day = new Date(2011,12,30)
x_day = (count_day.getTime()-today.getTime())/(24*60*60*1000)
tens = x_day / 10
ones = x_day % 10
$('#countdown').prepend('<img src="images/common/' + (parseInt(tens)) + '.gif"><img src="images/common/' + (Math.ceil(ones)) + '.gif">');

二桁表示にし、それぞれ数字の画像を当てはめて表示させます。
10の位は日数を10で割ったのち、小数点以下を切り捨てています。
1の位は日数を10で割ったあとの余りを表示させています。

参考にさせて頂いたサイト
演算子/JavaScriptリファレンス
javascriptの基本

rssにカスタムフィールドの値も入れたい!

要は出力されるRSSをカスタマイズしたい!
調べてみたけどサッパリわかりませんでした、勉強不足です!

先ずはfeedを出力させる側のwpにカスタマイズ

フォーラムの方ではどちらも解決されていたようですが頭の悪い僕にはサッパリでしたので
つまりテンプレートを用意すればいいんじゃね?と思い
http://wordpress.org/extend/plugins/feed-template-customize/
↑のプラグインをインストール
wp-include内のfeed-rss2.phpをテーマフォルダにコピー
コピーしたファイルをwpのカスタマイズ時と同じように変更
下記のようにphpファイルの中身はループ分のみ、というか表示させたい部分のみで構いません
カスタムフィールドも入れられるし、柔軟性高いね!

<table class="parent1">
  <tr>
    <th scope="col" class="child1">セミナー名・詳細</th>
    <th scope="col" class="child2">日 時</th>
    <th scope="col" class="child3">開 場</th>
    <th scope="col" class="child4">備 考</th>
  </tr>
  <?php
  $posts = get_posts('numberposts=0');
      global $post;
  ?>
  <?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
  <tr>
    <td class="child1" id="post<?php the_ID(); ?>">
      <dl>
        <dt><?php the_title(); ?></dt>
        <dd><?php the_content(); ?></dd>
      </dl>
    </td>
    <td class="child2"><?php echo nl2br(post_custom('date')); ?></td>
    <td class="child3"><?php echo nl2br(post_custom('hall')); ?></td>
    <td class="child4"><?php echo nl2br(post_custom('remarks')); ?></td>
  </tr>
  <?php endforeach; endif;?>
</table>

あたりまえだけど文字コードはちゃんとUTF-8で保存しないと全力で文字化けします

フィードにアクセスしたらちゃんと表示されてるっ!

次に読み込み

別ドメインへのアクセスはjQueryではできないのでphpで
埋め込みたい場所に下記を記述

<?php
  $feed = file_get_contents("表示させたいページのURL");
  print $feed;
?>

今回は「表示させたいページのURL」はwpのfeedになるから
「http://ドメイン/wp/category/カテゴリー名/feed」とかになるよね!
ページをphpにて保存!もちろんutf-8で!

無事に表示されました

なんかfeedとかrssっぽくないけど・・・。

ちゃんと理解してfunction.phpなんかを編集できる人は本当にすごいな、と。
僕はまだまだ勉強不足だなーと実感しました。

参考にさせて頂いたフォーラムの記事

http://ja.forums.wordpress.org/topic/3563?replies=5
http://ja.forums.wordpress.org/topic/7957

使用させて頂いたプラグイン

Feed Template Customize

参考にさせて頂いたプラグイン実装方法

Feed Template Customize | dogmap.jp

条件分岐コメント

メモメモ

<!--[ほええ]> HTML <![endif]-->

[ほええ]の箇所に条件を指定します。

  • [if IE] Internet Explorer のみ
  • [if IE 7] Internet Explorer 7 のみ
  • [if !IE] Internet Explorer 以外
  • [if lt IE 7] Internet Explorer 7 より下
  • [if lte IE 7] Internet Explorer 7 以下
  • [if gt IE 7] Internet Explorer 7 より上
  • [if gte IE 7] Internet Explorer 7 以上
  • [if !(IE 7)] Internet Explorer 7 以外
  • [if (gt IE 5)&(lt IE 7)]
    Internet Explorer 5 より上 かつ Internet Explorer 7 より下
  • [if (IE 5)|(IE 7)]
    Internet Explorer 5 もしくは Internet Explorer 7

Wilq32.RotateImage

Canvas機能を使用し、画像を回転表示させるスクリプト
jqueryrotate
なんでか動かない!ので、こっち使います。

$(function(){
	$('#rotate1').rotate(-25);
	var rotImage = $("#rotate2").rotate({
		bind :[
			{"mouseover":function(){rotImage[0].rotateAnimation(85);}},
			{"mouseout":function(){rotImage[0].rotateAnimation(-85);}}
		]
	});
});
<img src="images/common/sNav1.png" id="rotate1">
<img src="images/common/sNav1.png" id="rotate2">

1つ目(L2)が初めから傾いた状態で表示、
2つ目(L3~L8)がアニメーションで表示しています。

ロールオーバーに使うとおされ_( :3」∠)_

詳細ページに同一カテゴリーの記事一覧を表示

詳細ページのナビゲーションに、その記事が所属しているカテゴリの記事一覧を表示させたいとき。

<ul id="product_<?php $cat = get_the_category(); $cat = $cat[1]; { echo $cat->slug; } ?>">
  <?php
  foreach((get_the_category()) as $cat) {
  $cat_id = $cat->cat_ID ;
  break ;
  }
  $query = 'cat=' . $cat_id. '&showposts=10';
  query_posts($query) ;
  ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <li><a href="<?php the_permalink(); ?>"/><?php the_title()?></a></li>
  <?php endwhile; endif; ?>
  <?php wp_reset_query() ?>
</ul>

しかしこれだと親カテゴリが同じ場合、子カテゴリが違っているものも表示されます。

子カテゴリで分けたい場合。

<ul id="product_<?php $cat = get_the_category(); $cat = $cat[1]; { echo $cat->slug; } ?>">
  <?php
  foreach((get_the_category()) as $cat) {
  $cat_id = $category[1]->cat_ID ;
  break ;
  }
  $query = 'cat=' . $cat_id. '&showposts=10';
  query_posts($query) ;
  ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <li><a href="<?php the_permalink(); ?>"/><?php the_title()?></a></li>
  <?php endwhile; endif; ?>
  <?php wp_reset_query() ?>
</ul>

ulのid属性に「product_記事のスラッグ名」が入ります。
これをdreamweaverのテンプレート内に持っていきたくて、jQueryのappendToで連れてったりしました。
ゴリ押し くコ:彡
カテゴリ毎にidも決まっているので割とスムーズにいけると思います。

パンくずナビなんかで子カテゴリの名前を表示させたい場合

<ul id="breadcrumb"><!--
  --><li><a href="../../../../index.html">HOME</a></li><!--
  --><li><a href="../../../../products.html">商品一覧</a></li><!--
  --><li><?php $category = get_the_category(); ?><a href="<?php echo get_category_link($category[1]->cat_ID) ?>"><?php $cat = get_the_category(); $cat = $cat[1]; { echo $cat->cat_name; } ?></a></li><!--
  --><li><?php the_title(); ?></li><!--
--></ul>

子カテゴリになる場合、$cat・$categoryの記述を$cat[1]・$category[1]に変更するといけます。

wordpressによるCMS

wordpressをCMSとして利用するときによく使う設定やコードなど。

パーマリンクの種類

wordpress管理画面、左カラムの「設定>パーマリンク設定」
カスタム構造のテキストボックス内に入力すると使用できます。
様々なサイトを巡ってみましたが、
「おすすめ!」は本当に人それぞれで一概にどれがいいとは言えません。
よく見られるのが「カテゴリ+投稿ID」や「日付+投稿ID」でしょうか。
下記のように記述しますが、勿論此れ以外にも自由に組み合わせて書き換える事もできます。

  1. 投稿ID:/%post_id%/
  2. 投稿名:/%postname%/
  3. 投稿名+.html:/%postname%.html:
  4. 日付+投稿名:/%year%/%monthnum%/%day%/%postname%/:
  5. カテゴリ+投稿ID:/%category%/%post_id%/
  6. カテゴリ+投稿名:/%category%/%postname%/
  7. 日付+カテゴリ+投稿名:/%category%/%postname%/

私は、投稿名を記事ごとにアルファベットとハイフンで置き換えています。
URLの一部が日本語になっても問題ない、若しくは記事ごとに入力するのが面倒じゃない方には「2」
クライアントのブログに利用する際には「1」を推します。

wordpressの埋め込み

<?php require './wp/wp-blog-header.php'; ?>

(埋め込むページからの相対パスを記述、この場合は同階層にwpというフォルダ名でwordpressを設置した際の記述です)
htmlファイルの1行目(DOCTYPEより上)に上記を記述後、拡張子をhtmlからphpに変更

wordpressをhtmlファイル内で動かす

.htaccessに下記内容を記述後、ルートフォルダへアップロードします。

AddType application/x-httpd-php .php .html

ロリポップサーバーをご使用の場合、上記記述では動作しませんので、
下記記述に書き換えてアップロードします。

AddHandler php5.2-script html

記事一覧に詳細ページの1枚目の画像を抽出

記事に含まれる1枚目の画像を抽出する│APPOFIT様

記事一覧の画像を非表示

<?php
  $my_content = get_the_content();
  $my_content = preg_replace("|(<img[^>]+>)|si","",$my_content);
  echo $my_content;
?>

新着情報などに。

wordpress内でのjQueryの記述

下記コメント部分に記述すれば普段の「$」でも動作します。

jQuery(function($) {
	// foo
});

もしくは下記をheader.php内のwp_head();より前に記述する事でも普段通りに動作するようになります。

<?php
	wp_deregister_script('jquery');
	wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js');
?>

googleにホスティングされているjQueryを読み込む際にはバージョンも確認してください。
https://developers.google.com/speed/libraries/#jquery

投稿、固定ページへのphpファイルの読み込み

下記をテーマファイル内functions.phpへ追記。

function Include_my_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();
    include(get_theme_root() . '/' . get_template() . "/$file.php");
    return ob_get_clean();
} 

add_shortcode('myphp', 'Include_my_php');

投稿、固定ページの読み込みたい場所に下記コードを記述。
.phpは省略します。

[myphp file='example']

カテゴリ名の取得

<?php $category = get_the_category(); echo $category[0]->cat_name; ?>
<?php $category = get_the_category(); echo $category[1]->cat_name; ?>

1行目 親カテゴリ名のみ取得
2行目 子カテゴリ名のみ取得

所属する全てのカテゴリのスラッグ名を取得

半角スペース区切り、最後のスペースは削除します。
クラス属性などに。

<?php
$cats = get_the_category();
$str = '';
foreach( ( array )$cats as $cat ) {
	if( !in_array( $cat->cat_ID, $exclude ) ) {
		$str .=  $cat->slug . ' ';
	}
}
echo rtrim( $str, ' ' );
?>">

尚、6行目「slug」を「cat_name」に変更すると配列の内容がスラッグからカテゴリ名になります。

子カテゴリのスラッグ名から画像を出力

<img src="<?php bloginfo('template_url'); ?>/images/<?php 
    $cats = get_the_category();
    foreach($cats as $cat):
    if($cat->parent)
    echo $cat->slug;
    endforeach;
;?>.png">
  • テーマフォルダ > images > 子カテゴリのスラッグ名.png

新着記事などのアイコンを表示させる時など。

singleページのbody_classにカテゴリ名を追加

singleページのbodyタグのクラス属性にカテゴリスラッグ名を追加します。
function.phpに下記を追記。

add_filter('body_class','add_category_to_single');
function add_category_to_single($classes, $class) {
		if (is_single() ) {
				global $post;
				foreach((get_the_category($post->ID)) as $category) {
						$classes[] = 'category-'.$category->category_nicename;
				}
		}
		return $classes;
}

「category-カテゴリ名」が付与されます。
ここではカテゴリページでのクラス名と同じものにしていますが、6行目「category-」にて独自のものに変更可能です。

body_classの使い方

header.phpのbodyタグにbody_classを追記します。

<body <?php body_class(); ?>>

single カテゴリーごとにデザインを変更

single.phpをsingle-normal.phpにリネームし、新たに下記内容のsingle.phpを作成します。

<?php
if ( in_category(array('works')) ) {
   get_template_part( 'works' , false );
} elseif ( in_category( array('information') )  )  {
   get_template_part( 'information' , false );
} else {
    get_template_part( 'single' , 'normal');
}
?>

2行目「works」にカテゴリ名、3行目「works」に読み込むファイル名を記述します。
4行目「elseif~」から6行目「} 」までを増減する事で対応させたいカテゴリを増減できます。
カテゴリページのデザイン変更の場合は「category-カテゴリ名.php」のファイル名に変更するだけでオーケーです。
テーマファイルによってはcategory.phpが存在しないものもありますが、上記の通りで切り替え可能です。

ループ処理

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
記事を表示
<?php endwhile; ?><?php else : ?>
記事がない時の表示
<?php endif; ?>

新着情報などに使う時用

<dl>
<?php
	$posts = get_posts('numberposts=5&category=7');
	global $post;
?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
  <dt><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dt>
  <dd><? the_time('Y年n月j日 H時i分');?><br><?php the_content(); ?></dd>
<?php endforeach; endif;?>
</dl>

dlの中にdt、ddを繰り返し展開していくので、スクリプトをdlで囲います
numberposts=5は表示させる記事数
category=7は表示させたいカテゴリのID
the_time(‘y年m月d日’)は年(year)/月(month)/日(day)の表示形式、順番や間のスラッシュの変更も自由です
日付フォーマットに関する詳しい情報は小粋空間さんの「5.フォーマット文字一覧」にて記載されています
↓以下引用させて頂いたフォーマット一覧↓

出力される日付文字列の書式
単位 フォーマット文字 意味 表示例
Y 4桁の数字 1999, 2003
y 2桁の数字 99, 03
m 2桁の数字 01 – 12
n 1桁または2桁の数字 1 – 12
F フルスペル January – December
M 3文字の省略形式 Jan – Dec
d 2桁の数字 01 – 31
j 1桁または2桁の数字 1 – 31
曜日 D 3文字の省略形式 Mon – Sun
l フルスペル Sunday – Saturday
午前/午後 a 小文字 am / pm
A 大文字 AM / PM
h 2桁の数字・12時間表示 01 – 12
g 1桁または2桁の数字
12時間表示
1 – 12
H 2桁の数字・24時間表示 00 – 23
G 1桁または2桁の数字
24時間表示
0 – 23
i 先頭にゼロをつける 00 – 59
s 先頭にゼロをつける 00 – 59

以下は年月日・時分秒の設定早見表です。

年月日の設定早見表
設定例 表示
4桁 Y 2桁 m 2桁 d Y/m/d 2007/01/01
0なし j Y/m/j 2007/01/1
0なし n 2桁 d Y/n/d 2007/1/01
0なし j Y/n/j 2007/1/1
2桁 y 2桁 m 2桁 d y/m/d 07/01/01
0なし j y/m/j 07/01/1
0なし n 2桁 d y/n/d 07/1/01
0なし j y/n/j 07/1/1
時分秒の設定早見表
設定例 表示
12時間表記・2桁 h 2桁 i 2桁 s h:i:s 01:02:03
12時間表記・0なし g g:i:s 1:02:03
24時間表記・2桁 H H:i:s 13:02:03(01:02:03)
24時間表記・0なし G G:i:s 13:02:03(1:02:03)

条件分岐

<?php if (is_home()) { ?>
 <body id="index" <?php body_class(); ?>>
<?php } elseif (is_search()) { ?>
 <body id="search" <?php body_class(); ?>>
<?php } elseif (is_archive()) { ?>
 <body id="archive" <?php body_class(); ?>>
<?php } elseif (is_category()) { ?>
 <body id="cat-<?php the_category_ID(); ?>" <?php body_class(); ?>>
<?php } elseif (is_page()) { ?>
 <body id="<?php function get_page_uri2($page_id) {$page = get_page($page_id); return $page->post_name;} ?><?php echo get_page_uri2($wp_query->post->ID);?>" <?php body_class(); ?>>
<?php } elseif ( is_single()) {?>
 <body id="single" <?php body_class(); ?>>
<?php } else { ?>
 <body <?php body_class(); ?>>
<?php } ?>

勿論bodyのIDを変更する以外にも使用できます。
TOPのヘッタのみにカルーセルいれたりとか。

自動改行を解除

wordpressにより自動で挿入される「p」「br」タグの解除

固定ページ

page.php内get_header直後に下記を挿入

<?
remove_filter('the_content', 'wpautop');
the_content();
?>

brBrbrプラグイン使用時には一行追加します。

<?
remove_filter('the_content', 'wpautop');
remove_filter('the_content','brBrbr');
the_content();
?>

Contact Form 7

config.php内に下記を記述します。

define ('WPCF7_AUTOP', false);

※require_once(ABSPATH . ‘wp-settings.php’);より上に記述します。

Custom Field Gui 3

wordpressのカスタムフィールドはプラグインを利用して導入するのが楽です。
「かたつむりくんのWWW」より:

カスタムフィールドの改行

カスタムフィールドをテンプレートに適用する際に

<?php echo post_custom('キー')?>

上記のように記述する箇所を

<?php echo nl2br(post_custom('キー')); ?>

このように記述することで、改行も反映されます

Google Mapと併用

<?php $imagefield = get_imagefield('detail1image');
$attachment = get_attachment_object($imagefield['id']);
echo '<image src="' . $attachment['url'] . '" alt="' . $attachment['title'] . '" /><br />' . $attachment['content'] ;
?>

カスタムフィールドでアップロードした画像を表示し、その下にアップロード時に入力した画像の説明を表示

<a href="javascript:;" onclick="window.open('http://maps.google.co.jp/maps?q='+encodeURI('<?php echo post_custom('pref')?>'));return false;" target="_blank">地図はこちら</a>

カスタムフィールドキー「pref」に入力した住所からGoogle mapへのリンクを自動で生成

animateの例文

$(function(){
	$('#headerTab a').hover(
		function(){
			$(this).stop().animate({top : '0px'},'normal','easeOutBounce');
		},
		function(){
			$(this).stop().animate({top : '-5px'},'normal','swing');
		}
	);
});

予めhover後の長さの画像をtop:-5pxで絶対配置したものを、hoverで0pxまで戻します。
{top : ‘0px’}の部分はCSSでの指定になるので、たとえば画像置換のパディングで指定していた際にはtopをpaddingTopに変更。
‘normal’が入っている第二引数には’slow”normal”fast’や’ミリ秒指定’といった速度に関する記述を入れます。
‘3000’であれば3秒かけてアニメーションが行われます。
‘easeOutBounce’や’swing’が入っている第三引数にはeasing名を入れます。
jQuery単体だと’liner’か’swing’しか選択できませんが、別途jQuery Easing Pluginを導入すれば他にも多くの動きをつけることが可能です。
導入する際にはjQueryを読み込んでいるスクリプトタグより後に記述して下さい。

詳しい種類についてはjQuery Easing – jQuery 日本語リファレンスをご覧ください。
実際に動きを見ることができるので大変参考になります |’ω’|

mouseover例文

<ul class="photo"><!--
  --><li><img src="images/shop/photo1.jpg"></li><!--
  --><li><img src="images/shop/photo2.jpg"></li><!--
  --><li><img src="images/shop/photo3.jpg"></li><!--
--></ul>
$('.photo img').hover(function() {
	$(this).stop().fadeTo(330,0.7);
		}, function() {
	$(this).stop().fadeTo(330,1);
});
$('.photo li').mouseover(function(){
	$(this).closest('ul').css('backgroundImage','url(' + $(this).children('img').attr('src') + ')')
});

ulの背景画像として予めphoto1の画像をいれておき、それぞれのリストの画像はCSSで縮小しておきます。
マウスオーバーでリストの画像がulの背景画像と入れ替わります。
間違え易いのが、jQueryにてCSSを指定する際の記述方法。
background-imageがbackgroundImageとなるように、ハイフンの直後の文字列が大文字になり、ハイフン自体は消えます。
ラクダ記法とかキャメルケースとか。
.closestは直前の親要素、.childrenは子要素、attr(‘src’)は画像のソースURLです。
attr(‘src’)の時にはsrcの部分、画像のソースURLを抽出し、
attr(‘src’,’photo.jpg’)の時には画像のソースURLをphoto.jpgに書き換えます。

$(function(){
	$('#gallery .topImage').prepend($('#gallery li:first-child img').clone());
	$('#gallery .textarea').html($('#gallery li:first-child img').attr('alt'));
	$('#gallery li img').mouseover(function(){
		$('#gallery .topImage img').attr('src',$(this).attr('src'));
		$('#gallery .textarea').html($(this).attr('alt'));
	}).hover(
		function(){
			$(this).stop().fadeTo(250,0.7);
		},
		function(){
			$(this).stop().fadeTo(250,1);
		}
	).css('cursor','pointer');
});
<div id="gallery">
	<p class="topImage"></p>
	<ul><!--
		--><li><img src="images/construction/case1.jpg" alt="サンプル1"></li><!--
		--><li><img src="images/construction/case2.jpg" alt="サンプル2"></li><!--
		--><li><img src="images/construction/case3.jpg" alt="サンプル3"></li><!--
		--><li><img src="images/construction/case4.jpg" alt="サンプル4"></li><!--
		--><li><img src="images/construction/case5.jpg" alt="サンプル5"></li><!--
		--><li><img src="images/construction/case6.jpg" alt="サンプル6"></li><!--
		--><li><img src="images/construction/case7.jpg" alt="サンプル7"></li><!--
		--><li><img src="images/construction/case8.jpg" alt="サンプル8"></li><!--
		--><li><img src="images/construction/case9.jpg" alt="サンプル9"></li><!--
		--><li><img src="images/construction/case10.jpg" alt="サンプル10"></li><!--
		--><li><img src="images/construction/case11.jpg" alt="サンプル11"></li><!--
		--><li><img src="images/construction/case12.jpg" alt="サンプル12"></li><!--
	--></ul>
	<div class="textArea"></div>
</div>

マウスオーバーした画像をtopImage内に拡大表示し、textArea内をaltの内容に置き換えます
初期表示の画像やテキストは1枚目の画像を参照します

<ul id="gNav" class="clearfix"><!--
  --><li id="gNavLi1"><a href="#">リンク1</a></li><!--
  --><li id="gNavLi2"><a href="#">リンク2</a></li><!--
  --><li id="gNavLi3"><a href="#">リンク3</a></li><!--
  --><li id="gNavLi4"><a href="#">リンク4</a></li><!--
  --><li id="gNavLi5"><a href="#">リンク5</a></li><!--
  --><li id="gNavLi6"><a href="#">リンク6</a></li><!--
  --><li id="gNavLi7"><a href="#">リンク7</a></li><!--
  --><li id="gNavLi8"><a href="#">リンク8</a></li><!--
--></ul>
$(function(){
	$('#gNav li').append('<div class="tab"></div>');
	$('#gNav a').css('cursor','pointer').blend().mouseover(function() {
    $(this).siblings('div.tab').stop().animate({top : '5px'},'fast','linear').animate({top : '0px'},'normal','easeOutBounce');
	});
});

cssでliをrelativeにし、jsにて自動挿入されるdiv.tab及びaタグを絶対配置にします
2つをtop:5pxに配置し、z-indexにてaをdiv.tabの上に乗せます
hoverでaにblendの効果が出て、マウスオーバーでdiv.tabがぴょこっと飛び出ます
ボタンの色とタブの色をそれぞれ合わせておくと可愛らしいナビゲーションになります _(┐「ε:)_