HTML – CSS ile Dikey Menü Örneği

HTML etiketlerinden liste kullanılarak ve CSS ile biçimlendirerek basit dikey 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ı.

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 ile yazının kalın olması sağlandı.

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

  • border:1px solid #609 ile çerçeve yapıldı.
  • border-left:5px solid #606 ile çerçevenin sol kısmı daha kalın hale getirildi.
  • background:#FCF ile arka plan rengi değiştirildi.
  • width:150px genişlikleri ayarlandı.

Maalesef genişlik (width:150px) değerinin etkisini göremiyoruz. Bunun etkisini anlayabilmek için display:block ile nesneler blok haline getirilir.

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

  • padding:5px ile metinlerin çerçeveden uzaklığı 5 piksel olarak ayarlandı.
  • line-height:25px ile satır yüksekliği değiştirildi.

a:hover ile linkin üzerine gidildiğinde gerçekleşecek değişiklikler düzenlendi.

  • margin-left:5px ile soldan 5 piksellik girinti verildi.
  • color:#F06 ile yazı rengi değiştirildi.
  • border-left:5px solid #F06 ile çerçevenin sol çizgisinin 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.