Bloggerda Tab Menü Yapımı 2

Daha önce şurada Blogger'da tab menü yapımını anlatmıştım. Bugün ise tab menü yapımının 2.bölümünü anlatacağım. Bugün kü anlatacağım tab menü ilkine nazaran daha görünüşlü ve daha estetik + ilkinden çok daha hızlı yükleniyor. Savaş Çalışkan arkadaşımız daha hızlı bir tab menü istemişti bu tab menü tam ona göre. Hemen bu menünün nasıl yapılacağına geçelim:





Eklentinin çalışır haline ***DEMO*** adresinden bakabilirsiniz.



Bu menü yapımının kod satırı ilkinden daha kısa olacak bunu bilmenizi isterim. Yani kısacası her bakımdan bu tab menü daha hoş geldi bana. Öncelikle tab menümüzün CSS kodlarını </b:skin> kodundan önce ekliyoruz:

/*tab menümüz*/
ul.tabNav { float: left; list-style: none; width: 100%; }
ul.tabNav li { float: left; margin: 0 4px 0 0; padding: 4px 0 0;}
ul.tabNav li.current { padding-top: 0; }
ul.tabNav a { background: #EEE; border: 2px solid #CCC; border-width: 1px 1px 0; color: #333; display: block; padding: 4px 4px 5px 4px; text-decoration: none;}
ul.tabNav li.current a { background: #EEE; border-top: 2px solid #CCC;border-right: 2px solid #CCC;border-left: 2px solid #CCC; padding: 6px; }
div.tabContainer { clear: both; float: left; width: 100%; }
div.tabContainer div.tab {  background:#FFF; border: 2px solid #CCC; color: #000; display: none; padding: 10px;}
ul.tabNav a:hover {text-decoration:none;}
div.tabContainer div.current { display: block; background:#EEE;}
div.tab p:last-child { margin-bottom: 0; }
div.tabContainer ul li {background:#FFF;padding:0px;margin-left:15px;margin-bottom:1px;list-style-type:square;list-style-image:url(img/li.png);list-style-position:outside;}

CSS kodumuzu ekledikten sonra </head> kodundan önce şu kodları ekliyoruz:

<script src='http://konfor.enesilhan.net/js/jquery-1-4-2.js' type='text/javascript'/>
<script src='http://konfor.enesilhan.net/js/tabs-yeni.js' type='text/javascript'/>

Daha sonra da blogumuzun uygun bir yerine şu kodları ekleyerek tab menü yapımını tamamlıyoruz:

<!-- tab menu başlangıç -->
    <ul class='tabNav'>
    <li class='current'><a href='#'>Tab 1</a></li>
    <li><a href='#'>Tab 2</a></li>
    <li><a href='#'>Tab 3</a></li>
 
</ul>
<div class='tabContainer'>
 
    <!-- 1st tab -->
    <div class='tab current'>    
<ul>
Birinci tab menü içeriği.
</ul> 
    </div>
 
    <!-- 2nd tab -->
    <div class='tab'>
<ul>    
İkinci tab menü içeriği.
</ul>
    </div>
 
    <!-- 3rd tab -->
    <div class='tab'>
<ul>
Üçüncü tab menü içeriği.
</ul>
    </div>

<!-- 4th tab -->
    <div class='tab'>
<ul>
Dördüncü tab menü içeriği.
</ul>
    </div>

<!-- 5th tab -->
    <div class='tab'>
<ul>
Beşinci tab menü içeriği.
</ul>
    </div>

<!-- 6th tab -->
    <div class='tab'>
<ul>
Altıncı tab menü içeriği.
</ul>
    </div>
 
</div><!-- tab menu bitiş -->

Ben 6 bölüm ekledim. Size 3 bölüm yetiyorsa kodlardan şu kısmı silersiniz:

<!-- 3rd tab -->
    <div class='tab'>
<ul>
Üçüncü tab menü içeriği.
</ul>
    </div>

<!-- 4th tab -->
    <div class='tab'>
<ul>
Dördüncü tab menü içeriği.
</ul>
    </div>

<!-- 5th tab -->
    <div class='tab'>
<ul>
Beşinci tab menü içeriği.
</ul>
    </div>

<!-- 6th tab -->
    <div class='tab'>
<ul>
Altıncı tab menü içeriği.
</ul>
    </div>

Takıldığınız yer olursa sorabilirsiniz, kolay gelsin arkadaşlar...