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

Web Tasarım derslerimize devam ediyoruz, daha önce CSS ile Basit Yatay Menu Yapımına giriş yapmıştık, ilgiyi yazımıza aşağıdaki linkten ulaşabilirsiniz.

CSS ile Basit Yatay Menu Yapımı

Bu yazımızda biraz daha ilerletiyoruz. Menümüz üzerinde bazı makyajlama işlemleri yapacağız. 

Örneğin menü içindeki yazıların hizalanması için;

text-align: center;

ifadesini kullanıyoruz. Menü seçenekleri üzerine fare imlecinin el simgesine dönüşmesi için;

 cursor: pointer;

ifadesini kullanıyoruz. Ayrıca tüm menülerimizi içeren menubar isimli bir class tanımlıyoruz. Bu class tüm menü seçeneklerini kapsayacak. 

.menubar{
    width:1000px;
    height: 55px;
    border:1px solid #CCC;
}

Varsayılan olarak bağlantı(link) renkleri mavidir ve altı çizilidir. CSS'te bağlantıların altını çizmemesi ve bağlantı renginin mavi değilde beyaz olması için;

.menu a{
    text-decoration: none;
    color:#FFF;
}

yukarıdaki satırları ekledik. Sonuçta menümüz aşağıdaki gibi görünecektir.


kodlarımızın tamamı da aşağıdaki gibi olacaktır.

<html>
<head>
<title>Menu</title>
<style type="text/css">
 
.menubar{
    width:1000px;
    height: 55px;
    border:1px solid #CCC;
}


.menu{
    width: 200px;
    height: 40px;
    color:#FFF; /*beyaz*/
    float:left;
    text-align: center;
    padding-top: 15px;
    font-family: Arial;
    font-size:20px;
    cursor: pointer;
}
 
.menu a{
   text-decoration: none;
   color:#FFF;
}

.kirmizi{background: maroon;}

.menu:hover{background: gray;}

</style>
</head>
<body>
 
<div class="menubar">
 
<div class="menu kirmizi">
<a href="index.html">Ana Sayfa</a>
</div>

<div class="menu kirmizi">
<a href="hakkimda.html">Hakkımda</a>
</div>

<div class="menu kirmizi">
<a href="calismalar.html">Çalışmalar</a>
</div>

<div class="menu kirmizi">
<a href="fotograflar.html">Fotoğraflar</a>
</div>

<div class="menu kirmizi">
<a href="iletisim.html">İletişim</a>
</div>
 
</div>
 
</body>
</html>
 
CSS bilgimizi sonraki örnekler daha da geliştireceğiz. Web Tasarım ve Programlama alanında ilerlemeniz için CSS'e tam hakim olmanız gerekmektedir. 

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