Güzel bir açılır menü yalnızca JavaScript'te değil, aynı zamanda standart HTML etiketleri kullanılarak da oluşturulabilir. Bu açılır menü oluşturma yöntemi, site oluşturmada ilk adımlarına yeni başlayanlar ve sayfalarda menü oluşturma işini basitleştirmek isteyenler için faydalı olacaktır.
Talimatlar
Aşama 1
HTML kodunda, böyle bir menü, içinde iç içe listeler bulunan sırasız bir listedir. Başlamak için bir style.css dosyası oluşturun ve menüyü biçimlendirmek ve biçimlendirmek için aşağıdaki CSS kodunu buraya kopyalayın:
#nav, #nav ul {
liste stili: yok;
kenar boşluğu: 0;
dolgu: 0;
kenarlık: 1 piksel katı # 000;
arka plan: # 515151;
yüzer: sol;
genişlik: %100;
}
#nav li {
yüzer: sol;
pozisyon: göreceli;
arka plan rengi: # 003366;
arka / zemin: yok;
}
#nav li ul {
görüntü yok;
pozisyon: mutlak;
arka plan rengi: # 003366;
dolgu: 8 piksel 0;
genişlik: 138 piksel;
}
Adım 2
Şimdi menü öğelerine biraz dekorasyon eklememiz gerekiyor. Bunlar için genişlik ve yüksekliği tanımlayın, alt çizgileri kaldırın, her bağlantı için net bir genişlik ayarlayın ve istediğiniz arka plan renklerini belirtin.
Aşama 3
Tüm bu değişiklikler için dosyaya aşağıdaki kodu ekleyin:
#nav a {
renk: #fff;
metin-dekorasyon: yok;
Ekran bloğu;
genişlik: 120 piksel;
dolgu: 4px 10px;
arka plan rengi: # 003366 tekrar-y sağ;
}
#nav a: üzerine gelin {
renk: # 000;
arka plan rengi: # 0033FF;
}
#nav li: fareyle üzerine gelin {
arka plan rengi: # 333333;
}
Ardından menüyü sonlandırmak için aşağıdaki kod parçasını ekleyin:
#nav li: vurgulu li ul {
görüntü yok;
genişlik: 138 piksel;
üst: -9 piksel;
sol: 133 piksel;
}
#nav li: vurgulu li: vurgulu ul {
Ekran bloğu;
}
4. Adım
HTML sürümünde, genel sırasız menü listesi şöyle görünür - temelde, makalede belirtilen menü oluşturulur.
- Ev
-
Katalog
-
Tüm ürünler
- Tarihe göre
- Üreticiler
- Diğer
-
