▼スライドアップ・ダウン効果で切り替えるタブ型スライドメニューです。
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>