▼スライドアップ・ダウン効果で切り替えるタブ型スライドメニューです。
important contacts:
E-mail:
Password:
Remember contacts
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Tabbed Side Menu from Queness WebBlog | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* ID名がtabMenuのul要素内にあるすべてのli要素を取得 */
$('#tabMenu > li').click(function(){
/* すべてのli要素からselectedクラスを削除 */
$('#tabMenu > li').removeClass('selected');
/* 現在のli要素にselectedクラスを追加 */
$(this).addClass('selected');
/* boxBodyクラス内のすべてのdiv要素を非表示にする */
$('.boxBody div').slideUp('1500');
/* ナビゲーションのul要素のインデックスに従って、boxBody内で右のdiv要素を探す */
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
}).mouseover(function() {
/* クラスの追加・削除 */
$(this).addClass('mouseover');
$(this).removeClass('mouseout');
}).mouseout(function() {
/* クラスの追加・削除 */
$(this).addClass('mouseout');
$(this).removeClass('mouseover');
});
/* bookmarkのli要素の場合は、マウスオーバー時にアニメーション効果を付ける */
$('.boxBody #bookmark li').click(function(){
//Get the Anchor tag href under the LI
window.location = $(this).find("a").attr("href");
}).mouseover(function() {
//Change background color and animate the padding
$(this).css('backgroundColor','#888');
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {
//Change background color and animate the padding
$(this).css('backgroundColor','');
$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
});
/* li要素にマウスオーバー効果を付ける */
$('.boxBody li').click(function(){
window.location = $(this).find("a").attr("href");
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});
});
</script>
<!-- CSS -->
<style type="text/css">
body { color:#ccc; background-color:#555;}
a { color:#ccc;text-decoration:none;}
a:hover { color:#ccc;text-decoration:none}
/* tab */
#tabMenu { margin:0;padding:0 0 0 15px; list-style:none; overflow:hidden; }
#tabMenu li { float:left; display:block; height:32px; width:39px; cursor:pointer,hand; list-style:none; margin:0; padding:0; }
li.posts { background:url(/content/img/ajax/tabmenu/tabHeart.gif) no-repeat 0 -32px; }
li.bookmark { background:url(/content/img/ajax/tabmenu/tabStar.gif) no-repeat 0 -32px; }
li.email { background:url(/content/img/ajax/tabmenu/tabComment.gif) no-repeat 0 -32px; }
li.mouseover { background-position:0 0; }
li.mouseout { background-position:0 -32px; }
li.selected { background-position:0 0; }
/* box */
.box { width:227px; }
.boxTop { background:url(/content/img/ajax/tabmenu/boxTop.gif) no-repeat; height:11px; clear:both; }
*html .boxTop {margin-bottom:-2px;}
.boxBody {background-color:#282828;}
.boxBottom {background:url(/content/img/ajax/tabmenu/boxBottom.gif) no-repeat;height:11px;}
.boxBody div { display:none;}
.boxBody div.show { display:block;}
.boxBody div ul { margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(/content/img/ajax/tabmenu/arrow.gif); overflow:hidden; }
*html .boxBody div ul { margin-left:10px;padding-left:15px;}
.boxBody div li { border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;}
.boxBody div ul li.last { border-bottom:none}
.boxBody div li span { font-size:8px;font-style:italic; color:#888;}
.boxBody div p { margin:0 10px 0 25px; padding:5px 0; width:190px; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial'>jQuery Tabbed Side Menu from Queness WebBlog</a> | 設置サンプル</h1>
<p>▼スライドアップ・ダウン効果で切り替えるタブ型スライドメニューです。</p>
<!-- CODE -->
<div class="box">
<ul id="tabMenu">
<li class="posts selected"></li>
<li class="bookmark"></li>
<li class="email"></li>
</ul>
<div class="boxTop"></div>
<div class="boxBody">
<div id="posts" class="show">
<ul>
<li><a href="#">MySpace</a></li>
<li><a href="#">Friendster</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Orkut</a></li>
<li><a href="#">Bebo</a></li>
<li><a href="#">Tagged</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Hi5</a></li>
<li><a href="#">Live Spaces</a></li>
<li><a href="#">Piczo</a></li>
<li><a href="#">Freewebs</a></li>
<li><a href="#">LiveJournal</a></li>
<li><a href="#">BlackPlanet</a></li>
<li><a href="#">myYearbook</a></li>
<li><a href="#">More</a></li>
</ul>
</div>
<div id="bookmark">
<ul>
<li><a href="#">Google Bookmarks</a></li>
<li><a href="#">del.icio.us</a></li>
<li><a href="#">Digg</a></li>
<li><a href="#">Furl</a></li>
<li><a href="#">Facebook Share</a></li>
<li><a href="#">StumbleUpon</a></li>
<li><a href="#">Yahoo MyWeb</a></li>
<li><a href="#">Newsvine</a></li>
<li><a href="#">Reddit</a></li>
<li><a href="#">Technorati</a></li>
<li><a href="#">LiveBookmarks</a></li>
<li><a href="#">Yahoo Bookmarks</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Current TV</a></li>
<li><a href="#">Ask</a></li>
</ul>
</div>
<div id="email">
<p>important contacts:<select><option>Hotmail</option><option>Gmail</option><option>Yahoo!メール</option><option>AOL</option><option>手動</option></select></p>
<p>E-mail:<input type="text" /></p>
<p>Password:<input type="password" /></p>
<p><input type="checkbox" value="1" checked="checked" /> Remember contacts</p>
<p><input type="button" value="送信" /></p>
</div>
</div>
<div class="boxBottom"></div>
</div>
<!-- / CODE -->
</div>
</body>
</html>