Google’nin üst gezinti çubuğu – CSS
20 Eki2011
Google’nin siyah’tan önceki üst gezinti çubuğu biliyorsunuz beyaz’dı ve oda siyaha nazaran çok şık ve güzeldi. Böyle bir üst menü yapmayı planlarsanız eğer rooteto’dan indirebilir ve yardım alabilirsiniz :)
Google üst gezinti çubuğu
İsterseniz buradan indirip kendi sitenize göre uyarlarsınız istersenizde aşağıda gösterdiğim şekilde yaparsınız. 2′side sonuca götürür.
Demo / Ön izleme – Download / indir
Üst gezinti çubuğu nasıl yapılır?
CSS Kodları altta sytle.css dosyanıza veya style dosyanızı farklı isimde kullanıyorsanız oraya ekleyin.
ul.googleTab {
background: #848383;
padding:0 5px;
font-size:13px;
color:#3366cc;
overflow:hidden;
background:-moz-linear-gradient(0% 100% 90deg,#f5f5f5, #ffffff);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#f5f5f5));
}
ul.googleTab li {
float:left;
padding:7px 8px;
border-top:solid 2px #bad3ea;
}
ul.googleTab li.active{
border-top: solid 3px #1a54e1;
color:#363636;
font-weight:bold;
}
ul.googleTab li:hover {
background:#e4ebf8;
cursor:pointer;
}
CSS Kodlarını ekledikten sonra kalan kodlar çok basit
<ul class="googleTab"> <li class="active">Ana Sayfa</li> <li>Hakkında</li> <li>Servis</li> <li>Teknoloji</li> <li>İletişim</li> </ul>
Benzer yazılar |
Reks |
 |
Etiketler: bar, CSS, css eğitim, css tutorial, css3, gezinti çubuğu, google bar, google css, google top, google üst, google üst kısım, navigation, top, tutorial, üst gezinti çubuğu
Kategori: Teknoloji
Kategori: Teknoloji
Kural dışı içeriğe rastladıgınızda site yetkililerine rapor ederek müdahale edebilirsiniz.
(Hangi durumlarda rapor edebilirim?)
(Hangi durumlarda rapor edebilirim?)
WordPress, SEO, Google Analytics, WebMaster, AdSense ve AdWords Uzmanı... Bilgisayar donanım konusunda üst düzey bilgi... E-Mail
Twitter - +Google - Facebook