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>

Kaynak: Google’s new top navigation bar – CSS tutorial