Menü oluşturma, muhtemelen sitelerin ve programların geliştirilmesindeki ana noktalardan biridir. Ek olarak, böyle bir menünün iyi bir detaylandırılması ve mantıklı tasarımı, bir sitenin veya herhangi bir programın yüzüdür. Örneğin, Microsoft'u ve Windows 7 işletim sistemini ele alalım. Windows 7'nin piyasaya sürülmesinden sonra Microsoft, kendisi için gurur duymayan birçok eleştiri duydu. Pek çok eleştiri var, ancak çoğu zaman uygun olmayan şekilde yerleştirilmiş menü öğeleri var. CSS ve Expression Web ile yatay bir açılır menünün nasıl oluşturulacağına ilişkin bu öğreticiyi dikkatlice okuyun. Menüyü oluşturmak için etiket stilleri değişecek
Talimatlar
Aşama 1
Stilleri Yönet'e gidin ve ardından Yeni Stil düğmesini tıklayın. Yeni oluşturduğunuz yeni stile Selector ul li adını verin. Ayrıca yeni stilin drop-down.css dosyasında tanımlanması gerektiğini unutmayın.
Adım 2
Yatay bir menüyü genişletmek için menü öğelerine bunun yatay olacağını söylemeniz gerekir. Ardından, her bir menü öğesinin genişliğini belirlemeniz ve tüm liste öğelerinin önündeki tüm gereksiz noktaları kaldırmanız gerekir.
Aşama 3
Yatay hizalama için Düzen'e gidin ve görüntü niteliğini satır içi olarak ayarlayın. Float niteliğini sola ayarlayın. Uygula düğmesini tıklayın. Tüm liste öğeleri tek bir satırda ayarlanmalıdır. Birbirleriyle örtüşmemeleri için şunları yapmanız gerekir: width özniteliğinin Konum değerini 150px olarak ayarlayın. Şimdi kontrol et. Listenin tüm öğeleri aynı boyutta olmalıdır.
4. Adım
Şimdi liste öğelerinin önündeki noktaları kaldırmaya çalışmamız gerekiyor. Bunu yapmak için Liste'ye gidin ve liste stili –type özniteliğini yok olarak ayarlayın.
Adım 5
Tüm değişiklikleri kabul etmek için Tamam'ı tıklayın.
6. Adım
ul li stili için yazı tipi boyutunu ayarlamak için aşağıdakileri yapmanız gerekir. Stilleri Yönet'te, Stili Değiştir'i seçmeniz gereken ul li stiline sağ tıklayın. Nitelikleri eklemek veya değiştirmek için tanıdık iletişim kutusu açılacaktır. Yazı tipi kategorisine gidin ve yazı tipi ailesi özniteliğini Arial, Helvetica, sans-serif olarak ayarlayın. Ardından, font-size özniteliğine gidin ve 0.9em olarak ayarlayın. Bundan sonra, text-transform niteliğini ayarlayın, bunun için değeri büyük harf olarak ayarlayın.
7. Adım
Oluşturulan menüdeki öğelerin yüksekliği, Konum kategorisinde ayarlanabilir. Yükseklik özelliğini 30 piksel olarak ayarlayın.
8. Adım
Ardından menu.html dosyasını kaydetmeniz gerekir. Bunu yapmak için Expression Web, dosyayı kaydetmek için gerekli Gömülü Dosyaları Kaydet penceresini açacaktır. Drop-down.css dosyasına kaydedin. Kaydetmek için Tamam'a tıklayın.
9. Adım
Şimdi sonucunuzu kontrol edin. Güvenilirlik için farklı tarayıcılarda test etmek daha iyidir. Varsayılan tarayıcıda elde edilen sonucu kontrol etmek için klavyenizdeki F12 tuşuna basmalısınız.
