PHP & JavaScript Room :: 設置サンプル

実行結果

jQuery Tabbed Side Menu from Queness WebBlog | 設置サンプル

▼スライドアップ・ダウン効果で切り替えるタブ型スライドメニューです。

設置サンプルのソース

<!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 &amp; 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>