CSS Yatay Menü Yapımı

CSS Uygulaması

Web sitelerinde olmazsa olmaz öğelerden biri de menülerdir. Html kodları ile oluşturduğumuz menüleri css kodları ile tasarımını düzenlemek mümkündür. Yatay ve Dikey olarak birçok web sitesinde menü tasarımı görmektesiniz. Bu yazımda sizlere yatay menü yapımını anlatacağım.

Css Yatay Menü Yapımı

Anlatıma başlamadan oluşturacağımız yatay menü işlemi için bir adet html dosyası ve css dosyası açalım. Html dosyasına dışarıdan css dosyası çekmek için head kodunun içine <link href=”stil.css” rel=”stylesheet” type=”text/css”> kodunu yazanız gerekir. Oluşturduğunuz css dosyasının içine ilk olarak

body
{
    margin:0;
    padding:0;
}

kodunu yazmayı unutmayın. Yukarıdaki kodun amacı tarayıcı ayarlarını sıfırlamak.

1- Yatay menü oluşturmak için öncelikle listeleme yapmanız gerekir. Aşağıda gördüğünüz kodları yazarak sağ tarafta gördüğünüz listelemeyi yapabilirsiniz. Aşağıdaki kod da  <ul> ile listelemeyi açabilir <li> ile her bir satırı doldurabilirsiniz. Oluşturduğumuz listelemede her satıra link vermek için <li> etiketinin içine <a href=”gideceği adresi“> etiketini, kapatmak için ise gerekli yazıyı yazdıktan sonra </a> etiketini yazmanız gerekir.

<html>
<head>
    <meta charset=”utf-8″ />
    <link href=”stil.css” rel=”stylesheet” type=”text/css”>
    <title></title>
</head>
<body>
    
    <ul class=”menu”> 
        <li><a href=”#”>Ana Sayfa</a></li> 
        <li><a href=”#”>Hakkımızda</a></li> 
        <li><a href=”#”>İletişim</a></li> 
    </ul>

</body>
</html>

2- Listelemenin satır başlarındaki nokta işaretini kaldırmak için oluşturduğumuz harici css dosyasına aşağıdaki kodu yazmanız gerekir.
ul.menu { 
               list-style-type: none;
 }
Bu adımlara kadar yaptıklarımız yatay ve dikey bölümü için gerekli yazılardı. Bundan sonrası yatay menü için gerekli adımlar…

3- Listelemeyi yatay menüye döndürmek için aşağıdaki kodu kullanıyoruz.
li{display:inline;}
Menümüzü yatay konuma getirdiğimize göre stil verme işlemine başlayabiliriz. Bu aşamayı html bilginizi ölçerek özelleştirebilirsiniz.

ul.menu { 
    list-style-type: none;
    margin-top:120px;
    background-color: #4793ba;
    padding: 12px;
    border-bottom: 3px solid rgb(143, 143, 143);
}
Menü Stilinin Açıklaması
1- margin-top ile sayfada üstten 120 px boşluk bıraktım.
2- background ile arkaplan rengini hafif mavi tonunda ayarladım.
3- padding ile iç çerçeve mesafesini 12 px yaptım.
4- border-bottom ile de çerçeve oluşturup rengini değiştirdim.
li a{
    text-decoration: none;
    color: white;
    padding:12px;
}
Menü Listeleme Stilinin Açıklaması1- text-decoration ile linkleri yazıya çevirdim.
2- color ile yazıya çevrilen linklerdeki rengi ayarladım.
3- padding ile iç çerçeve mesafesini 12 px yaptım.
li a:hover{
    background-color: #217098;
    color:white;
    border-bottom: 3px solid rgb(0, 85, 143);
}

ve artık son olarak da li a:hover ile mouse linklerin üzerinde dolaşırken yapması gereken stilleri belirledim.

Yatay Menümüz artık hazır…

Paylaş :

Yeni Yorum Ekle

 Yorumunuz başarıyla gönderildi. Teşekkürler!   Yenile
Hata: Lütfen tekrar deneyin