TeknoAnaliz | Teknoloji & Kişisel blog

Yatay menüv1

Bugün sizlerle yatay menü yapıcağız, ilk olarak html kodlarından başlayalım;

<div id='teknoanaliztrgg'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Bize ulaşın!</span></a></li>
<li><a href='#'><span>Ziyaretçi Defteri</span></a></li>
<li><a href='#'><span>Kategoriler</span></a></li>
<li><a href='#'><span>Hakkımda</span></a></li>
</ul>
</div>

Html kodumuzu yazdık, sizler sadece "Kırmızı" olan yerleri değiştirin, şimdi bunun css kodunu yazalım;

#teknoanaliztrgg {
width: 800px;
height:37px;
margin: 0px auto 0 auto 0;
}
#teknoanaliztrgg ul {
list-style-type:none;
margin:0;
padding:0;
}
#teknoanaliztrgg ul li a {
width:160px;
background-color: #56aaff;
line-height:37px;
float:left;
color:#ffffff;
text-align:center;
text-decoration:none;
transition:2s background-color;
}
#teknoanaliztrgg ul li a:hover {
background-color: #007fff; 
}


Css kodumuzda bitti. Sadece "Kırmızı" ile belirtiğim yerlere oynama yapınız.


 
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=