İyi HTML kodu ve basit CSS kuralları yardımıyla, kolayca değiştirilebilen ve tamamlanabilen güzel bir açılır menü oluşturabilirsiniz. İşaretleme dilini ve Basamaklı Stil Sayfalarını kullanarak menülerin tüm tarayıcılarda doğru çalışmasını sağlayabilirsiniz.
Talimatlar
Aşama 1
İlk olarak, menünüzün temel yapısını oluşturun. Bir metin düzenleyici açın ve bir üst liste öğesi görevi gören bir alt menüye sahip numaralı bir liste oluşturun. Örneğin:
-
İlk eleman
- açılır öğe
- açılır menü2
Adım 2
Oluşturulan listeyi ayrı bir html dosyasına kaydedin. Ardından,.css uzantılı bir dosya oluşturun ve tüm stil sayfası parametrelerini girin.
Aşama 3
Madde işareti listesinde geçerli olan tüm dolgu ve madde işaretlerini kaldırın ve CSS araçlarını kullanarak menü genişliğini ayarlayın: ul {list-style: none;
genişlik: 200 piksel; }
4. Adım
Konum niteliğini kullanarak listedeki tüm öğelerin göreli konumunu ayarlayın: ul li {konum: göreceli; }
Adım 5
Ardından, fare imleci öğenin üzerindeyken öğelerinin her biri ana menünün sağında görünecek bir alt menü tasarlamanız gerekir: li ul {position: mutlak;
sol: 199 piksel;
üst: 0;
görüntü yok; } left özniteliği, menünün kendisinin genişliğinden bir piksel daha azdır. Bu, açılır öğelerin çift kenarlık oluşturmadan akıllıca konumlandırılmasını sağlar. Display özelliği, sayfa açılırken alt menüyü gizlemek için kullanılır.
6. Adım
Uygun css seçeneklerini kullanarak bağlantıları istediğiniz gibi şekillendirin. Her bağlantının kendisi için ayırdığı tüm alanı kaplaması için display:block parametresini ekleyin.
7. Adım
Menünün, imleç üzerinde olduğu (vurgulu) olduğu anda görünmesi için, kodu girmeniz gerekir: li: hover ul {display: block; }
8. Adım
Bağlantıları ve liste öğelerini istediğiniz gibi görüntülemek için ek seçenekleri ayarlayın.
9. Adım
Açılır menü hazır. Şimdi, özniteliği.html dosyasına dahil etmeye devam ediyor: Açılır menü
