HTML ve CSS dilinde açılır menüler nasıl oluşturulur?

Yazar: Lewis Jackson
Yaratılış Tarihi: 13 Mayıs Ayı 2021
Güncelleme Tarihi: 1 Temmuz 2024
Anonim
Workcube ERP ve Bir ERP’den Çok Daha Fazlası!
Video: Workcube ERP ve Bir ERP’den Çok Daha Fazlası!

İçerik

Bu wikiHow makalesi, HTML ve CSS kodunu kullanarak web sitenizde nasıl açılır menü oluşturacağınızı öğretir. Ziyaretçi fare imlecini belirtilen düğmenin üzerine getirdiğinde bir açılır menü görünecektir; Ardından, o seçeneğin web sitesine gitmek için öğelerden birine tıklayabilirler.

Adımlar

  1. HTML metin düzenleyicisini açın. Basit bir metin düzenleyici (Not Defteri, TextEdit) veya daha gelişmiş (Notepad ++) kullanabilirsiniz.
    • Notepad ++ 'a gitmeye karar verirseniz, şunu seçmeniz gerekir: HTML menünün "H" kısmından Dil Devam etmeden önce pencerenin üst kısmındaki (Dil).

  2. Belge için bir başlık girin. Belgenin geri kalanı için kullanılacak kodun türünü belirleyen kod:
  3. Açılır menü oluşturun. Açılır menünün boyutunu ve rengini belirtmek için aşağıdaki kodu girin, "#" harfini kullanmak istediğiniz parametre ile değiştirmeyi unutmayın (sayı ne kadar büyükse açılır menü o kadar büyük olur). Arka plan rengini "arka plan rengi" ve "renk" rengini de istediğiniz renkle (veya HTML renk koduyla) değiştirebiliriz:

  4. Açılır menüdeki bağlantıları değiştirmek istediğinizi belirtin. Daha sonra menüye bağlantılar ekleyeceğiniz için, bunları aşağıdaki kodu girerek açılır menüde değiştirebilirsiniz:
  5. Açılır menünün görünümünü oluşturur. Aşağıdaki kod, web sayfasındaki diğer öğelerle birleştirildiğinde konumu dahil olmak üzere açılır menünün boyutunu ve rengini belirler. "Min-genişlik" bölümündeki "#" karakterini istediğiniz sayıyla (örneğin 250) değiştirmeyi ve "arka plan rengi" (arka plan rengi) başlığını belirli bir renk veya HTML koduyla değiştirmeyi unutmayın:

  6. Açılır menünün içeriğine ayrıntıları ekleyin. Aşağıdaki kod, içindeki metin rengini ve açılır menü düğmesinin boyutunu belirleyecektir. "#" İşaretini, menü düğmesi boyutunu tanımlayan piksel sayısıyla değiştirmeyi unutmayın:
  7. Açılır menüde üzerine gelindiğinde fare işaretçisinin nasıl değiştiğini düzenler. Fare işaretçisini menü düğmesinin üzerine getirdiğinizde bazı renklerin değiştirilmesi gerekir. "Arka plan rengi" çizgisi, açılır menüden bir şey seçtiğinizde değiştirilen rengi yansıtırken, ikinci "arka plan rengi" menü düğmesinin değiştireceği renktir. İdeal olarak, bu renklerin her ikisi de seçilmediklerinden daha açık olmalıdır:
  8. CSS bölümünü kapatın. Belgenin CSS kısmıyla işinizin bittiğini belirtmek için aşağıdaki kodu girin:
  9. Menü düğmesi için bir ad oluşturun. Aşağıdaki kodu girin ancak "Ad" ı açılır menü düğmesinin adıyla değiştirmeyi unutmayın (örneğin: Menü):
  10. Menüye bağlantılar ekleyin. Açılır menüdeki her öğe, mevcut web sitesindeki bir sayfa veya harici bir web sitesi gibi bir şeye bağlantı verecektir. Değiştirmeniz gereken aşağıdaki kodu girerek seçiminizi açılır menüye ekleyin https://www.website.com bağlantı adresiyle (parantezleri koruyun) ve "Ad" yerine bağlantı adını yazın.
  11. Belgeyi kapat. Belgeyi kapatmak ve açılır menünün kod sonunu belirtmek için aşağıdaki etiketleri girin:
  12. İnceleme kodu açılır menüyü belirtir. Snippet şunun gibi görünecektir: Reklamlar

Tavsiye

  • Web sitesinde yayınlamadan önce daima kodu gözden geçirin.
  • Yukarıdaki talimatlar, fare imlecini menü düğmesinin üzerine getirdiğinizde çalışacak açılır menüler içindir. Yalnızca tıkladığınızda tıklanan bir açılır menü oluşturmak istiyorsanız, JavaScript'e ihtiyacınız vardır.

Uyarı

  • "Siyah" veya "yeşil" gibi etiketler kullandığımızda HTML rengi oldukça sınırlıdır. Kullanıcıların burada özel renkler oluşturmasına ve kullanmasına olanak tanıyan HTML renk kodu oluşturucusuna göz atabilirsiniz.