Variasi Tabs

Sama seperti tabs lainnya, tutorial ini masih menggunakan css sederhana. Kali ini kita lebih banyak main di border dan pewarnaan backgrounds.

CSS:
#nav {
        border-bottom:1px solid #CCCCCC;
        height:156px;
        width:745px;
        background-color: #ddd;
        background: #ddd;
    }
   
    #nav ul {   
        width:600px;
        margin:0 auto;   
    }
   
    #nav li {   
        border-right:1px solid #ddd;
        float:left;
        padding-left:1px;
        width:175px;
        list-style-type:none;
        text-align:center;
        margin-top:0px;
    }
   
    #nav a {
        color:#333333;
        display:block;
        padding:17px;
        position:relative;
        word-spacing:-2px;
        font-size:11px;       
        height:122px;
        text-decoration:none;
    }   
   
    #nav a.current {
        background-image: url(images/down_large.jpg);   
    }
   
    #nav img {
        background-color:#fff;
        border:1px solid #ccc;
        margin:3px 0 5px 27px;
        padding:4px;       
        display:block;
    }
  
/* panes */
    #panes {
        background-color:#fff;
        border-color:#ccc;
        border-style:solid;
        border-width:1px 1px 0;
        width:743px;   
        height:320px;
        margin-bottom:-20px;
        padding-bottom:20px;
        position:relative;
    }
   
    #panes div {
        display:none;       
        position:absolute;
        top:20px;
        left:20px;
        font-size:13px;
        color:#444;   
        width:650px;       
    }
   
    #panes img {       
        display: block;
        text-align: center;
        margin:0 auto;       
    }
   
    #panes p.more {
        color:#000;
        font-weight:bold;
        font-size:13px;
    }
   
    #panes h3 {
        margin:0 0 -5px 0;
        font-size:22px;
        font-weight:normal;
    }

HTML:
<div id=”panes”>
        <div><img src=”pic/114945030.jpg”/></div>   
        <div><img src=”pic/pic2.jpg”  /></div>
        <div><img src=”pic/pic3.jpg”  /></div>
</div><!– end of panes –>

<br clear=”all” />

<!– navigator –>
<div id=”nav”>
    <ul>       
        <li>
            <a href=”#1″>
                <img src=”pic/114945030-kcl.jpg”/>
                <strong>Picture 1<br />
                </strong>baby

            </a>
        </li>
        <li>
            <a href=”#2″>
                <img src=”pic/pic2-kcl.jpg”/>
                <strong>Picture 2<br />
                </strong>Candy

            </a>
        </li>       
         <li>
            <a href=”#3″>
            <img src=”pic/pic3-kcl.jpg”/>
                <strong>Picture 3<br />
                </strong>Garment
            </a>
        </li>       
    </ul>
</div><!– end of nav –>

<br clear=”all” />

JAVASCRIPT:
<script>
$(function() {
    $(“#nav ul”).tabs(“#panes > div”, {effect: ‘fade’, fadeOutSpeed: 400});
});
</script>

DEMO:

Kunjungi www.proweb.co.id untuk menambah wawasan anda.