26 Mart 2017: Pazar
Gölge

Bloggerda Tab Menü Yapımı 2

Bu yazı 3 sene [3 seneden daha eski de olabilir] veya daha önce yayınlanmış olduğundan; görülen linklerde, resimlerde veya kodlarda hata olması çok olası. Herhangi bir hata ile karşılaşmanız durumunda bana buradan bildirebilirsiniz. Anlayışınız için teşekkür eder, keyifli okumalar dileriz :) Enes İLHAN
Blogger İpuçları 17 Eylül 2010 14 8.316  
Bu Kişisel Blog'da 550 kategori'de yazıya yazılmış adet değerli yorumlarınız bulunmaktadır..

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…

Bu yazıdan önce yazmış olduğum "Blogger Lazy Load JQuery Eklentisi" başlıklı yazımı da okumanızı tavsiye ederim.

Enes ILHAN

Herkese Merhabalar, ben Enes İLHAN. Gaziantep'te doğdum, Adana'da Büro Yönetimi ve Yönetici Asistanlığı bölümünü okudum ve 2012'de mezun oldum. Askerliğimi uzun dönem olarak, { acemiliği Ankara/Mamak'ta , usta birliğini ise Hatay/İskenderun'da } yapıp bitirmiş bulunmaktayım. Şimdi ise hayata atılmanın çabası içerisine girmiş bulunmakta olup iş bulma derdindeyim.

14 Yorum Yapılmış

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir