Front-End Goods

10 Kasım 2016 Perşembe

Basit CSS Menü Örneği

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.

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

19 Haziran 2015 Cuma

CSS Menu Bar Kodu

CSS Hazır Menu Bar Kodu

Kolayca sitenize ekleyebileceğiniz basit bir menü çubuğu kodladım.

Menü barın kodlarını aşağıdan kopyalayabilirsiniz.

        <style type="text/css">
        div.menu-kutu{
            background-color:#575141;
            height: 34px;
            width: 600px;
            font-family: arial;
            font-size: 12px;
            font-weight: bold;

        }
        div.menu-kutu ul{
            list-style-type: none;
            float: left;
            margin: 0px;
            padding: 0px;
            border-top:2px solid #1D3327;
            border-bottom:2px solid #1D3327;

        }
        div.menu-kutu ul li{
            width: 120px;
            float: left;
            text-align: center;
        }
        div.menu-kutu ul li a{
            text-decoration: none;
            color:#fff;
            line-height: 30px;
            display:block;
        }
        div.menu-kutu ul li a:hover{
            background-color:#F0E1B9;
            color:#545454;
            font-weight: bold;
        }

        </style>
        <div class="menu-kutu">
            <ul>
                <li><a href="#" title="Anasayfa">Anasayfa</a></li>
                <li><a href="#" title="Hakkımızda">Hakkımızda</a></li>
                <li><a href="#" title="Hizmetlerimiz">Hizmetlerimiz</a></li>
                <li><a href="#" title="Galeri">Galeri</a></li>
                <li><a href="#" title="İletişim">İletişim</a></li>

            </ul>

        </div>

Görsel Ara