シンプルで汎用性に優れたレスポンシブ対応のタブコンテンツ -Basic Tabs

サイト構築 -制作

Post on:2013年3月6日

Basic Tabsのデモ

タブはレスポンシブ対応で、表示サイズに合わせて最適化されます。
タブの切替はCSS3アニメーションで、左からフェードインで表示されます。このエフェクトの変更は簡単です。

デモページ：幅1200pxで表示

デモページ：幅780pxで表示

デモページ：幅480pxで表示

Basic Tabsの実装

実装は非常にシンプルなので、カスタマイズも簡単だと思います。

Step 1: HTML

HTMLは非常にシンプルで、タブはリスト要素、コンテンツはdiv要素で配置します。

<div id="tabwrap">
         
    <!-- TABS -->   
    <ul id="tabs">
        <li class="current"><a href="#home">タブ1</a></li>
        <li><a href="#about">タブ2</a></li>
        <li><a href="#services">タブ3</a></li>
        <li><a href="#contact">タブ4</a></li>
    </ul>
 
    <!-- TAB CONTENT -->
    <div id="content">
        <div id="home" class="current">
            <p>コンテンツ1</p>
        </div>
        <div id="about">
            <p>コンテンツ2</p>
        </div>
        <div id="services">
            <p>コンテンツ3</p>
        </div>
        <div id="contact">
            <p>コンテンツ4</p>
        </div>
    </div>
</div>

Step 2: 外部ファイル

「jquery.js」と「animate.css」を外部ファイルとして記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">

script.jsとstyle.cssは外部ファイルでも、下記に紹介するコードをインラインで記述してもOKです。

Step 3: CSS

外部ファイル「style.css」の中身です。

#tabwrap { 
    background: #fff; 
    overflow: hidden; 
    width: 600px;
    min-height: 300px;
    margin: 60px auto;
    box-shadow: 0 0 20px #ddd;
    border: 1px solid #ddd;
}
#tabs li { list-style: none; }
#tabs li a { 
    float: left; 
    display: block;
    background: #777;
    padding: 10px;
    color: #fff;
    width: 25%;
    text-decoration: none;
    text-align: center;
    border-right: 1px solid #555;
    border-left: 1px solid #888;
    font-size: 15px;
    text-shadow: 1px 1px 0 #000;
}
 
#tabs li a:hover { background: #666; }
#tabs li:first-child a { border-left: 0; }
#tabs li:last-child a { border-right: 0; }
 
#tabs li.current a { 
    background: #fff; 
    color: #666; 
    text-shadow: 1px 1px 0 #fff;
}
 
#content > div {
    clear: both;
    padding: 20px;
    line-height: 19px;
    color: #666;
    text-shadow: 1px 1px 0 #fff;
    display: none;
}
 
#content .current { display: block; }
#content #home.first { display: block; }
#content p { margin: 0 0 20px 0;}

Step 4: JavaScript

外部ファイル「script.js」の中身です。
切替時のアニメーションは「fadeInLeft」を変更します。単にフェードであれば「fadeIn」、上からフェードは「fadeInDown」、バウンドだと「bounceIn」など簡単に変更できます。

$('#tabs li a').click(function(e){
 
    $('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft');
    $(this).parent().addClass('current');
    var currentTab = $(this).attr('href');
    $(currentTab).addClass('current fadeInLeft');
    e.preventDefault();
 
});