CSS ile Basit Yatay Menu Yapımı - Bölüm 1

Önceki CSS paylaşımlarımızda div kullanımı üzerine paylaşımlar yapmıştık, aşağıdaki konulara başlamadan önce göz atmanızı tavsiye ederim.

CSS ile Metin İşleme
CSS ile Hover özelliği kullanımı
CSS ile Çoklu Class Kullanımı

Aşağıdaki gibi bir class tanımlayalım, bu class'ta geniliği 200px yüksekliği 30px olan bir div tanımladık ve sola hizaladık. Yazı rengini color ile beyaz tanımladık. 

Bu paylaşım Oğuzhan TAŞ web sitesinde yer almaktadır, emeğe saygı gösterip lütfen açık paylaşım adresini ziyaret edelim.

İç boşluk(padding) değerlerini üstten 12px, sağdan 10px, alttan 10px, soldan 20px olarak ayarladık. Font tipini Arial tpinde, font büyüklüğünü 20px büyüklüğünde tanımladık.
 

.menu{
    width:200px;
    height:30px;
    float:left;
    color: #FFF; /*beyaz*/
    padding:12px 10px 10px 20px;
 
    font-family: Arial;
    font-size:20px;
}

Aşağıdaki kod satırı ile kırmızı isimli bir class tanımladık, arka zemin rengini bordo(maroon) olarak ayarladık. 

    .kirmizi{ background:maroon;}

Menu div'imizin üzerine gelince gri hale dönüşmesi için arka zemin özelliğine aşağıdaki kod satırı ile gri (gray) renk tanımı yaptık.
 
    .menu:hover{background: gray;}


Şimdi kodlarımızın tamamını görelim.


<html>
<head>
<title>CSS Ornek2</title>
<style>
 
.menu{
    width:200px;
    height:30px;
    float:left;
    color: #FFF; /*beyaz*/
    padding:12px 10px 10px 20px;
 
    font-family: Arial;
    font-size:20px;
}

    .kirmizi{ background:maroon;}
 
    .menu:hover{background: gray;}
 
</style>
</head>
<body>
<div class="menu kirmizi">
Ana Sayfa
</div>
 
<div class="menu kirmizi">
Hakkımızda
</div>
 
<div class="menu kirmizi">
İletişim
</div>
 
</body>
</html>



Mutlu kodlamalar,
Oğuzhan TAŞ
Ocak 2017
 
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale