Css İle Menü Tasarlamak
Bildiğ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ç:
BİR YORUM YAZIN
ZİYARETÇİ YORUMLARI - 1 YORUM
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