Menüler web sitelerinin vazgeçilmez bir parçası. Ziyaretçilerin, sitenin diğer sayfalarına ulaşabilmeleri menüler aracılığyla olur. Bu sebepten tasarlanan her web sayfasının mutlaka bir menü çubuğu ya da blogu bulunur. Sayfalar arası geçişler bu menülre yerleştirilen linklerle olur.
Eğer işiniz önyüz geliştirme ise mutlaka CSS menü yapma sorunu ile karşılaşırsınız. CSS menü yapımı profesyönel anlamda Front end developer olarak çalışanlar için kolay bir iş. Ancak bu işe daha yeni başladıysanız biraz yardıma ihtiyacınız olabilir. Bu sayfada basit bir CSS yatay menü çalışması yaptım.
Aşağıda basit bir CSS menü örneğini paylaşıyorum. Umarım faydalı olur.
CSS Yatay Menünün Kodları:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #fff;
}
ul.denemenu{
margin:0px;
padding:0px;
border-top:solid 1px #717171;
border-bottom:solid 1px #ff0000;
display:inline-block;
}
.denemenu li{margin:0px;}
.denemenu li a{
font-size:14px;
font-family:arial,sans-serif;
color:#777;
text-decoration:none;
width:auto;
height:35px;
line-height:35px;
padding:0 15px;
background:#fbfbfb;
display:block;
float:left;
}
.denemenu li{display:block;max-width:180px;height:auto;float:left;}
.denemenu li a:hover{background-color:red;color:#fff;}
</style>
</head>
<body>
<div>
<ul class="denemenu">
<li><a href="#">Ansayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</body>
</html>
CSS Menünün Canlı Hali
Eğer işiniz önyüz geliştirme ise mutlaka CSS menü yapma sorunu ile karşılaşırsınız. CSS menü yapımı profesyönel anlamda Front end developer olarak çalışanlar için kolay bir iş. Ancak bu işe daha yeni başladıysanız biraz yardıma ihtiyacınız olabilir. Bu sayfada basit bir CSS yatay menü çalışması yaptım.
Bu Çalışma Kimin İçin?
Hem önyüz geliştirmeye yeni başlayanlar için basit bir örnek hem de aynı kodları bir daha yazmakla vakit kaybetmek istemeyen profesyoneller için hazır yapılmı CSS Yatay Menü kodu. Evet bu basit çalışmanın tek amacı front end developer arkadaşlarımızın işini kolaylaştırmak.Aşağıda basit bir CSS menü örneğini paylaşıyorum. Umarım faydalı olur.
CSS Yatay Menünün Kodları:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #fff;
}
ul.denemenu{
margin:0px;
padding:0px;
border-top:solid 1px #717171;
border-bottom:solid 1px #ff0000;
display:inline-block;
}
.denemenu li{margin:0px;}
.denemenu li a{
font-size:14px;
font-family:arial,sans-serif;
color:#777;
text-decoration:none;
width:auto;
height:35px;
line-height:35px;
padding:0 15px;
background:#fbfbfb;
display:block;
float:left;
}
.denemenu li{display:block;max-width:180px;height:auto;float:left;}
.denemenu li a:hover{background-color:red;color:#fff;}
</style>
</head>
<body>
<div>
<ul class="denemenu">
<li><a href="#">Ansayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</body>
</html>
CSS Menünün Canlı Hali
Kayıtlar
Hiç yorum yok :
Yorum Gönder