Bilişim Teknolojileri Kaynak Site
Bu derste CSS ile web sayfası için en basit haliyle yatay menü yapımı örneğini görebilirsiniz. Örnek içinde Mouse ile menü üzerinde renk değişimini sağlamak için hover seçicisi’ de kullanılmıştır.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css menü</title>
<style>
*{
margin:0px;
padding:0px;
}
#menu li{
overflow: hidden;
list-style-type: none;
background-color: #242B6F;
padding: 0px;
width: 200px;
height: 50px;
margin-right: 1px;
font-size: 20px;
font-family: calibri,arial,verdana;
line-height: 50px;
float: left;
}
#menu a{
text-decoration: none;
color: whitesmoke;
font-weight: 600;
display: block; /*a etiketinin etki alanını nesne boyutlarına eşitler,blok haline */
text-align: center;
transition: 1s;
}
#menu span{
display: block;
margin-top:-60px;
}
#menu a:hover{
background-color: #8596F9;
color: #830D0D;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">ANASAYFA</a></li>
<li><a href="#">ÜRÜNLER</a></li>
<li><a href="#">HAKKIMIZDA</a></li>
<li><a href="#">İLETİŞİM</a></li>
</ul>
</div>
</body>
</html>
