Basamaklı Stil Sayfaları (CSS), bir Köprü Metni Biçimlendirme Dili (HTML) veya Genişletilebilir İşaretleme Dili (XML) belgesinin biçimlendirilme biçimini tanımlamak için kullanılan bir addır. Her tür XML belgesi için kullanılabilir, ancak en çok HTML ile yazılmış web sayfalarında kullanılır. CSS, web sayfalarında açılır menüler oluşturmak için kullanılabilir. Açılan CSS menüleri, ziyaretçinin menüde gezinmek için fareyi kullanana kadar gösterilen tek bir metin öğesine sahiptir; bu noktada tüm öğelerin listesi gösterilir. Menü, CSS tanımlaması ve sınıf etiketleri kullanılarak oluşturulur.
Açılır CSS menüleri ID seçiciyle başlar. Bu seçici # gibi görünüyor. Kimliğin adı takip eder. Kimliği bir şey olarak adlandırabilirsiniz, ancak başkalarının kodunuzu okuyabilmesi için açıklayıcı olması gerekir. Örneğin, bir açılır menü # drop1 kodunu kullanabilir.
Bir noktaya benzeyen sınıf seçicisini kullanarak, aşağı açılan CSS menüsünde ilk öğenin sınıfını oluşturun. Sınıf, HTML liste öğesinin bir parçası olacaktır. Liste öğesi "li" karakterleriyle belirtilir. "Li.top" yazarak en üst seviye sınıfı oluşturun. Sınıf tanımı iki kaşlı ayraç arasında bulunur.
Aşağıdaki örnek, listedeki ilk öğe için tüm CSS kodunu gösterir:
# drop1 li.top {font-family: Verdana, Cenevre, san-serif;
yazı tipi boyutu:% 100;
renk: # FF00FF;}
Ardından, CSS menüsündeki ilk öğenin altına gizlenecek öğeler için bir sınıf oluşturun. Sınıf, "ul" karakterleriyle belirtilen sıralanmamış HTML listesini tanımlayacaktır. Tanım, en üstteki menü öğesiyle aynı görünecek ve açıklamanın başında "display: none # 59" yazısının eklenmesiyle ortaya çıkacaktır. Bu, imleç açılan CSS menüsü üzerine gelinceye kadar, sıralanmamış listedeki öğelerin gizleneceğini gösterir.
Aşağıdaki, CSS kodunun bu kısmının bir örneğidir:
# drop1 ul.link {
display: none # 59
font ailesi: Verdana, Cenevre, san-serif;
yazı tipi boyutu:% 100;
renk: # FF00FF;}
HMTL belgesinin geri kalan kısmında görünmek için aşağı açılan CSS menüsünü isteyeceksiniz. Aksi halde, ziyaretçi menüyü dolaştığında, listeye yer açmak için belgenin geri kalanını sayfa boyunca aşağı iter. Konum elemanını mutlak olarak ayarlamak, bunu yapacak.
Konumunu belirleme kodu:
# Drop1 {konumu: mutlak;}
Aşağı açılır menünün CSS kısmı için gerekli olan budur. Açılan CSS menüsünün geri kalan kısmı "div," "id," "class" "li" ve "ul" öğelerini kullanarak HTML belgesinde oluşturulur. "Div" etiketi dokümanın menü bölümünü ayırır. Aşağı açılır menü bölümünü oluşturmak için <div id = "drop1"> yazın. Sonra sıralanmamış listeyi HTML "ul" öğesini kullanarak başlatın.
Üst sınıfı ilk liste öğesine ve kalan öğelerin bağlantı sınıfını ekleyin. HTML kodu şuna benzemelidir:
<div id = "drop1">
<li class = "top"> Üst Öğe </li>
<li class = "link"> <a href="#"> Öğe </a> </li>
<li class = "link"> <a href="#"> Öğe </a> </li>
<li class = "link"> <a href="#"> Öğe </a> </li>
</ul> </div>
Belgeyi bir web tarayıcısında açtığınızda, açılan CSS menüsü sayfada tek bir öğe olarak görünecektir. Farenizi üst öğenin üzerine getirdiğinizde menünün geri kalanı görünecektir. Sayfadaki metnin geri kalanı hareket etmeyecek, ancak menü tarafından bir kısmı gizlenecektir.
