Cascading Style Sheets (CSS) to nazwa używana do opisania sposobu formatowania dokumentu Hyper Text Markup Language (HTML) lub Extensible Markup Language (XML). Może być używany do dowolnego typu dokumentu XML, ale najczęściej jest używany ze stronami internetowymi napisanymi w HTML. CSS może być używany do tworzenia rozwijanych menu na stronach internetowych. Rozwijane menu CSS wyświetlają pojedynczy element tekstowy, dopóki odwiedzający nie najedzie myszą na menu, kiedy to zostanie wyświetlona cała lista elementów. Menu tworzone jest za pomocą identyfikacji CSS i znaczników klasy.
Rozwijane menu CSS zaczynają się od selektora identyfikatora. Ten selektor wygląda jak #. Po nim następuje nazwa identyfikatora. Możesz nazwać identyfikator cokolwiek, ale powinien on być opisowy, aby inni mogli odczytać Twój kod. Na przykład menu rozwijane może zawierać kod #drop1.
Utwórz klasę dla pierwszego elementu w rozwijanym menu, używając selektora klasy, 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 znajduje się pomiędzy dwoma nawiasami klamrowymi.
Poniższy przykład pokazuje cały kod CSS dla pierwszego elementu na liście:
#drop1 li.top {rodzina czcionek: Verdana, Genewa, 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 będzie opisywać nieuporządkowaną listę HTML, która jest oznaczona znakami „ul”. Opis będzie wyglądał zasadniczo tak samo, jak pozycja menu najwyższego poziomu, z dodaniem 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 najedzie na rozwijane menu CSS.
Poniżej znajduje się przykład tej części kodu CSS:
#drop1 ul.link {
wyświetlacz: brak#59
rodzina czcionek: Verdana, Genewa, bezszeryfowa;
rozmiar czcionki: 100%;
kolor: #FF00FF;}
Będziesz chciał, aby rozwijane menu CSS pojawiło się w pozostałej części dokumentu HMTL. W przeciwnym razie, gdy gość najedzie na menu, przesunie resztę dokumentu w dół strony, aby zrobić miejsce na listę. Zrobi to ustawienie elementu pozycji na wartość bezwzględną.
Kod do ustawienia pozycji to:
#drop1{pozycja:bezwzględna;}
To wszystko, co jest potrzebne do części CSS w menu rozwijanym. Reszta rozwijanego menu CSS jest tworzona w dokumencie HTML za pomocą elementów „div”, „id”, „class”, „li” i „ul”. Znacznik „div” oddziela część dokumentu dotyczącą menu. Rodzaj
Po otwarciu dokumentu w przeglądarce internetowej rozwijane menu CSS pojawi się jako pojedynczy element na stronie. Gdy najedziesz myszą na najwyższy element, pojawi się reszta menu. Reszta tekstu na stronie nie przesunie się, ale część zostanie ukryta w menu.