TeknoAnaliz | Teknoloji & Kişisel blog
Css menü ( 5 ADET )
Menü yapmayı ne hikmetse çok seviyorum. Basit geldiğinden mi? yoksa tasarımda hoş görüntü sağlıyor diye mi? Cevap bulamadım. İlk başta anlatıcağım. Sonra farklı renklerde yaparız. Ne dersiniz başlayalım mı? Başlamadan önce şunu söyleyeyim. Yazı font'u bizim siteye göre uyarlı. Kendi yazı stilinize göre uyarlicaktır. Güzel bir font bulursanız kullanabilirsiniz.
İlk olarak html kodlarımızı yazalım.
<div id="teknomenu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">HAKKIMDA</a></li>
<li><a href="#">İLETİŞİM</a></li>
<li><a href="#">ZİYARETÇİ DEFTERİ</a></li>
</ul>
</div>
Html kodlarımızı bitirdikten sonra css kodlarımızı yazalım.
<style>
#teknomenu {
width: 100%; /* Genişliği web sitenize uygun olsun diye 100% yaptım, değiştirebilirsiniz. */
height: 40px;
line-height: 40px;
margin: auto;
background: #222;
}
#teknomenu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#teknomenu ul li a {
color: #fff;
float: left;
line-height: 40px;
height: 40px;
width: auto;
padding-left: 10px;
padding-right: 10px;
transition: 0.5s;
}
#teknomenu ul li a:hover {
background: #fff;
color: #222;
}
</style>
Kodlarımız bu kadar şimdi kırmızı ile yazılan yerleri değiştirerek neler yapabiliriz? Ben 5 adet örnek koyucağım. Hadi örneklerimize bakalım?