Bir Açılır Menü Nasıl Oluşturulur

İçindekiler:

Bir Açılır Menü Nasıl Oluşturulur
Bir Açılır Menü Nasıl Oluşturulur

Video: Bir Açılır Menü Nasıl Oluşturulur

Video: Bir Açılır Menü Nasıl Oluşturulur
Video: CSS ile Açılır (dropdown) Menü Yapımı 2024, Mayıs
Anonim

Yetkili HTML kodu ve basit CSS kuralları yardımıyla bir açılır menü oluşturabilir, onu tamamlayabilir ve değiştirebilirsiniz. Basamaklı tablolar ve işaretleme dili araçlarını kullanarak, menünün kendisinin tüm tarayıcılarda doğru şekilde çalışmasını sağlayabilirsiniz.

Bir açılır menü nasıl oluşturulur
Bir açılır menü nasıl oluşturulur

Talimatlar

Aşama 1

Önce temel menü çubuğunu tutun. Bir metin düzenleyicide alt menü içeren özel bir numaralandırılmış liste oluşturun. Genellikle bu amaçlar için "Not Defteri" kullanılır. Alt menü, ana listenin bir öğesi olarak işlev görür. Örneğin: Birinci ElemanSel ElemanıSel Elemanı2Alan Elemanı3Alan Elemanı4Alan Elemanı5

Adım 2

Bu listeyi ayrı bir html dosyasına kaydedin. Ardından bir.css dosyası oluşturun. Gerekli tüm stil sayfası parametrelerini girin. Bunu çok dikkatli yapın, çünkü bir hata ve açılır menü doğru görüntülenmez veya hiç çalışmaz.

Aşama 3

Madde işareti listesinde uygulanan tüm madde işaretlerini ve dolguyu kaldırın. Menünün genişliğini CSS araçlarını kullanarak ayarlayın: ul -style: none; width: 200px; }

4. Adım

Listedeki tüm öğelerin göreceli konumunu, position: ul li: göreceli; }

Adım 5

Ardından, fare imleci öğenin üzerine geldiğinde öğeleri ana menüden sağda görünecek olan alt menüyü düzenleyin: li ul: mutlak; sol: 199 piksel; top: 0; görüntü: yok; }

6. Adım

Sol öznitelik, menünün kendisinin genişliğinden bir piksel daha azdır. Bu, açılır öğelerin çift kenarlık oluşturmadan doğru şekilde konumlandırılmasını sağlar. Display özelliği, sayfa açılırken alt menüyü gizlemek için kullanılır.

7. Adım

Uygun css seçeneklerini kullanarak bağlantıları gerektiği gibi biçimlendirin. Display:block parametresini dahil edin, böylece linkler kendilerine ayrılan tüm alanı kaplar. Fare imleci üzerindeyken menünün görünmesini sağlamak için aşağıdaki kodu girin: li: hover ul: blok; }

8. Adım

Liste öğelerini ve bağlantılarını istediğiniz gibi görüntülemek için ek seçenekleri ayarlayın..html dosyasına bir öznitelik ekleyin. Açılır menü kullanıma hazırdır.

Önerilen: