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ı.
1 2 3 4 5 6 7 8 9 10 11 | </html> <body> <ul class="menu"> <li> ANASAYFA</li> <li>PROJELER</li> <li>REFERANSLAR</li> <li>HAKKINDA</li> <li>İLETİŞİM</li> </ul> </body> </html> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <style type="text/css"> body { background-color:#f0f8ff; } </style> </head> <body> <ul class="menu"> <li><a href="anasayfa.html">ANASAYFA</a></li> <li><a href="projeler.html">PROJELER</a></li> <li><a href="referanslar.html">REFERANSLAR</a></li> <li><a href="hakkinda.html">HAKKINDA</a></li> <li><a href="iletisim.html">İLETİŞİM</a></li> </ul> </body> </html> |
list-style:none ile listeye ait olan noktalar kaldırıldı.
1 2 3 4 5 6 7 8 9 10 11 | <style type="text/css"> body { background-color:#f0f8ff; } .menu { list-style:none; } </style> |
margin ve padding ile liste etiketinden gelen iç ve dış boşluklar sıfırlandı.
1 2 3 4 5 | .menu { list-style:none; margin:0; padding:0; } |
menu class’ının içindeki <li> etiketlerine biçimlendirme uygulandı. margin:5px ile liste elemanlarının arası 5 piksel açıldı.
1 2 3 4 | .menu li { margin:5px; } |
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ı.
1 2 3 4 5 6 | .menu a { text-decoration:none; color:#606; font-weight:bold; } |
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ı.
1 2 3 4 5 6 7 8 9 10 11 | .menu a { text-decoration:none; color:#606; font-weight:bold; border:1px solid #609; border-left:5px solid #606; background:#FCF; width:150px; } |
Maalesef genişlik (width:150px) değerinin etkisini göremiyoruz. Bunun etkisini anlayabilmek için display:block ile nesneler blok haline getirilir.
1 2 3 4 5 6 7 8 9 10 11 12 | .menu a { text-decoration:none; color:#606; font-weight:bold; border:1px solid #609; border-left:5px solid #606; background:#FCF; width:150px; display:block; } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .menu a { text-decoration:none; color:#606; font-weight:bold; border:1px solid #609; border-left:5px solid #606; background:#FCF; width:150px; display:block; padding:5px; line-height:25px; } |
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.
1 2 3 4 5 6 | .menu a:hover { margin-left:5px; border-left:5px solid #F06; color:#F06; } |
Tüm menü kodları:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <html> <head> <style type="text/css"> .menu { list-style:none; margin:0; padding:0; display:inline-block; } .menu li { margin:5px; } .menu a { text-decoration:none; color:#606; font-weight:bold; border:1px solid #609; display:block; padding:5px; background:#FCF; border-left:5px solid #606; width:150px; line-height:25px; } .menu a:hover { margin-left:5px; border-left:5px solid #F06; color:#F06; } </style> </head> <body> <ul class="menu"> <li><a href="anasayfa.html">ANASAYFA</a></li> <li><a href="projeler.html">PROJELER</a></li> <li><a href="referanslar.html">REFERANSLAR</a></li> <li><a href="hakkinda.html">HAKKINDA</a></li> <li><a href="iletisim.html">İLETİŞİM</a></li> </ul> </body> </html> |
