Dikey Açılır Menü Nasıl Yapılır

İçindekiler:

Dikey Açılır Menü Nasıl Yapılır
Dikey Açılır Menü Nasıl Yapılır

Video: Dikey Açılır Menü Nasıl Yapılır

Video: Dikey Açılır Menü Nasıl Yapılır
Video: CSS ile Yatay/Dikey Animasyonlu Açılır Menü Yapımı 😎 2024, Mayıs
Anonim

Dikey açılır menü çok kullanışlıdır - web sayfasında yerden tasarruf sağlarken aynı zamanda sitede kolayca gezinmeye yardımcı olur. CSS - Basamaklı Stil Sayfalarına dayalı bir açılır menü oluşturmaya çalışın. Henüz CSS kodu oluşturma konusunda uzman değilseniz,purecssmenu.com hizmetini kullanın. Bir menü türü seçmeniz, görünümünü özelleştirmeniz ve ardından bunu kendi sitenize uyarlamanız gerekir. Hizmetin kendisi, daha sonra sitenizin dosyalarına ekleyeceğiniz gerekli kodu üretecektir.

Dikey açılır menü nasıl yapılır
Dikey açılır menü nasıl yapılır

Talimatlar

Aşama 1

Purecssmenu.com web sitesine kaydolun, aksi takdirde oluşturulan menüyü indiremezsiniz. Sayfanın sol tarafındaki Şablonlar düğmesini tıklayın. Aşağıda, Önizleme penceresinin sağ tarafında bir önizleme yükleyecek olan, açılır menü şablonlarına sahip birkaç küçük pencere göreceksiniz. Sitenize uygun bir şablon seçin

Adım 2

Menünün yazı tipini ve rengini özelleştirin: Parametreler sekmesini kullanın. Yazı Tipi alanında, bir yazı tipi seçin, gerekirse yazı tipi boyutu, altı çizili ve kalın. Renkler alanında menü arka planı, yazı tipi rengi ve yazı tipi vurgulu ve arka plan vurgulu renklerini ayarlayın

Aşama 3

Menü öğelerini yönetmek için Öğeler sekmesini açın. Geri dönüşüm kutusunu temizle düğmesine tıklarsanız, örnek öğeler temizlenir ve kendinizinkini oluşturabilirsiniz. Bunu yapmak için, Öğe Ekle artı düğmesine basın - öğe, menünün sonuna eklenecektir. Sonraki Öğe Ekle düğmesi, seçili olan zamandan sonra bir öğe eklemek için kullanılır. Alt Öğe Ekle düğmesi, seçim için bir alt menü öğesi oluşturur. Buna göre, bir öğeyi kaldırmak için Öğeyi Kaldır düğmesini kullanın

4. Adım

Sitenin altındaki Öğe Parametreleri alanına dikkat edin. Metin satırında, Bağlantı satırında menü öğesinin adını belirtin - bu öğenin yönlendirileceği sayfanın url'si. İpucu satırında, bağlantının üzerine geldiğinizde gösterilecek olan öğenin bir açıklamasını bırakabilirsiniz. Hedef satırı, bağlantının yönlendirdiği sayfayı açmanın yolunu belirlemek için kullanılır. Bu satırdaki _self parametresi, sayfayı geçerli olanla aynı tarayıcı penceresinde açar

Adım 5

Menüyü ayarlamayı bitirdikten sonra indirin - sayfanın sağ altındaki İndir düğmesine tıklayın (bu işlev siteye kaydolduktan sonra kullanılabilir). Sabit sürücünüzde arşiv dosyasının kaydedileceği bir klasör seçin. Paketi aç. Purecssmenu.html dosyasındaki gerekli kodu sitenizin CSS şablon dosyasına kopyalamanız gerekecektir. Purecssmenu.html dosyasını bir metin düzenleyiciyle açın ve ve etiketleri arasındaki kodu sitenizin CSS şablonuna kopyalayın (bu dosya.css uzantısına sahiptir ve file.css gibi görünür). Şimdi kodu site şablon (temalar) dosyanıza yapıştırın - normal menü kodu yerine, yorumlar arasında Purecssmenu.html'den gelen kod. Bunu yapmak için, en azından programlamaya biraz aşina olmanız gerekir. Kodu doğru dosyaya yapıştırdığınızdan ve kaydettiğinizden emin olun.

Önerilen: