Podejścia do wdrażania menu adaptacyjnego. Świetny przegląd pięknych wielopoziomowych menu z codepen
Kiedy zaczynamy pracować z projekt adaptacyjny, mamy do czynienia różne techniki jak najlepiej poradzić sobie ze zmianą naszych Menu nawigacji dla ekranów o niskiej rozdzielczości. Możliwości wydają się nieograniczone. Dlatego pokażę Ci cztery główne podejścia z ich zaletami i wadami. Trzy z nich zostały wykonane przy użyciu samego CSS, a jeden z niewielką ilością JavaScript.
Wstęp
W kodzie przedstawionym w tym artykule nie używam przedrostków przeglądarki, aby kod stylu był łatwy do odczytania i zrozumienia. Bardziej złożone przykłady wykorzystują SCSS. Każdy z przykładów jest hostowany na CodePen, gdzie możesz zobaczyć skompilowany CSS.Wszystkie podejścia opisane w tym artykule wykorzystują prosty kod HTML, który nazywam „ podstawowe menu" Atrybut roli służy do wskazania konkretnego typu: menu poziome (pełnopoziome), lista rozwijana (wybierz), menu rozwijane (niestandardowe) i płótno.
Do stylizacji używam tego samego zapytania o media dla wszystkich opcji:
@media screen i (maksymalna szerokość: 44em) ( )
1. Menu poziome
Najprostsze podejście, ponieważ wystarczy, że lista elementów będzie miała szerokość całej strony:
@media screen i (maksymalna szerokość: 44em) ( nav ( ul > li ( szerokość: 100%; ) ) )
Zalety
- Nie wymaga JavaScriptu
- Bez dodatkowych znaczników
- Prosty kod stylu
Wady
- Zajmuje zbyt dużo miejsca na ekranie
Aby osiągnąć taki efekt, musimy do podstawowego znacznika dodać listę rozwijaną. Aby to zadziałało, będziemy musieli dodać kod JavaScript, który zmieni wartość window.location .href, gdy wystąpi zdarzenie onchange
Ukrywanie listy włączone duże ekrany:
nawigacja ( > wybierz (wyświetl:brak; ) )
Na małych ekranach ukrywamy menu główne i wyświetlamy listę rozwijaną. Aby pomóc użytkownikowi zrozumieć, że jest to menu - dodamy pseudoelement z tekstem „Menu”
@media screen i (maksymalna szerokość: 44em) ( nav ( ul (wyświetl: brak; ) wybierz (wyświetl: blok; szerokość: 100%; ) &:after ( pozycja: bezwzględna; zawartość: „Menu”; prawo: 0 ; dół: -1em; ) ) )
Dzięki dodatkowej konstrukcji tak to wygląda na ekranach o niskiej rozdzielczości: 
Zalety
- Nie zajmuje dużo miejsca
- Używa „natywnych” elementów sterujących
Wady
- Wymaga JavaScript do działania
- Występują zduplikowane treści
- Lista rozwijana nie jest stylizowana we wszystkich przeglądarkach
3. Niestandardowe menu rozwijane
W tym podejściu małe ekrany menu podstawowe jest ukryte, a zamiast tego wyświetlane są dane wejściowe i etykieta (przy użyciu hackowania pola wyboru). Gdy użytkownik kliknie etykietę, pod nią wyświetli się menu podstawowe.Problemy z korzystaniem z hackowania pola wyboru
Dwa główne problemy związane z tym rozwiązaniem:- Nie działa na mobilnych wersjach przeglądarki Safari (iOS< 6.0) . Nie można kliknąć etykiety w przeglądarce iOS< 6.0, чтобы сработал input из-за бага. Решается добавлением пустого события onclick на label
- Nie działa w głównej przeglądarce systemu operacyjnego Wersje Androida mniejszy lub równy 4.1.2. Dawno temu w silniku WebKit pojawił się błąd, który nie pozwalał na użycie pseudoklas z kombinacją selektorów + i ~
H1 ~ p ( kolor: czarny; ) h1: najechanie ~ p ( kolor: czerwony; )
Nie przyniosło to efektu, ponieważ hackowanie pola wyboru użyło pseudoklasy :checked z selektorem ~. Dopóki błąd nie został naprawiony w WebKit 535.1 (Chrome 13) i WebKit 534.30, aktualnym dla Androida 4.1.2, hack nie działał na żadnym urządzeniu z systemem operacyjnym Android.
4. Płótno
W tym podejściu na małych ekranach menu podstawowe jest ukryte, a dane wejściowe i etykieta są wyświetlane jak w opcji 3. Kiedy użytkownik kliknie etykietę, menu podstawowe przesuwa się w lewo, a zawartość przesuwa się w prawo. Ekran jest podzielony na 80% menu i 20% treści (w zależności od rozdzielczości i jednostek używanych w CSS)
Na dużych ekranach ukrywamy etykietę.
etykieta ( pozycja: bezwzględna; lewa: 0; wyświetlacz: brak; )
Na małych ekranach umieścimy menu poza zawartością okna i pokażemy etykietę oraz dane wejściowe. Aby ukryć menu ustawiamy jego szerokość i ujemną wartość pozycji. Aby ułatwić użytkownikowi zrozumienie tego menu, dodamy także pseudoelement z tekstem „≡” w etykiecie (jako kod „\2261” do wykorzystania jako zawartość pseudoelementu).
@media screen i (maksymalna szerokość: 44em) ( $menu_width: 20em; body ( overflow-x: ukryty; ) nav ( pozycja: bezwzględna; lewa: -$menu_width; szerokość: $menu_width; ul > li ( szerokość: 100 %; ) ) etykieta ( display: block; ) etykieta:po ( pozycja: bezwzględna; treść: "\2261"; ) wejście: zaznaczone ~ nav ( po lewej: 0; ) wejście: zaznaczone ~ .content ( margines po lewej: $ menu_width + .5em; prawy margines: -($menu_width + .5em); ) )
Dzięki dodatkowej konstrukcji tak to wygląda na ekranach o niskiej rozdzielczości:
Zalety
Wady
- Kod niesemantyczny (wejście/etykieta)
- Wymagany dodatkowy kod HTML
- Absolutne ułożenie elementu korpusu daje poczucie stałego położenia
Czy to działa pod IE?
Wszystkie stosowane techniki mają jeden cel: tworzyć responsywne menu Dla nowoczesne przeglądarki! Dzieje się tak dlatego, że na żadnym urządzeniu mobilnym nie ma przeglądarki IE8 lub niższej i dlatego nie musimy się w ogóle martwić tym problemem.Wszyscy twórcy stron internetowych od dawna wiedzą, jakie strony internetowe należy stworzyć adaptacyjny, ale nie każdy wie, jak to zrobić poprawnie. Na tej lekcji dowiesz się, jak to zrobić menu adaptacyjne dla witryny.
Dla jasności zrobimy jedną sekcję z dużą obraz tła, składający się z nagłówka z logo i poziomego menu.
znaczniki HTML
Zadanie jest jasne, wewnątrz tagu Sekcja zostanie zlokalizowany nagłówek witryny nagłówek, wewnątrz którego blok div z logo i Pasek nawigacyjny nawigacja. Będzie używany jako kontener dla menu list punktowanych ul z elementami menu-linkami A.
Jak zwykle HTML struktura wygląda bardzo prosto - czysty kod i nic zbędnego, miło na to popatrzeć. Jeśli jednak spojrzysz na wynik w przeglądarce, będziesz chciał szybko otworzyć plik stylów i zacząć upiększać wszystko.
Oto, co teraz zrobimy.
Stylizacja sekcji - sekcja
W naszym przypadku sekcja zajmuje pierwszy ekran komputera i tag Sekcja wypełnione dużym zdjęciem tła, na którym będą umiejscowione wszystkie pozostałe elementy.
Sekcja (
tło: url(bg.jpg);
}
Musimy zadbać o to, aby tło, nie zaburzając proporcji zdjęcia, wypełniało wszystko wolna przestrzeń na dowolnym urządzeniu.
Rozmiar tła: okładka;
wysokość: 100vh;
Podczas oglądania na duże monitory, jeśli rozmiar zdjęcia będzie niewystarczający, zacznie się ono mnożyć. Wyłączmy powtarzanie w tle.
Powtarzanie w tle: brak powtórzeń;
NA telefony komórkowe, bez wyrównywania tła do środka, może zostać ono obcięte.
Pozycja tła: środek, środek;
Sekcja jest gotowa, w niej napiszemy style dla nagłówka.
Stylizacja nagłówka witryny
Przejdźmy trochę do przodu i zobaczmy, z jakich bloków będzie się składał nagłówek - to jest blok div z logo i blokiem nawigacyjnym nawigacja.
Jak ustawić dwa klocki w rzędzie, skoro w swojej naturalnej postaci klocki stoją jeden pod drugim? Flexbox metoda doskonale radzi sobie z tym zadaniem - układa ją w rzędzie i wyrównuje względem pojemnika nagłówek tak jak tego potrzebujemy.
Nagłówek (
wyświetlacz: elastyczny;
justify-content: odstęp pomiędzy;
wyrównanie elementów: środek;
}
Nieruchomość pudełko-cień rysuje dolny cień pod nagłówkiem, dzięki czemu wizualnie oddzielamy nagłówek witryny od treści. Wysokość czapki wysokość lepiej jest podawać nie w pikselach, ale w jednostki względne, na przykład procentowo, wówczas proporcje elementów witryny zostaną zachowane na wszystkich ekranach.
Wysokość: 18%;
box-shadow: 0 5px 15px rgba(0,0,0,.2);
Wynik pracy Flexbox i cień, który się pojawia, widzimy poniżej.
Praca z logo
Teraz logo jest dociśnięte do lewej krawędzi okna przeglądarki, przesuńmy je trochę w prawo.
obraz logo (
margines po lewej: 2,3 em;
}
Poniższy kod sprawia, że logo jest responsywne.
Maksymalna szerokość: 100%;
Stylizacja menu - ul
Usuń znaczniki z pozycji menu.
Ul(
typ-stylu listy: brak;
}
Transformujemy menu pionowe do poziomu, wyrównując wszystko do środka, używając Flexbox metoda. Nieruchomość przemiana zapewnia płynną pracę unosić się efekt, o tym później.
Ul(
wyświetlacz: elastyczny;
elastyczny przepływ: nowrap;
kierunek flex: rząd;
justify-content: środek;
wyrównanie elementów: środek;
przejście: 0,5 s;
}
Elementy menu li Stoją bardzo blisko siebie i musimy popracować nad czcionką i linkami.
Ustawmy marginesy wokół pozycji menu.
Ulli (
dopełnienie: 10px 20px;
}
Zróbmy tekst wielkimi literami i usuń podkreślenie linków.
Transformacja tekstu: wielkie litery;
dekoracja tekstu: brak;
Dla kontrastu wybieramy ciemniejszą czcionkę i pogrubiamy ją (denerwuje mnie, gdy kolor tekstu zlewa się z kolor tła strona).
Kolor: #262625;
grubość czcionki: pogrubiona;
Stwórz prosty efekt najechania i nie zapomnij o płynnym przejściu.
Ulli a: najedź (
tło: #000;
kolor: #fff;
przejście: 0,5 s
}
Na następnej lekcji zrobimy nasze menu adaptacyjne zadając zapytania mediom. Zobacz cały kod na stronie jsfiddle.
Cześć. Już dawno nie pisałem postów na temat pracy z HTML/CSS. Niedawno zacząłem składać nowy układ i przy okazji natknąłem się na ciekawy trik, który pozwala na uelastycznienie menu (możesz dodawać do niego nowe pozycje, a jego rozmiar nie będzie się zwiększał, ale zawsze będzie w 100% blok nadrzędny). Więc dzisiaj będziemy wdrażać dalej guma CSS menu.
Jeśli jesteś zbyt leniwy, aby przeczytać artykuł, możesz obejrzeć ten film. Autor również wszystko bardzo dobrze wyjaśnia:
Gumowe menu z CSS - krok 1
Pierwszy krok jest zawsze znaczniki HTML gdzie byśmy byli bez niej? Ale w naszym przypadku wszystko będzie proste:
- opakowanie blokowe dla menu
- samo menu, wyświetlane przez lista punktowana(znacznik ul)
- Cóż, pozycje menu znajdują się w środku i odpowiednio mają już linki
Wszystko jest jasne, oto mój kod znaczników:
Wszystko wygląda standardowo, tak:
Teraz wszystko wprowadzimy właściwy typ, CSS zaczyna działać.
Krok 2 – Podstawowe style
Krok 3 - zaimplementuj gumę
Zajmijmy się teraz samym menu. Usunę z niego znaczniki (tag ul), uczynię go tłem i, co najważniejsze, użyję właściwości display: table-row, aby kontener menu zachowywał się jak wiersz tabeli. Jest to ważne w przypadku dalszych manipulacji.
Menu R( tło: gradient liniowy (do prawej, #b0d4e3 0%, #88bacf 100%); wyświetlanie: wiersz tabeli; styl listy: brak; )
Jak widać, powyższy kod właśnie rozwiązał wszystko, o czym pisałem. Nawiasem mówiąc, wygodnie jest generować gradienty za pomocą narzędzia Ultimate Gradient CSS generator.
R-menu li(wyrównanie w pionie: dół; wyświetlacz: komórka tabeli; szerokość: auto; wyrównanie tekstu: środek; wysokość: 50 pikseli; obramowanie w prawo: 1px solid #222; )
- pionowo-align: dół - ta właściwość jest konieczna, aby tekst w pozycji menu zajmujący 2 linie był wyświetlany równomiernie. Kiedy tworzymy menu, możesz usunąć tę właściwość, powiększyć tak, aby elementy zostały skompresowane, a tekst został przeniesiony do dwóch linii, co spowoduje problem z wyświetlaniem. Zwróć nieruchomość i wszystko będzie dobrze.
- display: table-cell - ponieważ samo menu wyświetlania ustawiamy jako wiersz tabeli, logiczne byłoby ustawienie jego elementów tak, aby były wyświetlane jako komórki tabeli. Czy to jest to konieczne.
- szerokość: auto — szerokość zostanie obliczona automatycznie w zależności od długości tekstu w akapicie
- text-align: center - służy do wyśrodkowania tekstu wewnątrz
- wysokość: 50px — ustaw wysokość na 50 pikseli
- cóż, border-right to po prostu obramowanie po prawej stronie, separator elementów
Na razie menu wygląda nieestetycznie, ale to nic, czas sobie o tym przypomnieć. 
Ostatnią rzeczą do zrobienia jest nadanie stylu linkom wewnątrz elementów. Tutaj mam ten kod:
R-menu li a(dekoracja tekstu: brak; szerokość: 1000 pikseli; wysokość: 50 pikseli; wyrównanie do pionu: środek; wyświetlacz: komórka tabeli; kolor: #fff; czcionka: normalna 14 pikseli Verdana; )
A tak wygląda teraz menu:
Jeszcze raz wyjaśnię kilka linijek:
- właściwość tekst-dekoracja zastępuje domyślne podkreślenie łączy
- szerokość: 1000px - być może najbardziej ważna linia. Musisz ustawić linki na mniej więcej tę szerokość, może mniejszą, ale zdecydowanie większą niż najszerszy możliwy element menu. Linki nie będą miały szerokości 1000 pikseli, ponieważ szerokość będzie ograniczona przez pozycję menu li, której szerokość jest ustawiona na auto, ale dzięki temu będzie można mieć pewność, że dla dowolnej liczby pozycji w menu będzie ona zawsze wynosić 100 procent szerokości.
- Vertical-align: Middle i Display: table-cell - pierwszy wyrówna tekst pionowo do środka, a drugi wyświetli także linki jako komórki. Obie właściwości są potrzebne.
- czcionka - cóż, to tylko zestaw ustawień czcionki. Czytać o właściwości CSS dla czcionek w formacie .
Krok 4 (opcjonalnie) Możesz dodać interaktywność
Na przykład, aby kolor elementu menu zmieniał się po najechaniu kursorem. Można to zaimplementować po prostu, używając pseudoklasy hover:
R-menu li:hover(kolor tła: #6bba70; )
Testowanie menu pod kątem gumowatości
Świetnie, menu gotowe, ale nie sprawdziliśmy najważniejszego – jak bardzo jest gumowate, tak jak obiecałem. Cóż, dodam jeszcze 2 pozycje do menu:
Menu pozostaje szerokie na 600 pikseli. Pozostałe elementy zostały po prostu nieco zmniejszone, aby pomieścić 2 nowe.
Dodam jeszcze jeden długi punkt:
Jak widać menu nieco się skurczyło i długa pozycja wyświetla się całkiem normalnie. A gdyby nie właściwość Vertical-align: Bottom, o której Ci mówiłem, menu wyglądałoby gorzej.
Ograniczę menu do trzech pozycji.
Pozycje stały się znacznie bardziej swobodne, ale samo menu nie zmieniło się pod względem szerokości. Stworzyliśmy więc menu w 100% gumowe!
Jak to dostosować?
W zasadzie, jeśli ustawisz blok owijający na maksymalną szerokość, a nie stałą, nie trzeba go nawet dostosowywać. W moim przypadku mam właściwość max-width: 600px i gdy szerokość spadnie poniżej 600 pikseli, blok po prostu zmniejszy się wraz z ekranem, bez tworzenia poziomego przewijania.
Cóż, jeśli chcesz w jakiś sposób zmienić lub poprawić menu na urządzeniach mobilnych lub szerokich ekranach, możemy Ci pomóc! Powodzenia w tworzeniu strony internetowej!
Menu adaptacyjne dla nowoczesnej strony internetowej to nie tylko luksus, ale konieczność. Obfitość nowoczesnych urządzeń wymaga od webmasterów stworzenia układu, który będzie logicznie wyświetlany na ekranach różne rozdzielczości. A w niektórych przypadkach stworzenie responsywnego menu jest znacznie trudniejsze niż sam projekt, dlatego warto rozważyć tę kwestię.
Menu na dużym ekranie
Rozumieć ogólny schemat menu, najpierw musisz utworzyć strukturę menu w formacie HTML i nadać jej styl Pomoc CSS. Następnie w oparciu o uzyskany materiał można udoskonalać i responsywny szablon. Zatem struktura HTML będzie wyglądać następująco.
Dwupozycyjne menu w formacie HTML |
Będziesz musiał dodać style CSS do powstałego menu. Powinny wskazywać rozmiar i kolor czcionki, tło i położenie bloku.
Proces wdrażania
Tworzenie prostych funkcjonalności dla zwykłych ludzi ekran komputera- sprawa jest prosta i widać to na przykładzie. Menu adaptacyjne dla witryny tworzone jest tylko wtedy, gdy jest nad czym pracować, czyli kiedy elementy nawigacyjne zostały już dodane. Najbardziej najlepsza opcja Menu na urządzeniach mobilnych i tabletach stanie się ikoną hamburgera - kwadratowym polem, w którym narysowane są trzy. Po naciśnięciu otwierają się wszystkie pozycje menu. Aby stworzyć taką nawigację należy dodać tagi do dokumentu HTML.
Następnie musisz dodać do tych tagów odpowiednie style, aby stworzyć atrakcyjne wizualnie i czytelne menu. Oprócz wizualnego projektu ikony nawigacji i menu, należy odpowiednio zaprojektować położenie obrazu. W ten sposób wprowadzony zostaje warunek menu_icon span:nth-child(1) (top:0 px);. Oznacza to, że wcięcie obrazu z góry będzie wynosić zero pikseli. Podobnie musisz ustawić wartości dla innych stron.
Teraz responsywne menu jest już prawie gotowe. Warto zwrócić uwagę na warunek: Domyślnie ikona menu nie będzie widoczna na stronie, dlatego należy dodać do dokumentu CSS dodatkową klasę z następującym warunkiem: .menu__icon (display: inline-block;) . Dzięki temu nawigacja będzie widoczna.
Ponadto musisz dodać zadanie do kaskadowego arkusza stylów, które w razie potrzeby ukryje akapity i akapity. Aby to zrobić, musisz ustawić stałą pozycję menu w CSS, zaprojektować sposób wyświetlania i wyrównanie. Elementy są ukrywane przy użyciu warunków overflow:auto; nieprzezroczystość:0; indeks Z:1000. Możesz także dodać klasę menu__links-item, która będzie wskazywać styl pozycji menu, ale jest to na prośbę programisty.
Wykończenie
Zatem menu responsywne CSS jest prawie gotowe. Aby wyświetlała się po kliknięciu w ikonę należy dodać funkcje. Dla uproszczenia lepiej jest użyć jQuery, ale jeśli chcesz, możesz stworzyć czysty JavaScript. W obu przypadkach zastosowany zostanie ten sam warunek:
- (funkcja($)($(funkcja() $(.menu__icon”).on("kliknij", funkcja() $(this).closest(.menu").toggleClass("menu_state_open");)) ;));))(jQuery).
To tyle, jeśli chodzi o układ nawigacja adaptacyjna kończy się. Ale to tylko jedna z kilku opcji tworzenia tego rodzaju funkcjonalności, dlatego warto rozważyć pozostałe. Przez co najmniej, kilka z nich.
Bez zmiany standardów
Większość internautów oczekuje, że na górze strony pojawi się pasek nawigacyjny. Stało się to już swego rodzaju standardem, dlatego adaptacyjne menu poziome powinno prezentować się przyzwoicie. Można to zrobić za pomocą CSS, zarówno w przykładach podanych powyżej, jak i poprzez podłączenie skryptu obsługi. Ogólnie rzecz biorąc, utworzenie responsywnego menu składa się z 3 kroków:
- Pisanie tagów HTML
- Stylizuj je za pomocą kaskadowych arkuszy stylów (CSS).
- Adaptacja istniejącego menu.
Oczywiście wszystkie witryny mają własne paski menu, ale jeśli zasób zostanie utworzony w systemie CMS, znacznie łatwiej będzie utworzyć nowe menu adaptacyjne.
Bootstrap
Tworzenie responsywnej funkcjonalności nie jest aż tak poważnym problemem, jeśli korzystasz z narzędzi Bootstrap. Istnieją już gotowe szablony do tworzenia poziome menu. Wystarczy połączyć się z zasobem pliku bootstrap.js. Za pomocą tego frameworka webmaster ma możliwość stworzenia nawigacji o dowolnej złożoności. Responsywne menu z Bootstrapem jest tworzone przy użyciu kodu.
Cechy metody
Ten kod może być uciążliwy, ale jest zrozumiały. Warto zaznaczyć, że główną rolę odgrywa tu tag nawigacja, który odpowiada za tworzenie nawigacji i jej wygląd. Tu także podłączane są kontenery pojemnik-płyn I pojemnik, które ustawiają szerokość punktów. Za ich pomocą możesz wymusić rozwijanie menu na ekranach o różnych rozdzielczościach lub pozostawić je niezmienione.
Klasy odgrywają tutaj ważną rolę w tworzeniu funkcjonalności adaptacyjnej. zawalić się I zwiń pasek nawigacyjny którzy odpowiadają za styl. Samo menu tworzy się poprzez spisanie pozycji ułożonych poziomo.
Jeśli użyjesz tego kodu ramki do tworzenia nawigacji, na szerokich ekranach będzie to wyglądać jak poziomy baner. Na początku będzie nazwa zasobu, a następnie pozycje w ściśle określonej kolejności. Na wąskich ekranach wyświetli się tylko nazwa witryny i ikona hamburgera, która po kliknięciu wyświetli pozycje menu w formie pionowej listy.
Rozwijane menu
Zasób Bootstrap stanie się świetny pomocnik aby utworzyć responsywne menu rozwijane. Aby to zrobić, po prostu zamień linię znacznika
Elementy rozwijane |
|
Można to zrobić dla jednego przedmiotu lub dla kilku. W pobliżu pozycji z rozwijanymi elementami podrzędnymi pojawi się strzałka skierowana w dół. Po kliknięciu pojawi się utworzona lista. Jeżeli nawigacja wyświetla się na małym ekranie, to pozycja z listą rozwijaną będzie również oznaczona strzałką, ale z kierunkiem w prawa strona. Po kliknięciu pojawi się kolejna pionowa lista podpozycji.
Menu wielopoziomowe
Można jednak tworzyć nie tylko za pomocą Bootstrapa. Jeśli ta biblioteka nie jest podłączona, możesz stworzyć responsywne, wielopoziomowe menu przy użyciu HTML i CSS, a następnie włączyć funkcję PHP.
Najpierw musisz utworzyć nieuporządkowaną listę w pliku HTML, który zawiera inne listy. W tym celu powinieneś użyć standardowe znaczniki
- I
- . Nie należy również zapominać o utworzeniu klas, które będą dalej przetwarzane przez tabelę kaskadową Style CSS. Żeby było jaśniej warto podać mały przykład pisania list i tworzenia klas.
Animacja responsywnego menu rozwijanego jest ustawiana przy użyciu kaskadowego arkusza stylów. Tutaj musisz określić parametry menu, gdy ekran zostanie zmniejszony o 50, 75 i 25%. Takie podejście do tworzenia funkcjonalności adaptacyjnej zapewnia kompetentny układ, w którym menu się nie „wysuwa”.
Na koniec należy wprowadzić do dokumentu wskazaną poniżej funkcję.
Jeśli witryna nie przemyślała użycia innych funkcji niż ta, nadal musisz tworzyć odrębny dokument scenariusz. Jeśli w to wpiszesz zwykły HTML, pojawi się po prostu w oknie przeglądarki jako część tekstu i nie będzie działać.
JQuery
Również świetne rozwiązanie utworzy pasek nawigacyjny wtyczka jQuery. Menu adaptacyjne w takiej usłudze zajmuje zaledwie kilka minut. Sama wtyczka jest do pobrania w Internecie, posiada prosty i przejrzysty interfejs, który jest łatwy i prosty w obsłudze. Zatem nie powinno być problemów z podłączeniem pliku stylów.
Po podłączeniu pliku stylu należy napisać skrypt, aby utworzyć nawigację adaptacyjną.
Następnie musisz utworzyć nawigację, jeśli jeszcze nie istnieje. Wszystko tutaj działa w myśl zasady: „Wszystko genialne jest proste”. W dokumencie HTML musisz utworzyć listę punktowaną w tagu nawigacja. Można skorzystać z podanego już wcześniej przykładu lub jego uproszczonej wersji, która wygląda jak ta pokazana poniżej.
Na tym etapie pracy w przeglądarce wyświetli się jedynie logo, a samo menu będzie ukryte. Aby się pojawił należy dodać funkcję powodującą zmiany we wtyczce - OKNav.
var nawigacja = $("#nav-main").okayNav();
Teraz możesz przyjrzeć się wynikom pracy. Przy normalnej szerokości okna przeglądarki to menu wygląda zupełnie normalnie, ale jeśli zmniejszysz ekran, ostatnie pozycje znikną. Zamiast tego pojawiają się trzy duże kropki, umieszczone pionowo. Po naciśnięciu wydają się przewracać, przyjmować pozycję poziomą i ujawniać ukryte pozycje menu lista pionowa po prawej górny róg ekran.
Rozwiązanie to wygląda bardzo nowocześnie, a zastosowany efekt animacji stawia zasób w korzystnym świetle dla zwiedzających.
Joomla
I ostatnia opcja tworzenia menu adaptacyjnego za pomocą systemu Joomla. Ten Darmowa usługa do tworzenia stron internetowych, czyli system zarządzania Treść CMS-a. I tak jak zostało już wspomniane na samym początku, jeśli witryna została stworzona z wykorzystaniem systemu CMS i konieczna jest zmiana istniejącego menu na adaptacyjne, to najlepiej zacząć tworzenie funkcjonalności witryny już od pierwszego tagu. Podobnie jak w poprzednich przykładach, musisz utworzyć listę menu punktowanych w formacie HTML. Tylko dla każdego przedmiotu musisz napisać własną klasę. W sumie wszystko wygląda jak poniżej.
Następnie musisz dodać style. Najlepiej ustawić całe dopełnienie na 0 px i zastosować box-sizing: border-box. Dzięki temu możliwe będzie zachowanie określonej szerokości elementów, niezależnie od ilości wcięć. Następnie powinieneś ustawić szerokość nadrzędnego elementu menu (div) na 90% i rozpocząć stylizację każdego elementu indywidualnie.
Możesz usuwać obramowania, zmieniać kolor i wypełnienie oraz tworzyć projekt, który pojawi się po najechaniu kursorem. Jednym słowem, zrób wszystko, co będzie odpowiadać projektowi zasobu. Ostatni krok tworzenie adaptacji Menu Joomli jest jego przekształcenie. Najczęściej Joomla tworzy menu, które w przypadku zmiany rozmiaru ekranu jest automatycznie przebudowywane, dzieląc się na kilka linii. Wszystko to odbywa się w CSS, jedyną funkcją, którą należy uwzględnić, jest warunek dotyczący różnych przeglądarek. Dzięki temu menu wygląda tak samo w różnych przeglądarkach.
Funkcjonalność między przeglądarkami
Stworzenie responsywnego menu naprawdę nie jest łatwe, wymaga wiedzy i doświadczenia. Wszystkie opisane przykłady to tylko niewielka część możliwych odmian, ale nawet one mogą być przydatne, jeśli dana osoba to zrobi podstawowa wiedza HTML i CSS.
Nie wszystkie projekty wymagają niepotrzebnych efektów, które mogą znacząco obciążyć strony, zwłaszcza jeśli chodzi o układ adaptacyjny, dzięki któremu użytkownik może przeglądać witrynę na smartfonach czy tabletach. Większość tych efektów jest tworzona za pomocą za pomocą JavaScriptu, więc jako przykład postanowiłem pokazać, jak można to zrobić niezbędne elementy witryna, a mianowicie Menu nawigacji, praktycznie bez uciekania się do JS, ale głównie tylko za pomocą CSS. Nie da się całkowicie zrezygnować z korzystania z JS z tego powodu, że na urządzeniach mobilnych i zwykłe komputery czy laptopach, wiele zdarzeń jest innych i jeśli na komputerze w CSS możemy bezpiecznie korzystać z właściwości :unosić się, to nie będzie działać na tablecie tak, jak byśmy tego chcieli. Najbardziej niecierpliwi mogą od razu ( w przykładzie zmień szerokość okna przeglądarki).
Postawiliśmy więc sobie następujące zadanie: stworzyć menu o elastycznej szerokości, z możliwością przejścia do wersji mobilnej, gdzie menu będzie rozwijanym menu po najechaniu myszką lub naciśnięciu przycisku. Struktura HTML jest typowa dla tego typu elementów, z tą różnicą, że dodajemy jeszcze jeden element - przycisk umożliwiający rozwinięcie/ukrycie menu wersja mobilna:
CSS nie jest całkowicie standardowy. Sprawimy, że nasze menu będzie się zachowywać tak, jakbyśmy korzystali ze stołu. Od razu zaznaczam, że nie wszystkie przeglądarki obsługują właściwości, z których będziemy korzystać. Mogą wystąpić problemy z wersjami IE starszymi niż wersja 8 ( chociaż czas już przestać się na nich skupiać) i jest kilka małych problemów z IE8, ale napiszę poniżej, jak je rozwiązać.
* ( margines: 0; dopełnienie: 0; ) nagłówek ( kolor tła: #C0C0C0; ) #menu ( display: table; /* opis poniżej */ szerokość: 100%; border-collapse: zwiń; -webkit-box- rozmiar: border-box; /* opis poniżej */ -moz-box-sizing: border-box; /* opis poniżej */ box-sizing: border-box; /* opis poniżej */ ) #menu ul ( display: wiersz tabeli; /* opis poniżej */ kolor tła: #FFFFFF; styl listy: brak; ) #menu ul li ( display: komórka tabeli; /* opis poniżej */ obramowanie: 1px solid #999999; ) # menu ul li a (wyświetlanie: blok inline; szerokość: 100%; wysokość: 50 pikseli; wysokość linii: 50 pikseli; rozmiar czcionki: 1,2 em; wyrównanie tekstu: do środka; ) #menu ul li a:hover ( tło- kolor: #990000; kolor: #FFFFFF; ) #nav_button (wyświetlacz: brak; szerokość: 50 pikseli; wysokość: 50 pikseli; rozmiar czcionki: 2,5 em; wyrównanie tekstu: środek; kolor tła: #FFFFFF; obramowanie: 1 pikseli pełny #949494; kursor: wskaźnik; ) @media screen i (max-width: 600px) ( /* opis poniżej */ #menu ( display: inline-block; pozycja: względna; szerokość: auto; ) #menu ul ( display: nic; pozycja: absolutna; góra: 0; szerokość: 100%; indeks Z: 20; ) #menu ul li (wyświetlanie: element listy; górna część obramowania: brak; ) #nav_button ( wyświetlanie: blok inline; ) #menu:hover, #menu.open_nav ( szerokość: 100%; -webkit-user-select : brak; /* opis poniżej */ -moz-user-select: brak; /* opis poniżej */ -webkit-touch-callout: brak; /* opis poniżej */ ) #menu:hover ul, #menu.open_nav ul (wyświetlacz: blok; margines górny: 50px; ) )
Na niektóre style nie trzeba zwracać uwagi; kolor tła, rozmiar czcionki itp. - służy to wyłącznie celom demonstracyjnym. A nas powinny interesować następujące właściwości wraz z ich wartościami:
Wyświetlacz: stolik; Wskazuje, że element będzie zachowywał się podobnie do elementu
wyświetlacz: wiersz tabeli; Element będzie się zachowywał jak
wyświetlacz: komórka-tabela; Element będzie się zachowywał jak Lub rozmiar pudełka: border-box; (oraz z prefiksami dostawców) Podczas obliczania szerokości i wysokości elementu właściwości szerokości i wysokości będą uwzględniać wartości marginesów ( wyściółka) i granice ( granica). Jest to konieczne, aby uniknąć pojawienia się przewijania w poziomie, ponieważ bez tej właściwości, przy szerokości menu wynoszącej 100%, dodana zostanie również grubość granica, a jeśli tak, to wyściółka. -webkit-user-select: brak; i -moz-user-select: brak; Zapobiega zaznaczeniu elementu lub tekstu. Potrzebne w wersji mobilnej, aby uniknąć niespójności, gdy użytkownik przesuwa palcem po pozycjach menu, zamiast je klikać. -webkit-touch-objaśnienie: brak; Wyłącza wyświetlanie podpowiedzi po dotknięciu i przytrzymaniu elementu. Działa tylko w Chrome i Safari. Podobnie jak w poprzedniej właściwości, służy do anulowania niepożądane działania podczas pracy z elementem. @media (zapytanie o media) Temat jest dość szeroki, ale w skrócie mówi przeglądarce, jakich właściwości ma użyć dla określonych typów mediów lub właściwości techniczne urządzenia. W naszym przypadku - złóż wniosek ekran(ekrany monitorów) i maksymalna szerokość: 600px(jeśli szerokość okna przeglądarki jest mniejsza niż 600px). Najciekawsze jest to, że moglibyśmy położyć temu kres, gdybyśmy nie brali pod uwagę smartfonów, tabletów i z całą pewnością stwierdzili, że menu jest wykonane w całości w HTML i CSS. Ale będziesz musiał uciekać się do używania JS/jQuery i w tym przypadku, ponieważ zdecydowano się zrobić to przy jak najmniejszym obciążeniu, a mianowicie czystym JavaScript.
Var d = dokument, navBut = d.getElementById("nav_button"), // przycisk włączający menu navMenu = d.getElementById("menu"); // menu rozwijane // funkcja określająca obecność elementu nadrzędnego na podstawie identyfikatora funkcja hasParent(el, sId)( while(el) ( if (el.id == sId) return true; el = el.parentNode; ) return false; ) / / dotykając przycisku, dodaj klasę menu, // która odpowiada właściwości w css "#menu:hover" // i rozwiń menu navBut.addEventListener("touchstart", funkcja(e) ( e.preventDefault(); navMenu.classList .add("open_nav"); ), false); // po dotknięciu w dokumencie, // jeśli zdarzenie nie znajdowało się w żadnym elemencie menu (ustalanym za pomocą funkcji „hasParent”), // usuń z menu klasę „open_nav”, co prowadzi do jego zamknięcia d.addEventListener( "touchstart", funkcja(e) ( if(!hasParent(e.target, "menu")) navMenu.classList.remove("open_nav"); ), false);
Kod ten zapisujemy w osobnym pliku js i umieszczamy go na samym dole strony, przed tagiem zamykającym