Адаптивно меню за модерен сайт - не просто лукс, а необходимост. Изобилието от модерни устройства изисква уебмайсторите да правят такова оформление, което логично да се показва на екрани с различни разрешения. А в някои случаи създаването на адаптивно меню е много по-трудно от самия дизайн и затова е необходимо да се разгледа този въпрос.
Менюта на голям екран
За да разберете общата схема на оформление на адаптивното меню, първо трябва да създадете структура на менюто в HTML и да я стилизирате с помощта на CSS. След това на базата на материала можете да подобрите адаптивния шаблон. Така HTML структурата ще изглежда така.
Меню за два параграфа в HTML
Ще трябва да добавите CSS към полученото меню. Те трябва да определят размера и цвета на шрифта, фона, позиционирането на блоковете.
Процесът на адаптация
Създаването на проста функционалност за обикновен компютърен екран е лесно, и това може да се види в примера. Адаптивно меню за сайта се създава само когато има нещо, с което да се работи, т.е. когато навигационните точки вече са добавени. Най-добрият вариант за менюто за мобилни устройства и таблети е значката на хамбургер - квадратна кутия с три вертикални линии. При натискане се отварят всички елементи на менюто. За да създадете такава навигация, маркерите трябва да бъдат добавени към HTML документа.
HTML тагове - документ
След това трябва да добавите подходящи стилове към тези тагове, така че да се окаже, че това е такаВизуално атрактивно и разбираемо меню. В допълнение към визуалните навигационни и икони на менюто, трябва да подредите позицията на изображението. Да, въвеждате условието menu_icon span: nth-child
{top: 0 px};. Това означава, че изображението от горната част ще бъде нула пиксела. По същия начин е необходимо да се зададат стойности за други страни.
Сега адаптивното меню е почти готово. Струва си да се обърне внимание на дисплея на състоянието: няма. По подразбиране иконата на менюто няма да се вижда на сайта, така че в CSS документа трябва да се добави допълнителен клас със следното условие: .menu__icon {display: inline-block;}. Това ще направи видимата навигация видима.
Освен това е необходимо да се добави задача към каскадния стилов лист, който да скрие параграфите и подпараграфите, ако е необходимо. За да направите това, в CSS трябва да поставите фиксирана позиция на менюто, да изчертаете дисплей и подравняване. Елементите са скрити при условия на препълване: автоматично; непрозрачност: 0; z-индекс: 1000. Можете също да добавите елемент menu__links-class, който указва стила на елементите на менюто, но е по искане на разработчика.
Последен ход
По този начин адаптивното CSS меню е почти завършено. За да функционира, когато кликнете върху икона, трябва да добавите функции. По-добре е да използвате jQuery за простота, но ако искате, можете да създадете чист javascript. И там ще се използва същото условие:
При това приключва адаптивното оформление на навигацията. Но това е само една от няколкото възможности за създаване на такъв тип функционалност, затова си заслужава да разгледаме другото. Поне няколко от тях.
Без промяна на стандартите
По-голямата част от потребителите на интернет очакват да видят лента за навигация в горната част на сайта. Това вече се превърна в своеобразен стандарт, така че адаптивното хоризонтално меню трябва да има приличен вид. Тя може да бъде направена с помощта на CSS, както в горните примери, и чрез свързване на скрипта на манипулатора. Като цяло създаването на адаптивно меню се състои от 3 стъпки:
Писане на HTML тагове
Оформянето им чрез каскаден стилов лист (CSS).
Адаптиране на вече съществуващото меню.
Разбира се, всички сайтове имат собствено меню, но ако ресурсът е създаден в CMS, ще бъде много по-лесно да се създаде ново адаптивно меню.
Bootstrap
Създаването на адаптивна функционалност не е толкова сериозен проблем, ако използвате инструментите Bootstrap. Вече има предварително инсталирани шаблони за създаване на хоризонтално меню. Просто трябва да се свържете с ресурса bootstrap.js. С тази рамка, уебмастъра получава възможността да създава навигация от всякаква сложност. Адаптивно меню от Bootstrap се създава с помощта на определен код.
Пример за хоризонтално адаптивно меню за 3 елемента
Характеристики на метода
Нека този код и тромав, но разбираем. Трябва да се отбележи, че основната роля тук е навигационният етикет, който е отговорен за създаването на навигацията и нейния външен вид. Тук са посочени контейнерите и контейнерите с течност, които определят ширината на елементите. С тяхна помощ можете да принудите менюто да се разширява на екрани с различни резолюции илиостави го фиксирано.
Важна роля в създаването на адаптивна функционалност играят класовете с колапс и navbar-колапс, които са отговорни за стила. Менюто се създава чрез записване на маркиран списък с елементи, поставени хоризонтално. Ако приложите този код за кадриране, за да създадете навигация, то на широки екрани ще изглежда като хоризонтален банер. В началото ще има името на ресурса, а след това елементите в строго определена последователност. На тесни екрани ще се показват само името на сайта и иконата на хамбургер, когато щракнете върху кои елементи от менюто се показват като вертикален списък.
Падащото меню
Ресурсът ще направи Bootstrap чудесен помощник за създаване на адаптивно падащо меню. За да направите това, просто заменете линията с етикет
от предишния пример с кода по-долу.
Дълбочина
Това може да се направи както за един, така и за един елемент. Близо до позицията с изпускане на под-елементи ще се появи стрелка, сочеща надолу. При кликване ще се появи списък. Ако на малък екран е маркирана навигация, елементът със падащия списък ще бъде показан със стрелката, но с посоката надясно. Когато бъде натиснат, ще има друг вертикален списък с подпозиции.
Многостепенно меню
Въпреки това, можете да създадете падащи списъци не само с Bootstrap. Ако тази библиотека не е свързана, можете да създадете адаптивно многостепенно меню с помощта на HTML и CSS спо-нататъшно свързване на функцията на NRC. Първо, трябва да създадете скрит списък в HTML файла, който включва други списъци. За да направите това, използвайте стандартните маркери и
. Също така не е нужно да забравяте за формирането на класове, които ще се обработват в CSS стиловата таблица. За да бъдем по-ясни, си струва да дадем малък пример за писане на списъци и създаване на класове.
HTML-списък на навигационната лента
Анимацията на адаптивното падащо меню се задава чрез каскаден стилов лист. Тук трябва да посочите опциите за менюто, когато намалите екрана с 5075 и 25%. Такъв подход за създаване на адаптивна функционалност осигурява компетентно оформление, при което менюто не "дръпва". И накрая е необходимо да се вмъкне в документа функцията, посочена по-долу.
Функция
Ако сайтът не разглежда използването на други функции освен това, все още е необходимо той да създаде отделен документ за скрипт. Ако го поставите в обикновен HTML, той просто ще се появи в прозореца на браузъра като част от текста и няма да работи.
JQuery
Също така е чудесно решение да създадете лента за навигация в плъгина jQuery. Адаптивно меню за такава услуга отнема само няколко минути. Самият плъгин може да бъде изтеглен онлайн, има прост и интуитивен интерфейс, който е лесен и лесен за използване. Така че не трябва да има проблеми със свързването на стиловете. След като файлът със стил е свързан, трябва да напишете скриптза създаване на адаптивна навигация.
След това се нуждаете от навигационна машина, ако вече не е там. Тук всичко се основава на принципа: "Всичко е просто брилянтно". В HTML документа, който трябва да създадете маркиран списък в nee маркер. Можете да използвате примера по-горе или неговата опростена версия, която изглежда като тази по-долу.
Елементи на менюто HTML
В този момент в браузъра ще се показва само логото и самото меню ще бъде скрито. За да се появи, трябва да добавите функция, която причинява промяна на приставката - okayNav.
Сега можете да разгледате резултатите от работата. При нормална ширина на прозореца на браузъра това меню изглежда напълно нормално, но ако намалите екрана, последните елементи изчезват. Вместо тях има три големи точки, разположени вертикално. При натискане те се обръщат, заемат хоризонтално положение, а скритите елементи от менюто се разкриват от вертикалния списък в горния десен ъгъл на екрана.
Такова решение изглежда много модерно и анимираният ефект излага ресурса в благоприятна светлина за посетителите.
Joomla
И последната опция за създаване на адаптивно меню, използващо системата Jumla. Това е безплатна услуга за създаване на уеб сайт, която е система за управление на съдържанието на CMS. И както вече споменахме в самото начало, ако сайтът е създаден с помощта на CMS, и трябва да промените съществуващото меню на адаптивния, тогава е по-добрепросто започнете да правите сайта функционален от първия таг. По същия начин, както в предишните примери, трябва да създадете списък с менюто за маркиране в HTML. Само за всеки елемент трябва да напишете свой собствен клас. Като цяло всичко изглежда по-долу.
Меню за jooble
След това трябва да добавите стилове. Най-добре е да поставите всички тирета на 0 px и да приложите box-sizing: border-box. Това ще ви позволи да запишете дадена ширина на елементите, независимо от това колко отстъп ще отнеме. След това, за родителския елемент в менюто (div) е полезно да зададете ширина от 90% и след като започнете да стилизирате всеки елемент поотделно.
Можете да премахнете границите, да промените цвета и да запълните, да направите дизайн, който ще се появи, когато задържите курсора. С една дума, направете всичко, което отговаря на дизайна на ресурса. Последната стъпка от създаването на адаптивно Joomla меню е да я трансформираме. Често Joomla създава меню, което при преоразмеряване на екрана автоматично възстановява, разделено на няколко реда. Това се прави в CSS, единствената функция, която трябва да бъде свързана, е състоянието на кръстосания браузър. Тя позволява на менюто да изглежда по същия начин в различни браузъри.
Кръстосана функция
Създаването на адаптивно меню е наистина трудно, изискващо знания и опит. Всички примери са само малка част от възможните варианти, но дори и те могат да бъдат полезни, ако човек има основни познания по HTML и CSS.
