CSS Yatay Menü Oluşturma

CSS ile Yatay Menü Oluşturma

Önceki konularda liste elemanlarının biçimlendirilmesi ve dikey menü oluşturma açıklanmıştı. Bu örnekte ise yine bir ul listesi biçimlendirilerek, yatay menü oluşturulmuştur.

Aşağıdaki örneği inceleyiniz.

Dikey menü yapımından en önemli farkı, li etiketlerine uygulanan float:left özelliğidir. Bu sayede normalde alt alta yerleşen li etiketleri yan yana yerleştirilmiştir.

Html Kısmı:

<li><a href="#">Ana Sayfa</a></li>

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

<li><a href="#">Biten Projelerimiz</a></li>

<li><a href="#">Referanslarımız</a></li>

<li><a href="#">Hakkımızda</a></li>

<li><a href="#">İletişim</a></li>

</ul>

Css Kısmı:

.ustMenu{

list-style-type: none; /* Madde işaretini kaldırdık */

border: 2px solid #0080C0;

margin: 0px;

padding: 0px;

}

.ustMenu li{

float: left; /* li elemanlarının yan yana yerleşmesini sağladık */

}

.ustMenu li a{

display:block; /* açıklaması dikey menü konusunda var */

font-weight: bold;

color: #0080C0;

text-decoration: none;

margin: 0px;

padding-top: 10px;

padding-right: 20px;

padding-bottom: 10px;

padding-left: 20px;

}

.ustMenu li a:hover{

color: #FFF;

background-color: #0080C0;

}

css ile yatay menü oluşturma, css horizontal menu, css menü örnekleri, li etiketlerini yan yana yerleştirme

KONU İLE İLGİLİ ÖRNEKLER

Css ile Yatay Menü Örneği ve Kodları

Kendin Dene

Kendin Dene butonuna tıklayarak örnek açılır menüyü görebilir ve kodlarını değiştirerek kendin deneyebilirsin.