CSS İLE DİKEY MENÜ YAPIMI
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.
Html ve Css kodlarını paylaştıktan sonra nasıl bir menü oluştuğuna uygulamalı olarak bakalım.
CSS İLE DİKEY MENÜ YAPIMI
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> |
| 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: color: font-size: 18px; border-left:5px solid [ } ul li a.active { background-color: #068587; border-left:5px solid [ } ul li a:hover:not(.active) { background-color: #068587; border-left:5px solid [ } |
► 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
Umarım sizin için faydalı bir yazı olmuştur.
Son düzenleme:
