Продължавайки с примери за различни елементи на UI уебсайт, които могат да бъдат направени без Javascript, днес ще опиша как можете да направите плъзгащо се меню, използвайки чист CSS.
Имаме нужда от въвеждане, за да определим видимостта на менюто: тоест, ако е избрано, тогава менюто е видимо и обратно.
label е нашият бургер бутон, който е обвързан с входа.
ul – самият блок на менюто.
Сега CSS(написано само за браузъри WebKit: Opera 16+, Safari, Chrome).
Нашето меню:
Скрито меню ( дисплей: блок; позиция: фиксирана; стил на списък: няма; подложка: 10px; марж: 0; размер на полето: border-box; ширина: 200px; цвят на фона: #eee; височина: 100%; отгоре: 0; отляво: -200px; преход: отляво .2s; z-индекс: 2; -webkit-transform: translateZ(0); -webkit-backface-visibility: скрит; )
Тук има много свобода за креативни хора, но основните параметри са ширина и ляво. Те трябва да имат еднаква стойност, но лявото е отрицателно. По този начин скриваме нашето меню вляво на екрана. Добавих и анимация за преход: ляво .2s, за да направя процеса на напускане на екрана по-красив.
Можете също така да го проектирате както желаете. Направих обикновен сив бутон с бели ивици в горния ляв ъгъл. Тук добавих и анимации за самия бутон и за ивиците (просто за красота).
CSS3 селекторите ни позволяват да определим състоянието на квадратче за отметка и да приложим, в зависимост от това, определени свойства за съседни елементи: отметнато ~ . В този пример, с „отметнат“ вход, преместваме бутона на менюто.hidden-menu-ticker:checked ~ .btn-menu наляво със 160 пиксела, менюто до левия край.hidden-menu-ticker:checked ~ .скрито-меню . Останалите стилове са написани за ивиците на бутона на менюто, така че при натискане те се превръщат в кръст и обратно.
В момента с помощта на jQuery можете да правите всичко на уебсайт, просто трябва да решите дали вашият сайт се нуждае от него. Всички ние се стремим да направим сайта възможно най-удобен за потребителя, така че да му е приятно да навигира в сайта и да е максимално улеснен. Менюто играе голяма роля, когато посетител „минава“ през вашия сайт. И в този урок ще създадем плъзгащо се меню, което може да се скрие и да се появи, когато потребителят има нужда от него.
Също интересни плъзгащи се менюта:
Пример може да видите тук:
Изтегли
В този урок ще използваме плъгина jQuery - “jQuery.mmenu.js”. Може да бъде изтеглен от линка - изтегляне.
Как да използвам?
HTML част
Първо, нека свържем необходимите библиотеки и стилове:
След това ще вземем решение за структурата на менюто. Като пример, за да покажа как работи, ще направя меню с вложени елементи. Но вашият може да е по-прост:
Малко над менюто ще вмъкнем превключвател, така че потребителят да може да го отваря/затваря:
Приключихме с HTML структурата, сега нека да преминем към стиловете.
как навигационно менюна сайта, меню на потребителския профили т.н. могат да бъдат скрити и те ще се появят при щракване и задържане. Някои може да кажат, че това се отразява на използваемостта на страницата. Не мисля така, защото страницата става по-чиста, което означава, че е по-лесна за навигация. Човек не се бърка в планина от връзки. Днес подготвих колекция плъзгащи се панели, които по подразбиране са скрити на страницата. Да се обади меню, трябва да щракнете или да задържите курсора на мишката върху съответната икона. Тази техника дойде в уеб дизайна от мобилни приложения, където е невъзможно да се подредят много елементи на един екран. С течение на времето такива панели мигрираха към уебсайтове. Тази колекция ще бъде полезна преди всичко за разработчиците на мобилни устройства. При ниска резолюция на екрана ще се появи това. изходяща навигация, а на нормални, големи монитори можете да направите обичайното меню, с което всеки е свикнал. По този начин човек с мобилно устройство няма да се обърка във вашия сайт, тъй като отдавна е свикнал да използва плъзгащи се панели, тъй като всички приложения на смартфона му работят на същия принцип. Бих искал да отбележа, че тази колекция включва добавки, които се заточват само за мобилни сайтовеи на широки монитори използването им ще бъде неподходящо. Въпреки че има и универсални панели, които са подходящи за всеки уебсайт. Гледайте демонстрацията и изберете това, което отговаря на вашите нужди. Падащите панели работят на . Внедряването на такова меню на вашия уебсайт няма да е трудно, а уебсайтовете на разработчиците съдържат подробни инструкции как да използвате техния продукт. Скоро планираме редизайн на уебсайта Postovoy и ще използваме един от jquery добавкикоито са представени по-долу. Така. Предлагаме на вашето внимание колекция от 20 плъгина за падащ панел на jqueryза вашия уебсайт. Не забравяйте да оставите коментари.
Плъзгащо се странично меню
Приятно плъзгащо се навигационно меню в jquery под формата на слайд панел. Идеален както за мобилен сайт, така и за обикновен.
Преходи за навигации извън платното
Изключително мощен плъгин, който ви позволява да организирате слайд панел, който ще се показва с различни анимационни ефекти, включително 3D. Плъгинът включва 14 анимационни ефекта.
jPanelMenu
Навигационният панел е проектиран в стила на iOS приложенията. Лесно и бързо меню, което ще улесни изработката на мобилен сайт.
Създайте отново менюто на Google Nexus
Плъзгащият се панел е направен по аналогия с менюто на Google Nexus.
bigSlide - лента за навигация на слайдове в Jquery
Слайд панелът е подходящ както за мобилен сайт, така и за обикновен. За да го извикате, трябва да кликнете върху иконата, изобразяваща три ивици.
Многостепенно Push меню
Приставката Jqutry работи подобно на bigSlide. Панелът се извиква, когато щракнете върху иконата. Предимството на това меню е, че поддържа многостепенна структура.
Меню Водач на кутията
Много красив навигационен слайд бар с 3D ефект.
Анимирани менюта с граници
Като щракнете върху знака плюс в ъгъла на екрана, се появява малка странична лента с икони. За да го скриете, трябва да кликнете върху иконата със символа "-".
Snap.js
Плъзгащият панел е предназначен за мобилни устройства. Менюто се извиква чрез плъзгане на екрана с курсора на мишката или, ако сте на мобилно устройство, с пръст.
Менюта за плъзгане и натискане
|
Меню
Jquery плъгин, който ви позволява да внедрите страхотна навигационна плъзгаща се лента с 3D ефект на вашия уебсайт.
mb.jquery
За разлика от други панели, той се появява в горната част на екрана, вместо да го мести. Можете да поставите всеки html, текст или каквото искате в блока.
Android Dock
Панелът е предназначен за мобилни сайтове и се намира в долната част на екрана. При щракване се появяват икони, в които можете да поставите всякакви връзки.
Слайд панел със съдържание
Готиният слайд панел е проектиран на две нива. Първото е менюто. Второто е съдържанието. Сега този ефект е много популярен сред дизайнерите и уеб разработчиците. Можете да намерите много приложения. Мейлърът на Microsoft работи на подобен принцип.
Създаване на плъзгащо се странично меню с чист CSS
Актуализирайте рамката до най-новата версия
Случайна поща. Генератор на имейл адреси. Опция на Gmail за създаване на временен имейл адрес