HTML – CSS ile Yatay Menü Örneği

HTML etiketlerinden liste kullanılarak ve CSS ile biçimlendirerek basit yatay menü tasarlayacağız.

İlk aşamada oluşturulacak menü liste etiketleri kullanılarak listelenir. Liste üzerinde css ile düzenlemeler yapılacağı için ve sayfamızda bulunan diğer listeleri etkilememek için <ul> etiketine class=”menu” tanımlandı.

Menü elemanlarına <a> etiketi ile link verilir ve CSS kodlarını yazacağımız <style type=”text/css”>…</style> kod bloğu <head> etiketi içerisine açılır. background-color ile sayfamıza arka plan rengi verdik.

list-style:none ile listeye ait olan noktalar kaldırıldı.

margin ve padding ile liste etiketinden gelen iç ve dış boşluklar sıfırlandı.

menu class’ının içindeki <li> etiketlerine biçimlendirme uygulandı.

  • margin:5px ile liste elemanlarının arası 5 piksel açıldı.
  • float:left ile liste elemanlarının yan yana gelmesi sağlandı.

menu class’ının içindeki <a> etiketlerine:

  • text-decoration:none ile altı çizili özelliği kaldırıldı.
  • color:#606 ile yazı rengi değiştirildi.
  • font-weight:bold ile yazı kalın hale getirildi.

menu class’ının içindeki <a> etiketlerine:

  • border:1px solid #609 ile çerçeve yapıldı.
  • border-top:5px solid #606 ile çerçevenin üst kısmı kalınlaştırıldı.
  • background:#FCF ile arka plan rengi verildi.

menu class’ının içindeki <a> etiketlerine:

  • width:150px ile genişliği ayarlandı.
  • display:block ile tüm liste elemanlarının aynı genişlikte blok halinde olması sağlandı.

menu class’ının içindeki <a> etiketlerine:

  • line-height ile metin yüksekliği değiştirildi.
  • padding:5px ile yazının çerçeveden uzaklığı ayarlandı.
  • text-align ile yazılar ortalandı.

a:hover ile linkin üzerine gidildiğinde gerçekleşecek değişiklikle yazıldı.

  • margin-top:5px ile üstten 5 piksellik girinti verildi.
  • border-top:5px solid #F06 ile çerçevenin üst çizgisinin rengi değiştirildi.
  • color:#F06 ile yazı rengi değiştirildi.

Tüm menü kodları:

 

About Seçil ŞEKERCİ HÜSEM

2010 yılından bu yana Bilişim Teknolojileri Öğretmeni olarak meslek liselerinde görev yapmaktayım.

View all posts by Seçil ŞEKERCİ HÜSEM →

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.