Jak przygotować menu adaptacyjne? Przykłady

Adaptacyjne menu dla nowoczesnego serwisu - nie tylko luksus, ale konieczność. Obfitość nowoczesnych urządzeń wymaga od webmasterów takiego układu, który logicznie wyświetlałby się na ekranach z różnymi uprawnieniami. W niektórych przypadkach tworzenie adaptacyjnego menu jest znacznie trudniejsze niż sam projekt, dlatego należy wziąć pod uwagę ten problem.

Duże menu ekranowe

Aby zrozumieć ogólny schemat rozmieszczenia adaptacyjnego menu, musisz najpierw utworzyć strukturę menu w HTML i stylizować ją za pomocą CSS. Następnie na podstawie materiału można poprawić szablon adaptacyjny. Tak więc struktura HTML będzie wyglądać tak.




Menu dla dwóch akapitów w HTML





Będziesz musiał dodać CSS do wynikowego menu. Powinny określać rozmiar i kolor czcionki, tło, położenie bloków.

Proces adaptacji

Stworzenie prostej funkcjonalności dla zwykłego ekranu komputera jest łatwe i widać to w przykładzie. Adaptacyjne menu witryny jest tworzone tylko wtedy, gdy jest coś, z czym można pracować, to znaczy, kiedy punkty nawigacyjne zostały już dodane. Najlepszą opcją menu dla urządzeń mobilnych i tabletów będzie znaczek hamburgera - kwadratowe pudełko z trzema pionowymi liniami. Po naciśnięciu wszystkie pozycje menu zostaną otwarte. Aby utworzyć taką nawigację, tagi muszą zostać dodane do dokumentu HTML.

Znaczniki HTML - dokument





Następnie musisz dodać odpowiednie style do tych tagów, aby się okazałoAtrakcyjne wizualnie i czytelne menu. Oprócz wizualnej nawigacji i ikon menu, musisz odpowiednio ustawić położenie obrazu. Tak, wpisujesz warunek menu_icon zakres: nth-child

{top: 0 px};. Oznacza to, że obraz z góry będzie wynosił zero pikseli. Podobnie, konieczne jest ustawienie wartości dla innych stron.


Teraz menu adaptacyjne jest już prawie gotowe. Warto zwrócić uwagę na wyświetlacz stanu: brak. Domyślnie ikona menu nie jest widoczna na stronie, więc do dokumentu CSS musi zostać dodana dodatkowa klasa z następującym warunkiem: .menu__icon {display: inline-block;}. To sprawi, że nawigacja będzie widoczna.

Ponadto konieczne jest dodanie zadania do kaskadowego arkusza stylów, który w razie potrzeby ukryje akapity i akapity. Aby to zrobić, w CSS musisz ustawić stałą pozycję menu, narysować wyświetlacz i wyrównanie. Przedmioty są ukrywane za pomocą warunków przepełnienia: auto; nieprzezroczystość: 0; z-indeks: 1000. Możesz także dodać menu klasy _links-item, które określa styl elementów menu, ale jest na żądanie programisty.

Ostatni skok

