Stil sayfasını oluşturma

Menünün bağımsız bir HTML dosyasına gitmesini isterseniz, etiketler arasında ve CSS kodunun nereye gideceğini belirtmelisiniz. Aşağıdakileri dosyanıza yazın.

Bu iki etiket arasındaki boşluk stil sayfanızdır. Ayrı bir CSS dosyası kullanıyorsanız, "başlık" etiketlerine aşağıdakileri ekleyin:

Sonra stil sayfanız olacak "style.css" adlı bir dosya oluşturun. Stil sayfasını ana HTML dosyasıyla aynı dizinde tutun.

Menüyü oluşturma

Menüde içeri girmek için bir etiket oluşturmalısınız. Aşağıdaki menüyü gitmek istediğiniz yere HTML sayfanıza ekleyin:

Sonra menü bölücüyü tanımlamanız gerekir. Stil sayfanıza aşağıdaki kodu ekleyin:

menü {

genişlik: 200px; }

Bu girdiye, bölenin sahip olmasını istediğiniz diğer CSS stillerini ekleyin; örneğin, bir arka plan rengi, kenarlıklar veya farklı bir boyut.

HTML işaretlemesi

Menü için kod ekleyin. Menü, sırasız bir liste kullanacak:

. Menünüzün etiketleri arasına aşağıdaki kodu ekleyin.
• Menü öğesi 1
  • Öğe 1 alt menüsü
  • Öğe 2 alt menüsü

Etiketlere dikkat edin

alt menülerin etiketleri arasında
• ve
"Menünün 1. öğesi" için. Bu, tarayıcıya alt menünün bu menü öğesinin altında yer aldığını söyler. Yukarıdaki menüyü kendi menünüzü temsil edecek şekilde uyarlayın, gerekirse kendi URL'lerinizi ve ek alt menülerinizi ekleyin.

CSS stili

Bu noktada menü görünecek, ancak alt menü her zaman görüntülenecektir. Alt menüyü gizlemek ve göstermek için "display" özelliğini kullanmanız yeterlidir. Stil sayfanıza aşağıdakileri ekleyin:

menu li {konum: göreli;}

menu ul ul {

pozisyon: mutlak; üst: 0; sol:% 100; genişlik: 100px; } div # menu ul ul {ekran: none;} div # menu ul li: hover ul {ekran: blok;}

Tüm dosyaları kaydet. Açılan menünüz hazır.

referanslar

• Tanfa.co.uk: CSS Pop-Out Menü Eğitimi (CSS açılır menü öğretici)

Daha fazla makale

• HTML'de yatay bir açılır menü nasıl oluşturulur?
• Bireysel DIV için tüm CSS stilleri nasıl kaldırılır
• HTML'deki satırlar arasındaki boşluk nasıl azaltılır
• HTML ile yatay olarak iki resim nasıl eklenir?
• DIV sınıfları içinde CSS nasıl geçersiz kılınır
• Sayfanın altındaki bir DIV bağlantısı nasıl yapılır?
• HTML metnini bir görüntüden ayıran dikey çizgi nasıl yapılır