Menu służy do ułatwienia nawigacji użytkownika po sekcjach na stronie. Aby przyciągnąć uwagę odwiedzającego, menu powinno być funkcjonalne, łatwe w obsłudze, a jednocześnie połączone z projektem całego zasobu.
Instrukcje
Krok 1
Przed utworzeniem menu zdecyduj o jego typie. Możesz utworzyć rozwijane poziome lub pionowe pole, które będzie widoczne dla użytkownika, gdy użytkownik najedzie na nie kursorem myszy. Wybierając konkretne menu, możesz kierować się tym, jak wygodne będzie dla odwiedzających korzystanie z niego i jak będzie ono połączone z projektem.
Krok 2
Po wybraniu typu menu otwórz plik strony za pomocą dowolnego edytora tekstu używanego do edycji kodu HTML. Przejdź do żądanej sekcji kodu, w której chcesz wstawić element interfejsu.
Krok 3
Następnie stwórz listę opcji, tworząc blok i robiąc listę numerowaną z przypisanym do niego identyfikatorem. Na przykład:
- Link 1
- Link 2
- Link 3
W tym przykładzie utworzyłem wypunktowaną listę trzech elementów i umieściłem ją na warstwie div z identyfikatorem panelu ID.
Krok 4
Przejdź do bloku sekcji swojej strony i utwórz odpowiednie menu arkusza stylów kaskadowych. Jeśli chcesz utworzyć menu poziome, możesz dołączyć atrybut inline dla listy wynikowej:
#panel ul li {wyświetlacz: wbudowany; }
Krok 5
Aby utworzyć poziomą linię na całej długości strony, możesz użyć poniższego kodu:
#panel ul {margines lewy: 0; dopełnienie: 2px 0; }
Krok 6
Następnie możesz dokonać wizualnego podziału na prostokąty:
#panel ul li a {margines lewy: 3px; obramowanie: 1px; wypełnienie: 2px 3px; tło: niebieskie; }
Ten kod ustawia wcięcia tekstu od elementów obramowania poprzez atrybuty marginesu lewego i dopełnienia, a także ustawia kolor tła dla każdego elementu listy. W tym przykładzie kolorem jest niebieski, ale możesz go zmienić według własnego uznania.
Krok 7
Aby wskazać element na bieżącej stronie, który jest wybrany w zakładce, ustaw odpowiednie parametry dla otwartej klasy:
#menu ul li a # otwórz {tło: czerwone; obramowanie-dół: 1px; }
Bieżąca strona wybrana w panelu będzie teraz wyświetlana na czerwono.
Krok 8
Zapisz zmiany w pliku i sprawdź funkcjonalność napisanego kodu otwierając swoją stronę w przeglądarce. Aby ustawić dodatkowe opcje wyświetlania, zawsze możesz dodać CSS lub HTML, aby poprawić wygląd obiektu.
