Html Menüye Alt Menü Ekleme

HTML Menüsüne Alt Menü Ekleme: Kapsamlı Bir Kılavuz

Bir web sitesi menüsü, kullanıcıların web sitenizde gezinmelerine yardımcı olan önemli bir navigasyon aracıdır. Alt menüler, ana menü öğelerinden daha fazla seçenek sunarak kullanıcı deneyimini iyileştirmeye yardımcı olabilir. Bu kılavuz, HTML menüsüne alt menü eklemeyi adım adım açıklayacaktır.

HTML Menüsü Oluşturma

Bir HTML menüsü oluşturmak için öncelikle bir <ul> (sırasız liste) etiketi kullanmanız gerekir. Her menü öğesi için bir <li> (liste öğesi) etiketi kullanın. Örneğin:

“`html

Ana Sayfa
Hakkımızda
Ürünler
İletişim

“`

Alt Menü Ekleme

Alt menü eklemek için, ana menü öğesinin <li> etiketi içine bir <ul> etiketi ekleyin. Alt menü öğeleri için de <li> etiketleri kullanın. Örneğin, “Ürünler” menü öğesine bir alt menü eklemek için:

“`html

Ana Sayfa
Hakkımızda
Ürünler
- Ürün 1
- Ürün 2
- Ürün 3
İletişim

“`

Alt Menüyü Gizleme

Alt menüler varsayılan olarak görünür. Ancak, kullanıcı üzerine gelene kadar gizli kalmalarını sağlayabilirsiniz. Bunu yapmak için, ana menü öğesinin <li> etiketine dropdown sınıfı ekleyin. Örneğin:

“`html

Ana Sayfa
Hakkımızda
Ürünler
- Ürün 1
- Ürün 2
- Ürün 3
İletişim

“`

CSS ile Alt Menüyü Şekillendirme

Alt menünün görünümünü ve hissini özelleştirmek için CSS kullanabilirsiniz. Örneğin, alt menü öğelerinin arka plan rengini, yazı tipi boyutunu ve hizalamasını değiştirebilirsiniz. İşte örnek bir CSS kodu:

“`css
.dropdown {
position: relative;
}

.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 10px;
}

.dropdown:hover .dropdown-menu {
display: block;
}
“`

Faydalı Kaynaklar

Sonuç

HTML menüsüne alt menü eklemek, kullanıcı deneyimini iyileştirmenin ve web sitenizin gezinmesini kolaylaştırmanın harika bir yoludur. Bu kılavuzdaki adımları izleyerek, web sitenize kolayca alt menüler ekleyebilir ve bunları CSS ile özelleştirebilirsiniz.