Google Play tab örneği!

CSS3 ve jQuery ile Google Play Tab

Microsoft Windows tasarımıyla hazırladığımız menülerden sonra sıra Google‘ın hazırladığı eşsiz tablara geldi. Google Play‘de yer alan bu kutucuklar görünüşlerinin aksine gayet basit bir yapıya sahipler. CSS3 ve jQuery öğeleri sayesinde tasarımımızı hazırlayalım.

ÖRNEĞİ GÖRÜNTÜLE

Nasıl hazırlanır?

Kod satılarını CSS, HTML ve JS olmak üzere üçe bölüyorum. Böylece makaleninin devamı daha anlaşılır olacaktır.

Arka plan görseli ile başlayalım. Web sayfanızın CSS kodlarının içindeki body alanına aşağıdaki eklemeyi yapın.

body{background-color: #eee;
background-image: url(data:image/gif;base64,R0lGODlhCAAIAJEAAMzMzP///////wAAACH5BAEHAAIALAAAAAAIAAgAAAINhG4nudroGJBRsYcxKAA7);}

Evet bu çizgili arka planı siteye dahil etti. Sırada ise diğer CSS kodlarımız var.

#tab{
overflow: hidden;
margin: 0 auto;
padding: 0;
list-style: none;
}

#tab,#icerik {width: 600px; margin:0 auto;}

#tab li {
float: left;
margin: 0 -15px 0 0;
}

#tab a {
float: left;
position: relative;
padding: 0 25px;
height: 0;
line-height: 30px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
border-right: 30px solid transparent;
border-bottom: 30px solid #3D3D3D;
border-bottom-color: #777\9;
opacity: .3;
filter: alpha(opacity=30);
}

#tab a:hover,
#tab a:focus {
border-bottom-color: #2ac7e1;
opacity: 1;
filter: alpha(opacity=100);
}

#tab a:focus {
outline: 0;
}

#tab #current {
z-index: 3;
border-bottom-color: #3d3d3d;
opacity: 1;
filter: alpha(opacity=100);
}

#icerik {
background: #fff;
border-top: 2px solid #3d3d3d;
}

#icerik div{padding:1em;}

Şimdi <body></body> içerisine, tasarımın gözükmesini istediğimi yere ekleyeceğimiz HTML kodları var.

<ul id="tab">
<li><a href="#" name="#tab1" id="current">adobewordpress</a></li>
<li><a href="#" name="#tab2" id="">photoshop</a></li>
<li><a href="#" name="#tab3" id="">wordpress</a></li>
<li><a href="#" name="#tab4" id="">araçlar</a></li>
</ul>

<div id="icerik">
<div id="tab1" style="display: block;">
<h2>Ne sunuyoruz?</h2>
<p>AdobeWordPress ailesi olarak siz ziyaretçilerimize eşsiz makaleler sunuyoruz.</p>
<p>Daha önce Türkiye'de yapılmamışı yapıyoruz, Photoshop, WordPress, HTML5, CSS3, SEO ve tasarım temalı Türkçe makaleler yazıyoruz.</p>
<h2>Videolar hazırlıyoruz!</h2>
<p>Karışık gibi gözüken görsel efektleri video derslerimiz ile dakikalar içerisinde anlatıyoruz.</p>
</div>
<div id="tab2" style="display: none;">
<h2>Usta bir Photoshop kullanıcısı olmak ister misiniz?</h2>
<p>Artık Photoshop ile özgürlügün tadını çıkaracaksınız. Çok zor gözüken efektlerin hiç öyle olmadiklarını öğreneceksiniz.</p>
<p>Sık güncellenen Photoshop bölümümüz sayesinde profesyonel bir Photoshop kullanıcısı olabilirsiniz.</p>
</div>
<div id="tab3" style="display: none;">
<h2>WordPress sitenizi şahesere dönüştürün!</h2>
<p>İddiali olduğumuz bir diğer kategorimiz ise WordPress. Ücretsiz paylaşımlarımız sayesinde web sayfalarınızı şahesere dönüştüreceksiniz.</p>
<h2>Siteniz yeterince iyi mi?</h2>
<p>Dünyanin en çok kullanılan hazır site tasarımlarindan olan WordPress ile sitenizi kurdunuz ve yayinladiniz, peki ziyaretçileriniz için her şey hazır mi? Tasarımınızda problemler var mı? Peki siteniz yeterince güvenli mi?</p>
<p>Bütün sorularınızın cevabı WordPress makalelerimizde!</p>
</div>
<div id="tab4" style="display: none;">
<h2>CSS3, HTML5, SEO ve tüm tasarım unsurları sizi bekliyor!</h2>
<p>AdobeWordPress Web 1.0'dan beri burada ve sizlere gelişen teknolojiyi daha yakindan tanıma sanşı sunuyor.</p>
<p>Tasarımın temeline hakim olan yeni teknolojileri detaylı anlatım ve örneklemelerimizle daha iyi öğrenebilirsiniz.</p>
</div>
</div>