W związku z tym adaptacyjne menu CSS jest prawie ukończone. Aby funkcja działała po kliknięciu ikony, musisz dodać funkcje. Lepiej używać jQuery dla uproszczenia, ale jeśli chcesz, możesz stworzyć czysty javascript. I tam, i tam będzie używany ten sam warunek:
  • (function ($) {$ (function () $ ("Menu__icon"). On ("kliknięcie", function () $ (this) .closest (". menu "). toggleClass ('menu_state_open');});});}) (jQuery).
  • Na tym kończy się adaptacyjny układ nawigacyjny. Ale to tylko jedna z kilku opcji tworzenia tego rodzaju funkcjonalności, dlatego warto rozważyć inne. Przynajmniej kilka z nich.

    Bez zmiany standardów

    Większość użytkowników Internetu oczekuje, że pasek nawigacji znajdzie się u góry strony. Stało się to już swoistym standardem, więc adaptacyjne menu poziome powinno mieć przyzwoity wygląd. Można to zrobić za pomocą CSS, jak w powyższych przykładach, i łącząc skrypt obsługi. Generalnie, tworzenie adaptacyjnego menu składa się z 3 kroków:
  • Pisanie znaczników HTML
  • Stylizowanie ich za pomocą kaskadowego arkusza stylów (CSS).
  • Dostosowanie już istniejącego menu.
  • Oczywiście wszystkie witryny mają własny pasek menu, ale jeśli zasób zostanie utworzony w CMS, znacznie łatwiej będzie stworzyć nowe menu adaptacyjne.

    Bootstrap

    Tworzenie funkcjonalności adaptacyjnej nie jest tak poważnym problemem, jeśli używasz narzędzi Bootstrap. Są już wstępnie zainstalowane szablony do tworzenia menu poziomego. Wystarczy połączyć się z zasobem bootstrap.js. Dzięki tej strukturze webmaster zyskuje możliwość tworzenia nawigacji o dowolnej złożoności. Adaptacyjne menu z Bootstrap jest tworzone przy użyciu specjalnego kodu.

    Przykład horyzontalnego menu adaptacyjnego dla 3 pozycji



    ​​

    Cechy metody

    Niech ten kod jest uciążliwy, ale zrozumiały. Należy zauważyć, że główną rolą jest tutaj znacznik nav, który jest odpowiedzialny za tworzenie nawigacji i jej wygląd. W tym miejscu określa się także pojemniki i pojemniki z pojemnikiem, które określają szerokość elementów. Za ich pomocą możesz wymusić rozwijanie menu na ekranach o różnych rozdzielczościach lubzostaw to naprawione.
    Ważną rolę w tworzeniu funkcji adaptacyjnej odgrywają klasy collapse i navbar-collapse odpowiedzialne za styl. Menu tworzone jest poprzez nagranie zaznaczonej listy przedmiotów umieszczonych poziomo. Jeśli zastosujesz ten kod ramek do stworzenia nawigacji, wtedy na szerokich ekranach będzie to wyglądało jak poziomy baner. Na początku pojawi się nazwa zasobu, a następnie elementy w ściśle określonej kolejności. Na wąskich ekranach wyświetlana będzie tylko nazwa strony i ikona hamburgera, po kliknięciu których pozycje menu będą wyświetlane jako lista pionowa.

    Menu rozwijane

    Zasób spowoduje, że Bootstrap będzie doskonałym pomocnikiem w tworzeniu rozwijanego menu adaptacyjnego. Aby to zrobić, po prostu zastąp linię znaczników
  • z poprzedniego przykładu poniższym kodem.

    Głębokość pozycji





    Można to zrobić dla jednego przedmiotu i kilku. W pobliżu pozycji z opadającymi podpunktami pojawi się strzałka skierowana w dół. Po kliknięciu pojawi się lista. Jeśli nawigacja jest podświetlona na małym ekranie, pozycja z rozwijaną listą będzie również oznaczona strzałką, ale z kierunkiem po prawej stronie. Po naciśnięciu pojawi się kolejna pionowa lista pod-pozycji.

    Menu wielopoziomowe

    Można jednak tworzyć listy rozwijane nie tylko za pomocą Bootstrap. Jeśli biblioteka nie jest połączona, możesz utworzyć adaptacyjne wielopoziomowe menu za pomocą HTML i CSS zdalsze łączenie funkcji NRC. Na początek musisz utworzyć listę niepubliczną w pliku HTML, który zawiera inne listy. Aby to zrobić, użyj standardowych tagów i
  • . Nie musisz też zapominać o tworzeniu klas, które będą obsługiwane w kaskadowym arkuszu stylów CSS. Aby być bardziej zrozumiałym, warto podać mały przykład tworzenia list i tworzenia klas.

    Lista HTML paska nawigacyjnego





    Animacja rozwijanego menu adaptacyjnego jest ustawiana za pomocą kaskadowego arkusza stylów. Tutaj musisz określić opcje menu, gdy zmniejszysz ekran o 5075 i 25%. Takie podejście do tworzenia funkcjonalności adaptacyjnej zapewnia właściwy układ, w którym menu nie "ciągnie". I na koniec konieczne jest wstawienie do dokumentu funkcji wskazanej poniżej.

    Funkcja





    Jeśli witryna nie uwzględnia użycia innych funkcji poza tym, konieczne jest jej utworzenie osobnego dokumentu skryptu. Jeśli wkleisz go do zwykłego HTML, po prostu pojawi się w oknie przeglądarki jako część tekstu i nie będzie działać.

    JQuery

    Jest to również świetne rozwiązanie do tworzenia paska nawigacyjnego na wtyczce jQuery. Adaptacyjne menu takiej usługi zajmuje tylko kilka minut. Wtyczkę można pobrać online, ma prosty i intuicyjny interfejs, który jest łatwy i łatwy w użyciu. Dlatego nie powinno być problemów z połączeniem arkusza stylów. Po podłączeniu pliku stylu należy napisać skryptstworzyć nawigację adaptacyjną.
    Następnie potrzebna jest maszyna nawigacyjna, jeśli jeszcze jej nie ma. Tutaj wszystko opiera się na zasadzie: "Wszystko jest genialne po prostu". W dokumencie HTML musisz utworzyć listę oznaczoną tagiem nee. Możesz użyć powyższego przykładu lub jego uproszczonej wersji, która wygląda jak ta poniżej.

    Elementy menu HTML





    W tym momencie przeglądarki zostanie wyświetlone tylko logo, a samo menu zostanie ukryte. Aby się pojawił, musisz dodać funkcję, która powoduje zmianę wtyczki - okayNav.

    funkcji



    $ (funkcja () {var nawigacji = $ ('# Nav główny') OkayNav ().});

    Teraz możesz spojrzeć na wyniki pracy. Przy normalnej szerokości okna przeglądarki to menu wygląda zupełnie normalnie, ale jeśli zmniejszysz ekran, ostatnie elementy znikną. Zamiast nich znajdują się trzy duże punkty, położone pionowo. Po naciśnięciu są one odwracane, zajmują pozycję poziomą, a ukryte pozycje menu są widoczne na pionowej liście w prawym górnym rogu ekranu.
    Takie rozwiązanie wygląda bardzo nowocześnie, a animowany efekt obnaża zasoby w przyjaznym świetle dla odwiedzających.

    Joomla

    I ostatnia opcja do tworzenia adaptacyjnego menu za pomocą systemu Jumla. Jest to bezpłatna usługa tworzenia stron internetowych, która jest systemem zarządzania treścią CMS. I jak już wspomniano na samym początku, jeśli strona została stworzona za pomocą CMS i trzeba zmienić istniejące menu na adaptacyjne, wtedy jest lepiejpo prostu zacznij funkcjonować od pierwszego tagu. W taki sam sposób, jak w poprzednich przykładach, musisz utworzyć listę menu znaczników w HTML. Tylko dla każdego przedmiotu musisz napisać własną klasę. Ogólnie wszystko wygląda jak poniżej.

    Menu dla jooble





    Następnie należy dodać style. Najlepiej jest umieścić wszystkie wcięcia na 0 px i zastosować rozmiar pudełka: border-box. Umożliwi to zapisanie danej szerokości elementów niezależnie od tego, ile potrwa wcięcie. Następnie dla pozycji nadrzędnej w menu (div) warto ustawić szerokość 90% i po rozpoczęciu stylizowania każdego elementu osobno.
    Możesz usuwać ramki, zmieniać kolory i wypełniać, tworzyć projekty, które będą się pojawiać po najechaniu kursorem na kursor. Jednym słowem, rób wszystko, co pasuje do projektu zasobu. Ostatnim etapem tworzenia adaptacyjnego menu Joomla jest jego przekształcenie. Często Joomla tworzy menu, które podczas zmiany rozmiaru ekranu automatycznie się odbudowuje, podzielone na kilka linii. Wszystko to dzieje się w CSS, jedyną cechą, którą należy połączyć jest stan crossbrowser. Pozwala menu wyglądać tak samo w różnych przeglądarkach.

    Funkcja między przeglądarkami





    Tworzenie adaptacyjnego menu jest naprawdę trudne, wymagające wiedzy i doświadczenia. Wszystkie podane przykłady są tylko niewielką częścią możliwych wariantów, ale nawet mogą być przydatne, jeśli dana osoba ma podstawową wiedzę o HTML i CSS.
  • Powiązane publikacje