CSS ile Şık Bir Menü Yapmak

CSS ile şık menüler oluşturabileceğimizi hepimiz biliyoruz. SANALKURS.net'in sol bölümünde de buna bir örnek var :) Peki bu menünün nasıl yapıldığını hiç merak ettiniz mi? Gelin birlikte öğrenelim :)

Merhabalar.

Bu dersimizde SANALKURS.net'in soldaki "Dersler" bölümüne benzer bir menüyü nasıl yaparız öğreneceğiz.


İlk olarak yeni bir HTML ve CSS Dosyası oluşturuyorum. Ardından HTML Dosyama body tagları arasında şu kodları yazıyorum.


<div id="menu">

<ul>

    <li><a href="#">Mert Hiçyılmaz</a></li>

    <li><a href="#">PHP</a></li>

    <li><a href="#">Dreamweaver</a></li>

    <li><a href="#">Web Tasarım</a></li>

    <li><a href="#">Photoshop</a></li>

    <li><a href="#">Grafik Tasarım</a></li>

    <li><a href="#">Logo Tasarım</a></li>

    <li><a href="#">Mert Hiçyılmaz</a></li>

    <li><a href="#">Fireworks</a></li>

    <li><a href="#">CSS</a></li>

    <li><a href="#">3DS Max</a></li>

    <li><a href="#">PHP</a></li>

    <li><a href="#">Dreamweaver</a></li>

    <li><a href="#">Mert Hiçyılmaz</a></li>

    <li><a href="#">Photoshop</a></li>

    <li><a href="#">Grafik Tasarım</a></li>

    <li><a href="#">Logo Tasarım</a></li>

    <li><a href="#">Püf Noktası</a></li>

    <li><a href="#">Fireworks</a></li>

    <li><a href="#">CSS</a></li>

  </ul>

</div>



Sonra CSS Dosyama geçiyorum ve "#menu" şeklinde ID türüne sahip bir stil tanımlıyorum.


#menu {

    width:174px;

    float:left;

    font-family:Tahoma;

    font-size:11px;

    border:ridge 1px;

    padding-right:5px;

}



Ardından "ul" etiketime aşağıdaki değerleri veriyorum


#menu ul {

    list-style-type:none;

    margin:0px;

    padding-top:0;

    padding-right:0;

    padding-bottom:0;

    padding-left:7px;

    padding-top:10px;

}



"li" etiketime de menümün düzene girmesi için aşağıdaki değerleri veriyorum


#menu ul li {

    border-bottom: 1px solid #E8E7D0;

}



Ve geriye iki etiket kalıyor; "a" ve "a:hover"


#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;

}



SONUÇ:



HTML Dosyasından bir görünüm:



CSS Dosyasından bir görünüm:


  • Etiketler;
Mert Hiçyılmaz
1995 doğumlu. Bilgisayar ve Güvenlik Sistemleri üzerine bir firmada teknisyen olarak çalışmaktayım. Ayrıca geliştirilmekte olan bir restoran pos sisteminin de kurulum ve bakımlarını yapmaktayım. CCTV, Uzak mesafe internet aktarımı, bilgisayar yazılımsal ve donanımsal sorunlar gibi konularda çalışmaktayım. Bölgemizde ki çok sayıda büyük markanın teknik destek ve kurulum hizmetlerini sağlamaktayım.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

teşekkürler
güzel ders olmuş.
güzel bir çalışma olmuş, emeğine sağlık!
bişey sorcam ben bu linkleri aynı pencerde açmak istyiorum onu nasıl yapcam.yani aynı sayfada bir divin içinde

Yukarı Git