CSS açılır menüsü nasıl açılır

Bugün "Nasıl" sorusunu ele alacağızaçılır bir CSS menüsü oluşturur muyum? " Bu elemanın herhangi bir ek araç bağlantısı olmadan yapılması gerektiği hemen söylenmelidir. Yani, menü sadece CSS ve HTML ile oluşturulacaktır.

Hazırlanması

Neler tartışıldığını tam olarak anlamak içinMakale, teorik materyal hakkında biraz bilgi sahibi olmalısınız. Fakat sözde sınıflara aşina iseniz, bu paragrafı atlayabilirsiniz. Yani, dikey bir CSS açılır menüsü oluşturmak için ": hover" gibi bir öğeye ihtiyacımız var. Herhangi bir HTML etiketine bir sözde sınıf ": vurgulu" atanabilir. Bir fare imlecinin bir öğeye ne zaman işaret ettiğini belirlemenize olanak tanır. Örneğin, bir özellik atadık: "a: hover {color: red;}". Bu giriş, herhangi bir <a> etiketinin üzerine geldiğinizde içeriğinin kırmızıya dönüştüğü anlamına gelir. Bu sahte sınıfın hala hareketsiz bir öğe olduğunu belirtmekte fayda var. Bu arada, ": vurgulu" benzer elementlere sahiptir. Ancak bu sözde sınıf ile açılır bir CSS menüsü oluşturacağız.

talimat

Başlamak için, neyin oluşturduğunu anlamak önemlidir.açılır menü. Bu tanım çerçevesinde, çeşitli modellerin oluşturulması için birçok farklı teknik var. Bu durumda, sürekli olarak görünür birkaç öğeden ve birkaç ek (gizli) öğeden oluşan bir yapıyı sökeceğiz. Teori ile bitirelim ve uygulamaya geçelim.

Menümüzün bir düzenini oluşturun. HTML kodu etiketleme yapmak için. iç içe geçmiş bir liste oluşturun: <ul> <li> </ li> <li> <ul> <li> </ li> <li> </ li> </ ul> </ li> <li> </ li> < / ul>. Böyle bir şey sizin açılır menüden gibi görünmelidir. CSS sonradan müdahale etmek. Bu durumda ana liste ekte üç ana alanları ve iki oluşur.
Ek menüyü gizle. Bunu yapmak için stil sayfalarını kullanıyoruz, aşağıdaki özelliği tanımlarız: ul ul {display: none;} Bu, ikinci listenin elemanlarını ekrandan kaldıracaktır.
Ana sayfadan ayrılarak CSS'de bir CSS oluşturunlistesi. Basamaklı stil sayfalarında, aşağıdaki kuralı yazıyoruz: ul li: hover ul {display: block;}. Bu giriş, fareyi ul listesindeki li öğesinin üzerine getirdiğinizde, ekranda ul (iç içe) görüntülenir. İlk bakışta, böyle bir plan çok karmaşık ve kafa karıştırıcı görünebilir. Ama aslında her şey çok basit.
İçeriğinizi <li> etiketleri arasına ekleyerek bu düzeni kendiniz kullanın. Listedeki öğe sayısını değiştirebilirsiniz.

Dekoratif değişiklikler

Ana menü düzeni hazır olduğunda, şunları yapabilirsiniz:tasarımına devam edin. Muhtemelen, ilk etapta çoğu, listenin elemanını belirleyen işaretleyicilerinden kurtulmak ister. Bu, tek bir CSS özelliği, yani liste stili türü kullanılarak yapılır. Bu girişi eklemeniz gerekiyor: li {list-style-type: none;}. Ardından, bir çerçeve ekleyebilir ve bir arka plan yapabilirsiniz. Sınır ve arka plan özellikleri size yardımcı olacaktır. Belki de, bazıları açılan menü, ana öğeleri genişletirken, ek bir liste olarak görünür. Bunu düzeltmek için konumlandırabilirsiniz. Bunu yapmak için, basamaklı stil sayfalarında aşağıdaki girişi yazınız: ul ul {position: mutute; sol: 15 piksel; sağa: 15 piksel; üst: 15px; alt: 15 piksel;}. Doğal olarak, kendi kullanacağınız değerler. Açılır menüyü görmek istediğiniz yere bağlı olarak, CSS farklı efektler ekleyebilen ve listelerimizi dekore edebilecek birçok özellik sunacaktır.

Sonuç

Bir kez daha, menü düzeninin tasarım dikkati çekiyor. Bu durumda CSS kurallarını atamak için iç içe değerler kullanırsınız, örneğin ul ul. Belgede benzer başka tasarımlarınız varsa, büyük sorunlar olabilir. Bu durumlarda, örneğin, seçici veya kimlik tanımlayıcıları gibi daha özel bir amaç kullanmanız gerekir. Makaledeki açılır menünün düzeni genel tasarımla tanışma amaçlıdır. İşin geri kalan kısmı omuzlarında.