Jak utworzyć rozwijane menu CSS?
Cascading Style Sheets (CSS) to nazwa używana do opisu sposobu formatowania dokumentu Hyper Text Markup Language (HTML) lub Extensible Markup Language (XML). Można go używać do każdego typu dokumentu XML, ale najczęściej jest on używany w przypadku stron internetowych napisanych w języku HTML. CSS może być używany do tworzenia rozwijanych menu na stronach internetowych. W rozwijanych menu CSS wyświetlana jest pojedyncza pozycja tekstowa, dopóki użytkownik nie kliknie myszą nad menu, a następnie wyświetli się cała lista pozycji. Menu tworzone jest za pomocą identyfikatora CSS i znaczników klasy.
Rozwijane menu CSS zaczynają się od selektora ID. Ten selektor wygląda jak #. Po nim następuje nazwa identyfikatora. Możesz nazwać dowolny identyfikator, ale powinien on mieć charakter opisowy, aby inni mogli przeczytać Twój kod. Na przykład w menu rozwijanym można użyć kodu # drop1.
Utwórz klasę dla pierwszego elementu w rozwijanym menu CSS, używając selektora klas, który wygląda jak kropka. Klasa będzie częścią elementu listy HTML. Element listy jest oznaczony znakami „li”. Utwórz klasę najwyższego poziomu, wpisując „li.top”. Opis klasy jest zawarty między dwoma nawiasami klamrowymi.
Poniższy przykład pokazuje cały kod CSS dla pierwszego elementu na liście:
# drop1 li.top {font-family: Verdana, Geneva, san-serif;
rozmiar czcionki: 100%;
kolor: # FF00FF;}
Następnie utwórz klasę dla elementów, które będą ukryte pod pierwszym elementem w menu CSS. Klasa opisze nieuporządkowaną listę HTML, która jest oznaczona znakami „ul.” Opis będzie wyglądał zasadniczo tak samo, jak element menu najwyższego poziomu, z dodatkiem słów „display: none # 59” na początku opisu. Oznacza to, że elementy na liście nieuporządkowanej będą ukryte, dopóki wskaźnik nie znajdzie się nad rozwijanym menu CSS.
Oto przykład tej części kodu CSS:
# drop1 ul.link {
wyświetlacz: brak # 59
rodzina czcionek: Verdana, Genewa, san-serif;
rozmiar czcionki: 100%;
kolor: # FF00FF;}
Będziesz chciał, aby rozwijane menu CSS pojawiło się na pozostałej części dokumentu HMTL. W przeciwnym razie, gdy gość znajdzie się nad menu, przesunie resztę dokumentu w dół strony, aby zrobić miejsce dla listy. Ustawi to element position na wartość bezwzględną.
Kod do ustawienia pozycji to:
# drop1 {pozycja: absolutna;}
To wszystko, czego potrzeba do części CSS rozwijanego menu. Reszta rozwijanego menu CSS jest tworzona w dokumencie HTML przy użyciu elementów „div”, „id”, „” class, „„ li ”i„ ul ”. Znacznik „div” oddziela część menu dokumentu. Wpisz <div id = "drop1">, aby utworzyć rozwijaną część menu. Następnie uruchom nieuporządkowaną listę za pomocą elementu HTML „ul”.
Dodaj najwyższą klasę do pierwszego elementu listy i klasę łącza dla pozostałych elementów. Kod HTML powinien wyglądać podobnie do:
<div id = "drop1">
<li class = "top"> Najlepszy przedmiot </li>
<li class = "link"> <a href="#"> Pozycja </a> </li>
<li class = "link"> <a href="#"> Pozycja </a> </li>
<li class = "link"> <a href="#"> Pozycja </a> </li>
</ul> </div>
Po otwarciu dokumentu w przeglądarce internetowej rozwijane menu CSS pojawi się jako pojedynczy element na stronie. Gdy najedziesz myszką na górny element, pojawi się reszta menu. Reszta tekstu na stronie się nie przesunie, ale część zostanie ukryta przez menu.