Bu yazımızda Html ve Css ile dikey menü nasıl yapılır? onu öğreneceğiz. Menülerimizi oluştururken en temelde sırasız listeleri (<ul><li> </li></ul>) kullanıyoruz. Daha sonra ise Css kodlarıyla menümüzü şık bir tasarıma kavuşturuyoruz.
Örneğimizi inceledikten sonra Html listeleri konusunda eksikleriniz olduğunu düşünürseniz,
Html Listeleme Etiketleri – ul Etiketi – ol Etiketi
Html Listeleme Örnekleri – İç İçe Listeler
yazılarımı okuyabilirsiniz.
Html ve Css kodlarını paylaştıktan sonra nasıl bir menü oluştuğuna uygulamalı olarak bakalım.
Css ile Dikey Menü Yapımı
Dikey Menü Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ul> <li> <a href="#" class="active">Anasayfa</a> </li> <li> <a href="#">Servisler</a> </li> <li> <a href="#">Hakkımda</a> </li> <li> <a href="#">İletişim</a> </li> </ul> |
Dikey Menü Css 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 |
ul { padding: 0; margin: 0; list-style-type: none; width: 200px; display: inline-block; } ul li a { padding: 12px; display: block; text-decoration: none; background-color: #4fb99f; color: #fff; font-size: 18px; border-left:5px solid #4fb99f; } ul li a.active { background-color: #068587; border-left:5px solid #f2b134; } ul li a:hover:not(.active) { background-color: #068587; border-left:5px solid #f2b134; } |
Yaptıklarımızı kısaca özetleyecek olursak;
► Menü elemanları için bir <ul> <li> listesi yazıyoruz.
► Class’ı active olan link’e farklı bir renk vererek belirgin hale getiriyoruz.
► Menü genişliğini 200px yapıyoruz.
► Menü elemanlarına hover efekti ve sol kenarlık veriyoruz.
Dikey Menümüzün Son Hali
Şu Html ve Css menü örnekleri de ilginizi çekebilir.
Css ile Yatay Sticky Menü Yapımı
Css ile Yatay Sabit Menü Yapımı
Css ile Yatay Açılır Menü Yapımı
Css ile Dikey Sabit Menü Yapımı
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
