HTML ve CSS ile Menü Ekleme: Kapsamlı Bir Kılavuz
Bir web sitesi oluştururken, kullanıcıların sayfalarınızda kolayca gezinmelerini sağlamak için bir menü eklemek çok önemlidir. HTML ve CSS kullanarak, çeşitli stillerde ve işlevlerde menüler oluşturabilirsiniz. Bu kapsamlı kılavuz, HTML ve CSS ile menü ekleme konusunda adım adım talimatlar sağlayacaktır.
HTML ile Menü Oluşturma
Menü oluşturmak için HTML’de <nav> etiketini kullanırız. <nav> etiketi, web sitesindeki gezinme bağlantılarını içeren bir bölümü tanımlar.
“`html
“`
Yukarıdaki kod, yatay bir menü oluşturur. <ul> etiketi, menü öğelerini içeren sıralı bir liste tanımlar. Her <li> etiketi bir menü öğesini temsil eder ve <a> etiketi, menü öğesinin bağlantısını tanımlar.
CSS ile Menü Stilleri
Menünün görünümünü ve hissini özelleştirmek için CSS kullanırız. Aşağıdaki CSS kuralları, menüye temel stiller uygular:
“`css
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style-type: none;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
nav a:hover {
color: #000;
background-color: #ccc;
}
“`
Bu CSS kuralları, menüye siyah bir arka plan rengi, beyaz bir yazı rengi ve 10 piksellik bir dolgu uygular. Menü öğeleri yatay olarak ortalanır ve aralarında 10 piksel boşluk vardır. Menü öğelerinin bağlantıları beyaz renktedir ve üzerine gelindiğinde siyah renge döner ve gri bir arka plan alır.
Dikey Menüler
Dikey bir menü oluşturmak için <ul> etiketinin display özelliğini flex yerine block olarak ayarlayın. Bu, menü öğelerini dikey olarak hizalayacaktır.
css
nav ul {
display: block;
}
Açılır Menüler
Açılır menüler, üzerine gelindiğinde alt menü öğelerini gösteren menülerdir. Açılır menüler oluşturmak için <ul> etiketinin içine başka bir <ul> etiketi yerleştirin ve alt menü öğelerini içine ekleyin.
“`html
“`
Alt menü öğelerini gizlemek için CSS’de display: none özelliğini kullanın. Üzerine gelindiğinde alt menü öğelerini göstermek için display: block özelliğini kullanın.
“`css
nav ul ul {
display: none;
}
nav li:hover ul {
display: block;
}
“`
Faydalı Kaynaklar
Sonuç
HTML ve CSS kullanarak menüler oluşturmak, web sitelerinize gezinme işlevselliği eklemenin kolay ve etkili bir yoludur. Bu kılavuzda sağlanan adım adım talimatları izleyerek, çeşitli stillerde ve işlevlerde menüler oluşturabilirsiniz.