Pionowe rozwijane menu jest bardzo wygodne – to pozwala zaoszczędzić miejsce na stronie, w tym samym czasie pomaga łatwo poruszać się na miejscu. Spróbuj zrobić rozwijane menu w oparciu o CSS – kaskadowe arkusze stylów. Jeśli nie jesteś specjalistą w tworzeniu kodu CSS, to skorzystaj z serwisu purecssmenu.com. Od was jest wymagane, wybrać rodzaj menu, dostosować jego wygląd, a następnie dostosować do własnej witryny. Serwis sam wygeneruje odpowiedni kod, który następnie włożysz w pliki swojej strony internetowej.
Instrukcja
1
Zarejestruj się na stronie purecssmenu.com inaczej nie będzie w stanie pobrać stworzone menu. Kliknij przycisk Templates w lewej części strony. Poniżej można zobaczyć kilka małych okienek z szablonami rozwijanych menu, klikając na które załaduje podgląd po prawej stronie w oknie Preview. Wybierz szablon odpowiedni dla twojej strony.
2
Dostosuj czcionkę i kolor menu: użyj zakładki Parameters. W polu Czcionka kliknij czcionkę, rozmiar czcionki, jeśli to konieczne, – podkreślenie (underline) i pogrubiony (bold). W polu Colors dostosuj tło menu (background), kolor czcionki (font), a także kolor czcionki (font hover) i kolor tła (background hover) po najechaniu kursorem.
3
Kliknij kartę Items, aby zarządzać pozycjami menu. Jeśli klikniesz przycisk kosza Clear, przykłady punktów oczyścić i jesteś w stanie utworzyć swoje. Aby to zrobić, kliknij przycisk z plusem Add Item – element zostanie dodany na końcu menu. Przycisk Add Next Item służy do tego, aby dodać polecenie, następny po zaznaczonego w danym momencie. Przycisk Add Subitem tworzy zagnieżdżony element menu dla wybranego. Odpowiednio, aby usunąć jakiś element, użyj przycisku Remove Item.
4
Zwróć uwagę na pole Item Parameters (parametry pkt) na dole strony. W polu Text wpisz nazwę pozycji w menu, na pasku Link – adres url strony, na której będzie prowadzić dany punkt. W wierszu Tip możesz zostawić opis pozycji, która będzie wyświetlana po najechaniu na link. Wiersz Target służy do określania sposobu otwierania strony, do której prowadzi link. Parametr _self w tym wierszu otwiera stronę w tym samym oknie przeglądarki, co bieżąca.
5
Po zakończeniu konfigurowania menu, go pobrać – kliknij przycisk Pobierz na dole po prawej stronie (ta funkcja jest dostępna po rejestracji na stronie). Wybierz folder na dysku twardym, gdzie zostanie zapisany plik archiwum. Rozpakuj go. Odpowiedni kod z pliku purecssmenu.html trzeba będzie skopiować do pliku szablonu CSS witryny. Otwórz plik purecssmenu.html za pomocą edytora tekstu i skopiować kod, zawarta pomiędzy znacznikami i w CSS szablon witryny (plik ten ma rozszerzenie .css i wygląda mniej więcej jak file.css). Teraz wklej kod w pliku szablonu strony (tematy) – kod z purecssmenu.html między komentarzami i zamiast kodu zwykłego menu. Do tego trzeba choć trochę orientować się w programowaniu. Upewnij się, że włożyłeś kod w żądany plik, a następnie zapisz.
Należy zwrócić uwagę
Ponownie ustawić opcje z panelu administracyjnego swojej strony internetowej, nie można. Aby coś zmienić, trzeba na nowo przerobić menu w serwisie purecssmenu.com.
Kategoria:
Projektowanie stron internetowych
