Tworzenie pasków Menu za pomocą Spry
gdy wskaźnik myszy najedzie na pasek menu, pojawi się podmenu. Pasek Menu umożliwia dostęp do wielu opcji menu z czystego, czytelnego mainmenu. Interaktywność, którą zapewniają, gdy odwiedzający umieści wskaźnik myszy nad opcją menu, dodaje dynamiczny element do strony internetowej.
widżety paska Menu mogą być poziome lub pionowe:
- pionowe paski menu są zazwyczaj wyrównywane w ramce, kolumnie tabeli lub innych obiektach układu (takich jak DIV lub AP DIV) po lewej stronie strony.
- Poziome paski menu są zazwyczaj wyrównane u góry strony i można je tam umieścić bez wstawiania do obiektu układu.
widżet Spry do wstawiania widżetów paska menu umożliwia generowanie pasków menu z dwoma poziomami podmenu. Dlatego użytkownik może kliknąć opcję menu, zobaczyć podmenu z nowym zestawem opcji, wybrać jedną z tych opcji i wybrać z drugiego podmenu.
aby wygenerować widżet paska menu, wykonaj następujące kroki:
- Zapisz stronę, do której zostanie wstawiony widżet.
- Wybierz Wstaw > Spry > Pasek Menu Spry. Gdy pojawi się okno dialogowe paska menu Spry, wybierz format poziomy lub pionowy.
- po wygenerowaniu widżetu paska menu możesz zdefiniować kilka podstawowych właściwości paska menu w Inspektorze właściwości. Wybierz pozycje menu lub podmenu po stronie Inspektora właściwości; następnie zmodyfikuj je według własnego uznania (patrz Rys. 4):
- w polu tekstowym wpisz tekst, który pojawi się w menu.
- w polu Link wprowadź link, który otworzy się po kliknięciu elementu.
- w polu Tytuł wprowadź tekst ułatwień dostępu, który pojawi się w oknie przeglądarki, gdy użytkownik umieści wskaźnik myszy nad opcją menu.
- pozostaw pole docelowe puste, aby otworzyć link w tym samym oknie przeglądarki, lub _blank, aby otworzyć link w nowym oknie przeglądarki.
- Użyj przycisków plus ( + ) i minus ( – ) nad kolumnami menu lub podmenu (orsub-podmenu), aby dodać lub usunąć nowe pozycje menu. Użyj przycisków przesuń element w górę i przesuń element w dół, aby zmienić kolejność elementów menu.
Rysunek 4 Definiowanie poziomów opcji paska menu w Inspektorze właściwości.
podczas tworzenia lub wybierania widżetu paska menu w Inspektorze właściwości pojawia się przycisk Wyłącz Style. Wyłączenie stylów nie wpływa na sposób renderowania stylu w przeglądarce, ale raczej wyłącza formatowanie w oknie dokumentu. Możesz dostosować formatowanie różnych Właściwości paska menu wybranego paska menu za pomocą panelu style CSS.
każdy pasek menu generuje co najmniej kilkanaście stylów CSS. Większość z tych stylów Cssstyle definiuje położenie i rozmiar menu i podmenu, które pojawiają się, gdy auser umieści wskaźnik myszy nad opcją menu. Domyślne pozycjonowanie tych menu jest zwykle w porządku i nie trzeba go dostosowywać. Możesz utworzyć niestandardowy pasek menu, definiując własne łącza i tekst, a także nadać mu ciekawy format, dostosowując kolory tekstu i tła.
niektóre opcje stylów CSS kontrolują stosunkowo niepozorne elementy paska menu, ale wszystkie z nich można edytować w panelu style CSS. Aby edytować style powiązane z widżetem paska menu, rozwiń SpryMenuBarHorizontal, aby wyświetlić listę stylów klas powiązanych z tym arkuszem stylów. Wybranie jednego z tych stylów klas w górnej części panelu style CSS umożliwia edytowanie właściwości dla tego stylu w dolnej części panelu style CSS.
aby zmienić kolor tła lub tekstu na pasku menu, wybierz stylul.MenuBarHorizontal a (dla pionowego paska menu, ul.MenuBarVertical a). Po wybraniu stylu w panelu style CSS użyj pola próbka koloru tła w dolnej połowie panelu style CSS, aby wybrać nowy kolor tła, a następnie użyj próbki koloru, aby zmienić kolor czcionki (patrz rysunek 5).
Rysunek 5 zmiana koloru paska menu.
inną opcją jest zmiana tła i koloru tekstu opcji menu podświetlonego, używając tych elementów:
- ul.MenuBarHorizontal a. MenuBarItemHover
- ul.MenuBarHorizontal a. MenuBarItemSubmenuHover
- ul.MenuBarHorizontal a. MenuBarSubmenuVisible
styl pionowych pasków menu jest podobny, ale z pionowym zamiast horizontal w nazwie stylu.
jak widać, Spry paski menu oferują wiele, wiele elementów, które można dostosować. Aby uzyskać najlepsze wyniki, eksperymentuj. Zasadniczo edytujesz zawartość pasków menu w Inspektorze właściwości lub wybierając jeden z wielu wygenerowanych stylów CSS i edytując go w Panelu stylów CSS.
dobra, jesteś teraz zdany na siebie! Baw się dobrze z tymi i innymi Sprywidgetami. I pamiętaj, aby skontaktować się z nami i dać mi znać, jak działają na twoich stronach.