Bu kodların altına ise jQuery dosyamızı ekleyelim.

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Ve onun da altına geriye kalan JavaScript kodlarımızı ekleyelim.

<script>
function resetTabs(){$("#icerik > div").hide();$("#tab a").attr("id",""); }
var myUrl = window.location.href;
var myUrlTab = myUrl.substring(myUrl.indexOf("#"));
var myUrlTabName = myUrlTab.substring(0,4);
(function(){$("#icerik > div").hide();$("#tab li:first a").attr("id","current");
$("#icerik > div:first").fadeIn();

$("#tab a").on("click",function(e) {e.preventDefault();
if ($(this).attr("id") == "current"){  return } else{
resetTabs();$(this).attr("id","current");
$($(this).attr('name')).fadeIn();}});

for (i = 1; i <= $("#tab li").length; i++) {
if (myUrlTab == myUrlTabName + i) {resetTabs();
$("a[name='"+myUrlTab+"']").attr("id","current");
$(myUrlTab).fadeIn();}}})()
</script>

Her şey hazır!

Bu da ilginizi çekebilir  Haftanın Ücretsiz Web Teması #19

Kapanış

JS kodlarını da eklediğimizde tasarım hazır oluyor. Bu tasarımı Catalin Rosu’nun makalelerinde gördüm ve sizlerle paylaşmak istedim. Beğeneceğinizi umuyorum.

İyi çalışmalar.



  • tasarlayanadam

    işime yaradı teşekkürler

  • Lacivert

    Bunu wordpresse plugin olarak yapabilsek widget destekli çok güzel olur 🙂

    • serdar

      Arkadaşa katılıyorum bunu wordpresse widget olarak ekleyebilirmiyiz. Bu konudada yardımcı olurmusunuz?

      • WordPress widget olarak hazırlanabilir tabii. Not aldım. Uygun bir zamanda hazırlayabilirim.

  • Selam,
    köşeleri çapraz değilde düz yapabilmemiz için hangi kodda değişiklik yapmamız gerekiyor…

  • Hocam çok soru soruyorum farkındayım ama,
    ben bu icerik bölümünü ne yaptıysam ikiye bölemedim.
    çok kötü bozuluyor..
    icerik bölümünü ikiye nasıl bölerim sağ sol olarak.

    • İkiye bölmek derken tam olarak neden bahsediyorsunuz? 4 değil de 2 tane menü kullanmak mı yoksa sağa ve sola yaslanacak şekilde iki farklı tip menü buttonu mu?

      • Hocam Çok Sağolun Cevabınız için ama istediğim menüyü ikiye ayırmak değil içerik bölümünü ikiye ayırmak,
        ek’teki resim gibi….

        • O daha kolay. tab1-2-3-4 gibi divlerimiz var mevcut. Bunların içerisine yeni iki adet div oluşturun ve CSS kodlarına 1.ye float:left; width:60%; ikinciye ise float:right; width:40% yazın. Böylece içerisine iki adet ayrılmış div oluşturursunuz.

          • icerik
            icerik

            gibimi…

          • Evet mantık doğru. Fakat 1-2 terim hatası var. Aşağıdaki gibi düzeltiniz.

            icerik
            icerik

          • Hocam oldu fakat ben bottoma border-bottom: 2px solid #84aeff; vermiştim. bu kod ile border bottomun altına geçtiler… 🙁

          • Mustafa Bey ben orjinal dosyayı düzenleyerek test ettim ve sonuç aldım. Size de aynı şeyi öneririm.
            Verebileceğim teknik destek an itibariyle bu kadarla sınırlı.

            jQuery tab tasarımınıza sıfırdan başlamanızı öneririm. Hem sizin için de iyi bir alıştırma olur, hem de istediğiniz div yapısını oluşturursunuz.

          • sağolun hocam yaptım Sayenizde,
            Kaldırdım bottom border’ı
            dediğiniz gibi div leri ekledim.
            sonuç güzel çok sağolun..
            Emekleriniz için…..

          • Tebrik ederim. Siz sağ olun. İyi çalışmalar.

          • Teşekkürler…

  • Hocam Konuyla Hiç alakası yok biliyorum ama,

    yapmış olduğum sitede telefon numarasına android telefonlardan girildiğinde tıklanınca direk arama yapılsın istiyorum bilgilendirirseniz sevinirim…

  • hocam play tab olayını select menüde deniyorum ama uyarlayamadım yapılamazmı…?
    —————–

    seçiniz
    tab1
    tab2
    tab3
    tab4