Dentasarım
Popüler tasarımlar

DENTASARIM | Tasarımın bizden!

Yatay denmenü v1

Yatay den menü v1

Merhaba arkadaşlar, bir menü tasarımı daha yapalım. Basit ama hoş bir menü yapıcağız.
ilk olarak css kodlarımızı yazıyoruz. 

#denmenu {
width: 950px; 
height: 50px;
margin: auto;
background: #024f72;
border-top: 3px solid #111;
}
#denmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#denmenu ul li a {
display: block;
float: left; 
padding-left: 10px;
padding-right: 10px;
color: #fff;
font-size: 12px;
text-decoration: none;
height: 50px;
line-height: 50px;
transition: 0.4s;
}
#denmenu ul li a:hover {
background: #111;
color: white;
}

Css kodlarımız bu kadar şimdi html kodlarımızı yazalım...
 

<div id="denmenu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">HAKKIMIZDA</a></li>
<li><a href="#">İLETİŞİM</a></li>
<li><a href="#">ZİYARETÇİ DEFTERİ</a></li>
<li><a href="#">FORUM</a></li>
</ul>
</div>

Kodlarımızı yazdık birde ön izlemesini görelim, kodları sitenizde uyguladığınızda fare ile üzerine geldiğinde arkaplan (background) siyah, yazı ise beyaz olucaktır. Kısaca #denmenu ul li a:hover kodlarındaki özelliği görüceksiniz. Güle güle kullanın.


Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol