Как да направите адаптивно меню? примери

Адаптивното меню за модерен сайт не е просто лукс, а необходимост. Изобилието от съвременни устройства изисква уебмастъри с такова оформление, които биха били логично показвани на екрани с различна разделителна способност. И в някои случаи създаването на адаптивно меню е много по-трудно от самия дизайн, затова е необходимо този проблем да се разгледа.

Меню за голям екран

За да разберете общата схема налагане на адаптивни първо трябва да създадете структура на менюто в HTML и да я стилизирате с помощта на CSS. После, въз основа на получения материал, можете също да подобрите адаптивния шаблон. Така структурата на HTML ще изглежда така.

Полученото меню ще трябва да добави CSS стилове. Те трябва да определят размера на шрифта и цвета, фона, позиционирането на блока.

Процес на адаптиране

Създаването на проста функционалност за конвенционален екран е просто въпрос и това може да се види в примера. Адаптивното меню за сайта се създава само когато има нещо, с което да работим, т.е. когато вече са добавени навигационни точки. Най-оптималният вариант на менюто за мобилни устройства и таблети ще бъде хамбургер икона - квадратна кутия, в която три вертикални характеристики. При натискане се отварят всички елементи от менюто. За да създадете такава навигация, трябва да добавите маркери към HTML документа.

След това ще трябва да добавите подходящите стилове към тези маркери, за да получите визуално привлекателно и разбираемо меню. Освен визуализирането на иконите за навигация и менюто, трябва да подредите съответната позиция на изображението. Така влизате в условието menu_icon span: nth-child (1) {top: 0 px} -. Тоест, вдлъбнатината на изображението отгоре ще бъде нула пиксела. По същия начин трябва да зададете стойности за другите страни.

Сега адаптивното меню е почти готово. Струва си да се обърне внимание на състоянието дисплей: няма. По подразбиране, иконата на менюто няма да се вижда на сайта, така че CSS-документ, който трябва да се добави допълнителен клас с такова състояние: .menu__icon {дисплей: инлайн блок-}. Това ще направи навигацията видима.

Освен това трябва да добавите задача към каскадния лист стил, който ще скрие елементите и подпараграфите, ако е необходимо. За да направите това, в CSS трябва да зададете фиксиран елемент от менюто, да подредите дисплея и да го подредите. Елементите се скриват при условия на преливане: автоматична непрозрачност: 0-z-индекс: 1000. Можете също така да добавите клас menu__links-item, който определя стила на елементите от менюто, но това е по избор на програмиста.

Последното докосване

По този начин адаптивното меню на CSS е почти завършено. За да се покаже, когато кликнете върху иконата, трябва да добавите функции. За простота е по-добре да използвате jQuery, но ако искате, можете да създадете чист jаvascript. И двете условия ще бъдат използвани там и там:

• (Функция ($) {$ (функция () $ ( "menu__icon.) На (с щракване, функция () $ (това) .closest () ToggleClass (" menu_state_open `)` меню. "- ..}) -}) -}) (jQuery).

Това завършва оформлението на адаптивната навигация. Но това е само една от няколкото възможности за създаване на този вид функционалност, затова си струва да разгледаме останалото. Поне няколко от тях.

Без промяна на стандартите

По-голямата част от интернет потребителите очакват да видят лентата за навигация в горната част на сайта. Това вече е един вид стандарт, така че адаптивното хоризонтално меню трябва да има приличен външен вид. Това може да се направи с помощта на CSS, както в примерите, показани по-горе, и чрез свързване на скрипта на драйвера. Като цяло, създаването на адаптивно меню се състои от три стъпки:

1. Писане на HTML тагове
2. Техният стил с каскаден стилов лист (CSS).
3. Адаптиране на вече съществуващо меню.

Естествено, всички сайтове имат свои собствени ленти с менюта, но ако ресурсът е създаден в CMS, ще бъде много по-лесно да създадете ново адаптивно меню.

за първоначално зареждане

Създаването на адаптивна функционалност не е толкова сериозен проблем, ако използвате инструментите за Bootstrap. Има предварително зададени шаблони за създаване на хоризонтално меню. Трябва само да се свържете с файла за ресурси bootstrap.js. С тази рамка уеб администраторът може да създаде навигация с всякаква сложност. Едно адаптивно меню с Bootstrap се създава с помощта на конкретен код.

Характеристики на метода

Нека този код и тромав, но разбираем. Струва си да се отбележи, че основната роля тук играе етикета навигация, който е отговорен за създаването на навигация и нейния външен вид. Също тук са контейнерите контейнера флуид и контейнер, които определят ширината на елементите. С тяхна помощ можете да направите менюто да се разгъне на екрани с различна разделителна способност или да ги остави.

Важна роля в създаването на адаптивна функционалност играят тук класовете колапс и навигационната лента-колапс, които отговарят за стила. Самото меню се създава чрез писане списък с отметки които са поставени хоризонтално.

Ако приложите този код, за да създадете навигация, тогава на широки екрани той ще изглежда като хоризонтален банер. В началото ще има име на ресурса и след това елементи в строго определена последователност. При тесни екрани ще се показва само името на сайта и иконата за хамбургер, когато кликнете върху елементите от менюто, които се показват като вертикален списък.

Падащо меню

Ресурсът за Bootstrap ще бъде отличен помощник за създаване на адаптивно падащо меню. За да направите това, просто заменете маркера

Това може да се направи за една точка, а за няколко. В близост до позицията с падащи под-позиции ще има стрелка, насочена надолу. Когато кликнете, създаденият списък се показва. Ако навигацията се показва на малък екран, елементът с падащия списък също ще бъде обозначен със стрелка, но с посоката към дясната страна. Когато е натиснат, се появява друг вертикален списък с под-позиции.

Многоелементно меню

Въпреки това, за да създадете падащи списъци не само с помощта на Bootstrap. Ако тази библиотека не е свързана, можете да създадете адаптивно многоелементно меню, като използвате HTML и CSS, след което свържете PHP функцията.

Първо, трябва да създадете неменен списък в HTML файла, който включва други списъци. За тази цел използвайте стандартни тагове

и
• . Не забравяйте за формирането на класове, които по-късно ще бъдат обработени от каскаден CSS стилов лист. За да стане по-ясно, струва си да дадем малък пример за писане на списъци и създаване на класове.

Анимацията на адаптивното падащо меню се определя с използване на каскаден стилов лист. Тук трябва да зададете параметрите на менюто, когато екранът е намален с 50, 75 и 25%. Този подход за създаване на адаптивна функционалност осигурява компетентно оформление, в което менюто не се "премества".

И в крайна сметка трябва да въведете функцията по-долу в документа.

Ако сайтът не обмисля използването на други функции освен този, той все още трябва да създаде отделен скрипт за него. Ако го напишете в обикновен HTML, той просто ще се появи в прозореца на браузъра като част от текста и няма да работи.

JQuery

Също така отлично решение е да се създаде навигационна лента на приставката JQuery. Адаптивното меню на тази услуга е само няколко минути. Самата плъгин може да бъде изтеглена в интернет, има лесен и интуитивен интерфейс, който е лесен и лесен за използване. Така че не трябва да има проблеми при свързването на стилове.

След като стиловия лист е свързан, трябва да напишете скрипт, за да създадете адаптивна навигация.

След това е необходимо да се направи навигация, ако тя вече не е там. Тук всичко работи според принципа: "Всички гениални са прости." В документа HTML трябва да създадете списък с отметки в маркера навигация. Можете да използвате горепосочения пример или неговата опростена версия, която изглежда като тази, показана по-долу.

На този етап от работата само логото ще се покаже в браузъра и самото меню ще бъде скрито. За да се появи, трябва да добавите функция, която да промени приставката - okayNav.

Сега можете да погледнете резултатите от работата. С нормалната ширина на прозореца на браузъра това меню изглежда съвсем нормално, но ако свиете екрана, последните изчезват. Вместо това се появяват три големи точки, разположени вертикално. При натискане те се обръщат хоризонтално, а скритите елементи от менюто се показват от вертикалния списък в горния десен ъгъл на екрана.

Това решение изглежда много модерно и анимираният ефект разкрива ресурса в благоприятна светлина за посетителите.

Joomla

И последната опция е да се създаде адаптивно меню с помощта на системата Jumla. Това е безплатна услуга за създаване на уеб сайтове, която е система за управление на съдържанието за CMS. И както вече бе споменато в началото, ако сайтът е създаден с помощта на CMS, както и необходимостта от промяна на съществуващите адаптивна меню, най-добре е да започнете да печелите функционален сайт с първия маркер. По същия начин, както в предишните примери, трябва да създадете списък с менюта с отметки в HTML. Само за всеки елемент трябва да напишете своя клас. Като цяло всичко изглежда както е показано по-долу.

След това трябва да добавите стилове. Най-добре е да поставите всички тирета на 0 px и да приложите размера на кутията: border-box. Това ще позволи да се запази определената ширина на елементите, независимо колко от тях има. След това, за елемента от менюто "родител" (div), задайте ширината на 90% и след това започнете да оформяте всеки елемент отделно.

Можете да премахнете границите, да промените цвета и да запълнете, да направите дизайна, който ще се появи, когато задържите курсора над курсора. С една дума, направете всичко, което съответства на дизайна на ресурса. Последната стъпка в създаването на адаптивното меню на Joomla е да го преобразувате. По-често в Joomla създаваме такова меню, което при промяна на размера на екрана автоматично се реконструира, разделяйки се на някои линии. Това се прави и в CSS, единствената функция, която трябва да бъде свързана, е съвместимостта между различните браузъри. Тя позволява на менюто да изглежда еднакво в различните браузъри.

Създаването на адаптивно меню е наистина трудно, това изисква познания и опит. Всички тези примери - само малка част от възможните варианти, но дори и те могат да бъдат полезни, ако човек има основни познания по HTML и CSS.