css ile basit üst menü yapımı
Html Kodumuz:
<head> tagının içerisine:
<link href="Style.css" rel="stylesheet" />
<body> tagının içerisine:
<div id="ustmenu">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
Style.css stil dosyamınızın içerisine:
* { /* * işareti ile tüm elemanları işaretleyip içerisinde yazan kodu tüm elemanlara uygular */
padding: 0px;
margin: 0px;
border: 0px;
}
ul, li { list-style:none; /*listedeki notları silme*/}
#ustmenu {
margin:10px; /*dış boşluk*/
border: 1px solid #ccc; /*dış çubuk*/
float:left; /*sola dayama kodu*/
border-right: 0px; /*dış çubuk sağ 0 olarak veriyoruz*/
}
#ustmenu li {
float:left; /*menüyü sola yaslama eğer yapmazsak alt alta yazar*/
padding: 10px; /*linkler arası boşluk*/
border: 1px solid #ccc; /*menümüzün borderını ayarlıyoruz*/
cursor: pointer; /*linklerin üzerine gelince cursor değişicek*/
}
#ustmenu li:hover { /*linkin üzerine gelince*/
background-color: #ccc;
color: #ffffff;
}
Yorumlar
Yorum Gönder