CSS - poziome menu dla początkujących projektantów stron internetowych
HTML i CSS to języki programowania niezbędne dla układu strony. Początkujący programista, który decyduje się opanować podstawy tego zawodu, powinien zacząć od ich studiowania, ponieważ możliwe jest stworzenie prostej strony internetowej opartej na nich. 
W HTML i CSS, poziome menu strony jest łatwe do zbudowania, powinieneś zacząć od napisania frameworka.
Budowanie ramki
Najpierw musisz zrobić znaczniki html. Menu najłatwiej zrobić listę wypunktowaną za pomocą tagu
- . Tag jest sparowany, więc wymaga zamknięcia na końcu listy.
Przykład:
To jest podstawa, która następnie jest tworzona w CSS w menu poziomym, stałym lub rozwijanym.
Menu poziome
Po oznaczeniu kodu nadszedł czas, aby przejść do pracy ze stylem. Należy zauważyć, że sparowane tagi używane w domyślnej strukturze są blokami, co oznacza, że aby utworzyć zarówno zwykłe, jak i rozwijane menu poziome w CSS, należy zmienić typ elementu na małe litery. Można to zrobić za pomocą właściwości wyświetlania. Jest on dodawany do elementu:
.menu li {
display: inline;
}
Więc zamienia się w poziomą. Jeśli istnieje wiele pod-pozycji, mogą przejść do nowej linii bez dodatkowych określonych właściwości. W takim przypadku użyj właściwości, aby wyświetlić spacje i przenieść tekst. Nowrap zapisuje tekst w całości, bez dzielenia wyrazów, a pre-wrap zapisuje spacje z HTML i dodaje automatyczne.
.menu li {
display: inline;
white-space: nowrap;
}
Aby nie zdobyć linii w tekście ciągłym, możesz uporządkować informacje w grupach i stworzyć dodatkowe podmenu, które dokładnie wyświetli wszystko, czego potrzebujesz. Podmenu można rozwinąć lub otworzyć.
Rozwijane menu
Po opanowaniu podstaw budowania poziomego menu na CSS, podmenu, które wypada z niego, może być ustawione na liście pionowej. Lista w znacznikach musi być wielopoziomowa, dodać dodatkowe znaczniki dla list punktowanych wewnątrz żądanej pozycji. Tag musi zawierać następujące elementy listy:
W menu css. Li zostaje zamienione na ".menu> li", dzięki czemu elementy wewnętrzne stają się pionowe. Względne pozycjonowanie jest dodawane do selektora nadrzędnego, w którym element jest przesuwany z granic bloku macierzystego, i do elementu potomnego - absolutny (całkowicie usunięty ze strumienia i skoordynowany z najbliższego elementu, a jeśli nie, z granic przeglądarki). Elementy ze względnym pozycjonowaniem mogą zawierać w sobie elementy potomne z absolutnym pozycjonowaniem. Oznacza to, że gdy blok porusza się z pozycją: względną, części stałe pozostaną na swoim miejscu.
Standardowo rozwijana część zawsze pozostaje otwarta, chyba że dodasz wyświetlacz do elementu tylko po najechaniu kursorem. Aby to zrobić, dodatkowa lista jest domyślnie ukryta:
.menu> li {
display: inline;
pozycja: względna;
}
.menu .second {
pozycja: absolutna; (powiązanie podmenu z jednostką rodzicielską)
wyświetlacz: brak; (ukryj wyświetlacz)
}
.menu> li: hover .second {(pseudo-klasa hover służy do tworzenia list z hover)
display: block;
}
Rezultatem będzie małe, zgrabne menu.
Naprawiono menu
Aby przechwycić utworzony w otwartej postaci, właściwość wyświetlania z blokiem wartości jest używana analogicznie do rozwijanego menu, ale bez ukrywania ekranu. Jeśli chcesz, możesz naprawić nie tylko listę otwartą, ale także pasek menu podczas przewijania strony. Gdy użytkownik przewinie tekst w dół, menu zawsze może pozostać na wierzchu, ułatwiając nawigację po witrynie. Ten element ma kilka funkcji. Jest bardzo podobny do absolutu, ale wiąże się tylko z przeglądarką, wypada ze strumienia. Wygodne jest koordynowanie takiego elementu przy użyciu zwykłych właściwości góra / dół, lewo / prawo. Przykład menu poziomego z elementami rozwijanymi ustalonymi w przeglądarce:
.menu> li {
display: inline;
position: fixed;
}
.menu .second {
pozycja: absolutna;
wyświetlacz: brak;
}
.menu> li: hover .second {
display: block;
}
Właściwość position zostaje dodana z wartością stałą, po której menu pozostaje na miejscu podczas przewijania. Nawet początkujący może obsłużyć to menu. Lista znaczników HTML - prosta i wygodna. Aby poprawnie wyświetlać style CSS w przeglądarce, zaleca się pamiętać o stylach punktów w widoku bloków, dodając ramki i elementy koordynujące, wewnętrzne i zewnętrzne wcięcia, aby opisane punkty nie były nakładane na siebie nawzajem. Często zapomnij o dodaniu szerokości i wysokości elementu. Aby wyświetlić pożądany element poza widoczną częścią do późniejszego projektowania, można użyć właściwości float, "przybijanie" jej do prawej lub lewej strony (float: right;).