179 Shares 2053 views

Pionowe menu na stronie w formie akordeonu z jQuery

W menu, jak wiadomo – stanowi integralną część witryny. Ciekawy nawigacja zasobów internetowych jest w stanie odwiedzających procentowych. Ponadto ważną cechą każdego menu – jego zwartość. Proste menu pionowe łatwo tworzone za pomocą HTML i CSS. Ale idziemy dalej: Nauczmy się tworzyć Menu- „akordeon” za pomocą jQuery.


Tworzenie menu- „akordeon”

Co jest pionowym menu w formie akordeonu? Poniżej znajduje się lista rozwijana, co tworzy łatwy w obsłudze i daje stylowe miejsce. Menu, wykonywane w ten sposób, pozwala włączyć wiele podpunktach. Dostęp do nich odbywa się po kliknięciu myszką na wybranej pozycji. Ktoś może powiedzieć, że jest możliwe, aby proste menu w ten sposób bez użycia jQuery. Tak, jest. Ale ten obiekt nie będzie bardzo przydatne dla właścicieli smartfonów i tabletów. Stwórzmy pionowe menu, odwołując się do wszystkich. Następnie, zmianę koloru Stylizacja nawigację, to będzie możliwe, aby dostosować projekt do dowolnej strony.

kod HTML

Tak, aby stworzyć pionowe menu, należy najpierw wybrać kod HTML, który będzie zawierać następujące linie:

Zapisz ten kod w pliku o nazwie Accord_menu.html.

Jak widać, stworzyliśmy listę nieuporządkowaną. Składa się z 3 głównych punktach:

– zdjęcia;

– filmy;

– książki.

Każdy element ma kilka akapitów. Gdzie są #, trzeba będzie dodać linki. Teraz ważne jest, aby opisać styl. To wszystko zależy od wyglądu swojego zasobu internetowego. Pionowe menu dla strony musi integrować się harmonijnie w swojej konstrukcji.

CSS-code

Ze stylów nie powinno być trudne. Zauważamy, tylko że w tym przykładzie używa wypełnienia gradientowego. Oto kod CSS:

Kolor jest określony w CSS-file, markery wielkości są usuwane z pozycji na liście po lewej stronie. Jest zdeterminowany, jak zachowywać się w każdej pozycji i podmenu po najechaniu na niego. Na przykład:

# E1fee2 – to blady zielony kolor sub.

# C4f0f7 -golubovaty cień sub po umieszczeniu nad nimi.

Nieruchomość wyświetlacz zapytać wartość bloku dostosować niezbędne dopełnienie i rozmiar. Kolor, rozmiar, rodzaj czcionki, lokalizacja – wszystko jest takie, jak opisano w pliku CSS. Nazwać to, na przykład, accordionmenu_my1.css.

Podłączanie ulepszenia menu jQuery

Jak być może pamiętacie, naszym celem – aby utworzyć pionowe menu jQuery. Jeśli nie są zaznajomieni z tej technologii, nie martw się. Używamy repozytorium Google i połączyć skrypt jQuery. Pozwoli to na bardziej atrakcyjne menu. jQuery to biblioteka JavaScript na podstawie interakcji Hypertext Markup HTML i JavaScript. jQuery umożliwia dostęp do zawartości i atrybutów elementów.

Więc połączyć niezbędną skrypt w treści pliku HTML i ustawić zasady przechowywania 2 zmiennych, z wyjątkiem elementów wyścigów konnych. kod przyczynić się, zamykając inne karty na otwarcie, na którym znajduje się jedno kliknięcie myszy. Oto jak to wygląda:

Zapisz wszystkie zmiany, zobaczyć jak to wygląda w menu przeglądarki. Że jest częstym wynikiem: W rezultacie doszliśmy atrakcyjne menu, które zawsze można zmienić, w zależności od ich preferencji. I zdobywania nowej wiedzy w dziedzinie jQuery, CSS, można tworzyć unikalne elementy miejscu, poprawiając swoje umiejętności.