Z pomocą kompetentnego kodu HTML i prostych reguł CSS możesz stworzyć wyskakujące menu, uzupełnić je i zmodyfikować. Korzystając z tabel kaskadowych i narzędzi języka znaczników, możesz upewnić się, że samo menu działa poprawnie we wszystkich przeglądarkach.
Instrukcje
Krok 1
Najpierw trzymaj się podstawowego paska menu. Utwórz specjalną numerowaną listę z podmenu w edytorze tekstu. Zwykle do tych celów używany jest „Notatnik”. Podmenu działa jako element listy nadrzędnej. Na przykład: Pierwszy elementFlood ElementFlood Element2Field Element3FieledElement4FieldElement5
Krok 2
Zapisz tę listę w osobnym pliku html. Następnie utwórz plik.css. Wprowadź wszystkie wymagane parametry arkusza stylów. Zrób to bardzo ostrożnie, ponieważ jeden błąd, a wyskakujące menu nie wyświetli się poprawnie lub w ogóle nie będzie działać.
Krok 3
Usuń wszelkie punktory i dopełnienie zastosowane na liście punktorów. Ustaw szerokość menu za pomocą narzędzi CSS: ul -style: none; width: 200px; }
Krok 4
Oznacz względną pozycję wszystkich pozycji na liście atrybutem o nazwie position: ul li: relative; }
Krok 5
Następnie ułóż podmenu, którego elementy pojawią się z menu nadrzędnego po prawej stronie po najechaniu kursorem myszy na pozycję: li ul: absolute; left: 199px; top: 0; display: brak; }
Krok 6
Lewy atrybut jest o jeden piksel mniejszy niż szerokość samego menu. Pozwala to na prawidłowe pozycjonowanie wyskakujących elementów bez tworzenia podwójnych obramowań. Atrybut display służy do ukrywania podmenu podczas otwierania strony.
Krok 7
Dostosuj linki zgodnie z potrzebami, używając odpowiednich opcji CSS. Uwzględnij parametr display: block, aby linki zajmowały całą zarezerwowaną dla nich przestrzeń. Aby menu pojawiało się po najechaniu na nie kursorem myszy, wprowadź następujący kod: li: hover ul: block; }
Krok 8
Ustaw dodatkowe opcje wyświetlania elementów listy i łączy zgodnie z potrzebami. Dołącz atrybut do pliku.html. Menu podręczne jest gotowe do użycia.
