Z pomocą dobrego kodu HTML i prostych reguł CSS możesz stworzyć ładne menu podręczne, które można łatwo modyfikować i uzupełniać. Używając języka znaczników i kaskadowych arkuszy stylów, możesz zapewnić prawidłowe działanie menu we wszystkich przeglądarkach.
Instrukcje
Krok 1
Najpierw zbuduj podstawową strukturę swojego menu. Otwórz edytor tekstu i utwórz numerowaną listę z podmenu, które działa jako element listy nadrzędnej. Na przykład:
-
Pierwszy element
- Pozycja rozwijana
- Rozwijane2
Krok 2
Zapisz wygenerowaną listę w osobnym pliku html. Następnie utwórz plik z rozszerzeniem.css i wprowadź wszystkie parametry arkusza stylów.
Krok 3
Usuń wszelkie dopełnienie i punktory, które mają zastosowanie na liście punktorów i ustaw szerokość menu za pomocą narzędzi CSS: ul {list-style: none;
szerokość: 200px; }
Krok 4
Ustaw względną pozycję wszystkich pozycji na liście za pomocą atrybutu position: ul li {position: relative; }
Krok 5
Następnie należy zaprojektować podmenu, którego każdy z elementów pojawi się po prawej stronie menu nadrzędnego w momencie, gdy wskaźnik myszy znajdzie się na elemencie: li ul {position: absolute;
po lewej: 199px;
góra: 0;
Nie wyświetla się; } Lewy atrybut jest o jeden piksel mniejszy niż szerokość samego menu. Pozwala to na inteligentne pozycjonowanie wyskakujących elementów bez tworzenia podwójnych obramowań. Atrybut display służy do ukrywania podmenu podczas otwierania strony.
Krok 6
Stylizuj linki zgodnie z potrzebami, używając odpowiednich opcji CSS. Uwzględnij parametr display: block, aby każde łącze zajmowało całą zarezerwowaną dla niego przestrzeń.
Krok 7
Aby menu pojawiło się w momencie najechania na nie kursorem (najechania), należy wpisać kod: li: hover ul {display: block; }
Krok 8
Ustaw dodatkowe opcje wyświetlania łączy i elementów listy zgodnie z potrzebami.
Krok 9
Menu podręczne jest gotowe. Teraz pozostaje dołączyć atrybut do pliku.html: Menu podręczne
