Hakkı Duman – Wordpress, Seo ve Opencart Uzmanı

Css İle Menü Tasarlamak

Css İle Menü Tasarlamak 1Bildiğimiz gibi çoğu sitede artık css menüler kullanılmakta. Css kullanarak çok şık menüleri çok kolay tasarlayabiliriz. bunun için tek sahip olmamız gereken çok az bir css kodlaması. Bilmeyen arkadaşlar içinde şuanki makalem gibi bir çok hazır verilen menü kodlamaları internette mevcuttur. Bu makalemde sizlere tasarımcıların iyi bildiği fakat ismini vermek istemediğim bir webmaster eğitim sitesinin yan menüsünün aynısını kodlamaya çalışacağız. Tek yapmanız gereken aşağıda verdiğim kodarı uygun yerlere yerleştirmek.

İlk olarak bir html dosyası oluşturuyoruz ve <body> kodundan hemen sonra aşağıda vermiş olduğum kodları yerleştiriyoruz.

[php]
<div id="menu">
<img src="dersler_baslik.gif" />
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımda</a></li>
<li><a href="#">Referanslar</a></li>
<li><a href="#">Hizmetler</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Bana Ulaşın</a></li>

</ul>
</div>
[/php]

Şimdi sıra css dosyamızı oluşturmaya geldi. Style.css adında bir css dosyası oluşturup içine aşağıda vermiş olduğum kodları sırasıyla kaydedin.

[php] #menu {
width:174px;
float:left;
font-family:Tahoma;
font-size:11px;
border:ridge 1px;
padding-right:5px;
}

[/php]

[php] #menu ul {
list-style-type:none;
margin:0px;
padding-top:0;
padding-right:0;
padding-bottom:0;
padding-left:7px;
padding-top:10px;
}

[/php]

[php]#menu ul li {
border-bottom: 1px solid #E8E7D0;
}

[/php]
[php] #menu a {
display:block;
font-weight:bold;
color:#333;
text-decoration:none;
padding-left:10px;margin:0px;
padding-bottom:3px;
padding-top:5px;
}
#menu a:hover {
background-color: #FFF2D9;
color: #CC0000;
padding-top:5px;
border-left-width: 7px;
border-left-style: solid;
border-left-color: #333333;
margin-left: -5px;
}

[/php]

Dosyamızı kaydedip kapatıyoruz. Sonuç aşağıdaki gibi olacaktır. Style.css ve html dosyamızın aynı klasorde olmasına dikkat edin.
Sonuç:
Css İle Menü Tasarlamak 2

BİR YORUM YAZIN

ZİYARETÇİ YORUMLARI - 1 YORUM
  1. Web Tasarım Öğreniyor dedi ki:

    Merhabalar peki bu nu yan yana nasıl yapabiliriz ? Çift sütundan oluşması için ne yapmamız lazım ?
    Örn.. WordPressteki gibi çift kategori sistemini html css olarak izah ederseniz sevinirim.
    Anasayfa – Hakkımda
    Anasayfa – Hakkımda
    Anasayfa – Hakkımda
    Anasayfa – Hakkımda

Copyright 2010 Hakkı DUMAN Kişisel Blog. Tüm hakları saklıdır.

İstanbul escort Ataşehir escort Pendik escort Kartal escort Maltepe escort Ümraniye escort Kurtköy escort Kadıköy escort Anadolu yakası escort Avrupa yakası escort Şişli escort Mecidiyeköy escort Şirinevler escort Avcılar escort Halkalı escort Beylikdüzü escort Bakırköy escort Ataköy escort