Pionowe rozwijane menu jest bardzo przydatne - oszczędza miejsce na stronie, a jednocześnie ułatwia poruszanie się po serwisie. Spróbuj stworzyć rozwijane menu oparte na CSS - Kaskadowe Arkusze Stylów. Jeśli nie jesteś jeszcze ekspertem w tworzeniu kodu CSS, skorzystaj z serwisu purecssmenu.com. Musisz wybrać typ menu, dostosować jego wygląd, a następnie dostosować je do własnej witryny. Usługa sama wygeneruje niezbędny kod, który następnie wstawisz do plików swojej witryny.
Instrukcje
Krok 1
Zarejestruj się na stronie purecssmenu.com, w przeciwnym razie nie będziesz mógł pobrać utworzonego menu. Kliknij przycisk Szablony po lewej stronie strony. Poniżej zobaczysz kilka małych okienek z rozwijanymi szablonami menu, których kliknięcie spowoduje załadowanie podglądu po prawej stronie w oknie podglądu. Wybierz szablon, który pasuje do Twojej witryny
Krok 2
Dostosuj czcionkę i kolor menu: użyj zakładki Parametry. W polu Czcionka wybierz czcionkę, rozmiar czcionki, w razie potrzeby podkreślenie i pogrubienie. W polu Kolory ustaw tło menu, kolor czcionki oraz kolory aktywowania czcionki i tła
Krok 3
Otwórz kartę Pozycje, aby zarządzać pozycjami menu. Jeśli klikniesz przycisk Wyczyść kosz, przykładowe elementy zostaną wyczyszczone i możesz utworzyć własne. Aby to zrobić, naciśnij przycisk Dodaj element plus - element zostanie dodany na końcu menu. Przycisk Dodaj następny element służy do dodawania elementu po aktualnie wybranym czasie. Przycisk Dodaj element podrzędny tworzy element podmenu do wyboru. W związku z tym, aby usunąć element, użyj przycisku Usuń element
Krok 4
Zwróć uwagę na pole Parametry pozycji na dole strony. W wierszu Tekst podaj nazwę elementu menu, w wierszu Link - adres URL strony, do której ten element będzie prowadzić. W wierszu Wskazówka możesz zostawić opis przedmiotu, który zostanie wyświetlony po najechaniu na link. Linia Target służy do określenia sposobu otwierania strony, do której prowadzi link. Parametr _self w tej linii otwiera stronę w tym samym oknie przeglądarki, co bieżąca
Krok 5
Po zakończeniu konfiguracji menu pobierz je - kliknij przycisk Pobierz w prawym dolnym rogu strony (ta funkcja jest dostępna po zarejestrowaniu się w serwisie). Wybierz folder na dysku twardym, w którym zostanie zapisany plik archiwum. Rozpakuj to. Konieczne będzie skopiowanie wymaganego kodu z pliku purecssmenu.html do pliku szablonu CSS witryny. Otwórz plik purecssmenu.html za pomocą edytora tekstu i skopiuj kod między tagami i do szablonu CSS witryny (ten plik ma rozszerzenie.css i wygląda podobnie do pliku.css). Teraz wklej kod do pliku szablonu witryny (motywów) - kod z purecssmenu.html między komentarzami i zamiast zwykłego kodu menu. Aby to zrobić, musisz przynajmniej trochę zaznajomić się z programowaniem. Pamiętaj, aby wkleić kod do właściwego pliku i zapisz.
