В этой статье мы разберём как сделать мобильное меню на HTML, CSS и JavaScript, вы увидите что это очень просто.
Логика программы:
Для начала разберём логику программы, а суть заключается в том, что при нажатие на кнопу, будем менять класс и тем самым показывать меню, по умолчанию оно скрыто.
HTML:
Сначала создадим HTML файл, ну в нём всё очень просто.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, itaque mollitia rerum ducimus est beatae aut, optio aliquam dolor quaerat repellat sit dolore dignissimos. Hic ratione quasi ipsam vel velit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium molestias fuga, labore eum non quam, quidem aspernatur aliquid repudiandae quae suscipit tenetur nam id omnis soluta dolorem ad eligendi totam?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. In nesciunt sunt distinctio, laudantium ad non deserunt ut, quos tenetur maiores porro. Quae ipsum obcaecati natus incidunt quam reprehenderit repellendus totam!
Как настроить разделы в группе ВКонтакте с телефона
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis asperiores in dolorem nemo eveniet dolor quo veniam rem! At magni pariatur blanditiis quod dolorem, tempore fugiat fuga sequi eius.
Здесь мы создаём меню с помощью тега nav и в main добавили рыбный текст, что бы явно было видно что меню можно открыть везде, не зависимо от скролинга.
Также внутри nav , вы можете заметить div с классом btn-menu, это как раз и будет наша кнопка.
CSS:
Теперь перейдём CSS.
padding : 0 ;
padding : 20px ;
font-size : 7vw ;
position : fixed ;
font-size : 7vw ;
position : fixed ;
list-style : none ;
padding : 0 ;
width : 600px ;
height : 100vh ;
background-color : green ;
margin-top : 0 ;
left : -600px ;
transition : 500ms ;
width : 100px ;
height : 100px ;
position : relative ;
background-color : red ;
padding : 10px 0 ;
text-align : center ;
color : white ;
text-decoration : none ;
div.btn-show-menu <
background-color : blue ;
Разберём этот файл, в самом его начале мы убираем все отступы у документа, что бы меню выглядело красивее, потом настраиваем отображение текста в main , но оборот добавляем внутренние отступы.
Потом переходим к настройки тега nav , там просто делаем позиционирование fixed, это нужно что бы мы всегда видели меню, дальше самое важное, это настройка ul , дле него меняем цвет и самое главное тоже делаем fixed и высоту 100vh , это нужно что бы элемент отображался во всю высоту экрана, также делаем позицию -600px или просто минус его ширина, для того чтобы элемент не виден на экране а был скрыт слева, ну и transition: 500ms , для плавного показа.
Дальше просто добавляем стили чтобы более красивого отображение, но последние два это классы для замены, первый, для показа меню, в нём позиция слева равна нулю, а во втором просто меняем цвет для кнопки.
Как сделать кнопки меню ВКонтакте
JavaScript:
Последние что осталось посмотреть, это код на языке JavaScript, но он не большой и очень простой.
Источник: prognote.ru
МОБИЛЬНАЯ ВЕРСИЯ горизонтального меню | Адаптируем меню на чистом CSS
В первой части видео показывал, как можно реализовать горизонтальное меню при помощи display:flex; , данное видео продолжение, и тут будем адаптировать горизонтальное меню под мобильные устройства. Рекомендую посмотреть видео по Media queries CSS на базе которого будем проводить адаптацию.
В видео уроке задействуем:
Определяемся, какой хотим достичь результат.
Суть я думаю, вы уловили, и по окончанию урока мы получим такой результат.
Скачиваем и подготавливаем код
С качаем с предыдущего урока код горизонтального меню «Выпадающее меню на чистом CSS / HTML». Перенесем его в свою среду разработки, в моем случае использую PhpStorm, в группе VK найдете на этот редактор ссылку, скачивайте, устанавливайте и пользуйтесь https://vk.com/topic-70729755_35330805.
И так, откроем index.html страницу, включим режим просмотра для мобильных устройств и на текущий момент видим, горизонтальное меню не адаптировано и нам предстоит с этим поработать.
Я первым делом создам отдельный файл, где буду описывать код мобильного меню. Это поможет в дальнейшем избежать путаницы и Вам будет проще ориентироваться в написанных стилях.
В директории CSS создаем media.css . В Index.html подключаем данный файл, обязательно обратите внимание, что бы он находился ниже основного стиля, так как в первую очередь, подгружаем style.css , а затем уже media.css для адаптации горизонтального меню.
Так как будем адаптировать меню под мобильные устройства воспользуемся мета тегом viewport со следующими атрибутами, name=»viewport» и content=»width=device-width, initial-scale=1″ . Прописываем тег в самом верху после UTF-8 .
Данный мета тег помогает настроить адаптивность сайта под мобильные устройства, но также с помощью его можно улучшить представления веб-страниц имеющие фиксированную или гибкую разметку.
Давайте более подробнее разберем его составляющую:
Атрибут name указывает браузеру что данная страница касается информации viewport , то есть это видимая область пользователю веб-страницы. Та область, которая в свою очередь видна без прокрутки.
Второй атрибут данного тега content имеет пару ключей со своими значениями.
Параметр width со значением device-width отвечает за ширину видимой области, что бы она равнялась ширине устройства, а второй параметр initial-scale устанавливает первоначальный масштаб веб-страницы. Значение 1 означает, что масштаб равен 100% .
Так же у этого тега есть другие параметры, но в рамках данного урока они нам не понадобятся, нам достаточно этих данных что бы адаптировать меню.
Описываем CSS стили под мобильные устройства
П ереходим в media.css , в нем опишем медиа запрос под расширения менее 800 пик. Пишем стандартную конструкцию media запроса. Основному блоку меню с классом .dws-menu добавляем overflow: hidden; для того чтобы сформировать отступ от краев.
В принципе идея следующая, на небольших экранах, скрывать базовое меню, а в место него отображать input и label . Когда пользователь кликает на label , основное меню показывается под ним.
Есть и другие варианты реализации данной идее, можно скрывать и отображать при помощи JS скрипта, но в этом случае идет дублирование кода и не во всех браузерах удается его стилизовать. К тому же у нас урок по CSS и будем придерживаться данной темы.
Я разделяю написание кода на три этапа:
- в первом этапе описываем его основную структуру, и стили;
- во втором этапе анимируем;
- и заключающим третьим этапом, предаем красивое оформление.
Идею я думаю вы поняли, и приступим к описанию кода.
Предварительно выстроим меню в вертикальном виде, для этого достаточно сделаем UL блочным элементом.
.dws-menu ul
Теперь добавим в верстку сайта следующие селекторы input и label с использованием checkbox , который будет принимать щелчок и отображать меню.
Перед списком вставляем input , в нем прописываем атрибут type со значением checkbox , дадим имя, обязательно присвоим ID при помощи которого label будет отслеживать нажатие по данному селектору. Далее присвоим инпуту класс, для его дальнейшего оформления.
Затем опишем label , у которого основная функция отследить клик по определенному input , в нем обязательно пропишем атрибут for со значением ID с input , присвоим свой класс для стилилизации, а в нутрии прописываем иконку, которую возьмем из подключенных нами до этого шрифтов.
Меню
Далее переходим в медиа стили и приступим к их оформлению.
.dws-menu [type=»checkbox»]
Отбираем кнопку .dws-menu label.toggleMenu , задаем задаем ей цвет background: #C9C9C9; , и делаем кнопку блочным элементом, что бы она приняла форму данного меню.
.dws-menu label.toggleMenu
Приводим ее к внешнему виду, как выглядят основные кнопки. Для этого сделаем внутренние отступы padding: 15px 40px; , текст пропишем заглавными буквами и немного его уменьшаем. При наведении делаем cursor: pointer; .
Далее с позиционируем иконку, и для этого зададим блоку position: relative; :
.dws-menu label.toggleMenu < background: #C9C9C9; display: block; padding: 15px 40px; text-transform: uppercase; font-size: 14px; cursor: pointer; position: relative; >
Отбираем иконку, и позиционируем ее абсолютно данному блоку, увеличим до 18 пик. что бы она сочеталась с остальными иконками.
.dws-menu label.toggleMenu .fa
Теперь нужно при маленьком разрешении скрыть все пункты и оставить одну кнопку. Для этого пишем в медиа запросе display: none;
.dws-menu ul < display: none; >
При широком расширении, тоже ее скрываем:
.dws-menu label.toggleMenu < background: #C9C9C9; display: none; padding: 15px 40px; text-transform: uppercase; font-size: 14px; cursor: pointer; position: relative; >
А в мобильной версии отобразим:
.dws-menu label.toggleMenu
Следующим этапом по щелчку нужно поменять цвет на более темный и развернуть основной список. Для этого будем отслеживать щелчок мышкой и менять цвет кнопки.
Отбираем кнопку при щелчке, и применяем к ней действия, меняем цвет кнопки и шрифта:
input.toggleMenu:checked + label.toggleMenu
Далее прописываем отображение основного списка меню. Отбираем щелчек по кнопке, и при помощи данной конструкции описываем к чему его применить.
input.toggleMenu:checked ~ ul
С основным меню мы разобрались, и можно приступать к описанию вложенных пунктов меню.
Описываем вложенные пункты
Д ля удобства просмотра выпадающих списков я в основном стиле скрою отступ меню, что бы его расположить в самом верху экрана.
header < /*margin-top: 200px;*/ font-family: Cuprum, Arial, Helvetica, sans-serif; >
По аналогии как делали с основным меню, практически то же самое делаем с вложенными пунктами. Добавляем к пункту «Продукция» input и label и опишем стили его отображения.
При нажатии видим небольшой отступ, давайте его скроем, в основных стилях добавляем его к описываемому до этого стилю.
.dws-menu [type=»checkbox»], .dws-menu label.toggleSubmenu
И по аналогии как делали до этого, отображаем пункты по щелчку, для этого отберем label в субменю, позиционируем его абсолютно с нулевыми значениями, ширину и высоту делаем по 100%, задаем курсор, хотя он и не обязательный в мобильной версии, но нам для удобства он не помешает. Обязательно прописать, что это блочный элемент:
.dws-menu label.toggleSubmenu
При нажатии на пункт меню меняем цвет фона и шрифта:
input.toggleSubmenu:checked ~ a
Далее разворачиваем все пункты подменю:
input.toggleMenu:checked ~ ul, input.toggleSubmenu:checked ~ ul< display: block; position: relative; >
Для того что бы видеть какой из пунктов имеет подменю, добавим соответствующую иконку в виде треугольника.
Отбираем libel субменю и при помощи псевдоэлементов добавим иконку с подключенных шрифтов.
Цвет делаем у нее серым:
.dws-menu label.toggleSubmenu .fa::before
С позиционируем иконку по правой стороне:
.dws-menu label.toggleSubmenu .fa
И нахватает второй иконки, которая будет отображать, что пункт развернут при щелчке, для этого отбираем субменю по щелчку и меняем иконку, а также задаем белый цвет:
.dws-menu input.toggleSubmenu:checked ~ label.toggleSubmenu .fa::before
По аналогии прописываем input и label в последующих меню в данной группе, только обязательно меняем у них идентификатор.
Следующий пункт это «Услуга» и там пропишем данные параметры:
Описываем вложенные подпункты
П о аналогии как делали с основным меню, практически туже операцию нужно провести и с вложенными субменю. Первым делом пропишем input и label в одном из подменю.
Первый пункт по списку идет «Одежда», пишем там свою конструкцию и сразу проверяем что получилось:
Практически меню готово осталось немного у него подкорректировать ширину. Смотрим из за чего она так формируется. Видим, что основными стилями добавляется отступ и нам нужно его убрать.
Отбираем вложенные меню и позиционируем его абсолютно с отступами в автомате:
.dws-menu li > ul li ul
Дописываем следующие пункты в данной ветке и не забываем задаем каждому пункту свой ID .
Как видим меню оптимально отображается, пункты все работаю, переключаются, и следующим этапом сделаем анимацию.
Анимирование элементов
И дея анимирования не просто появления меню, а плавное его выезжание по клику с верху в низ.
Для этого нам нужно задействовать высоту блока и повещаем на нее анимацию.
Меняем у блока ul display на block , и скрываем его не при помощи none , а про помощи max-height в ноль. Прописываем дополнительно transition в 0,3 сек по данному параметру.
.dws-menu ul < display: block; max-height: 0; transition: max-height 0.3s; >
А при клике добавляем max-height: 5000px; и transition делаем в 2 сек.
input.toggleMenu:checked ~ ul, input.toggleSubmenu:checked ~ ul < display: block; position: relative; max-height: 5000px; transition: max-height 2s ease-in; >
.dws-menu label.toggleMenu < background: #c9c9c9; /* Old browsers */ background: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#c9c9c9′, endColorstr=’#757577′,GradientType=0 ); /* IE6-9 */ display: none; padding: 15px 40px; text-transform: uppercase; font-size: 14px; cursor: pointer; position: relative; >
На этом все код Мобильного меню готов, и теперь можно его проверять на разных расширениях.
Обязательно внедряйте приобретенные знания в свои проекты и пользователи это оценят.
Источник: dwstroy.ru
Адаптируем меню под мобильные устройства
Всем привет! В предыдущей статье я показывал как сделать мобильное меню для сайта. Теперь пришло время выяснить как адаптировать обычное горизонтальное меню под маленькие разрешения экрана. В частности для планшетов и смартфонов. Помогут нам в этом CSS3 и медиа-запросы.
Итак, давайте представим, что у нас уже есть меню и нам нужно, чтобы оно было адаптированным. А пока, при уменьшении окна браузера, верстка начинает разъезжаться, что приводит в ужас моего внутреннего эстета.
Для начала нужно определить точку (ширину экрана), при достижении которой наше меню будет меняться на мобильное. Можно сразу установить max-width: 768px (именно такое разрешение имеют большинство популярных планшетов), но в моем случае смотрится довольно неплохо, поэтому постараемся вручную найти значение, при котором наш шаблон будет «ломаться». И это место находится на 593px. Теперь нужно написать CSS код для меню, которое мы собираемся адаптировать.
Но для начала нужно определиться, где оно будет располагаться, всплывать слева, справа или сверху. Будет логично, если оно будет появляться справа. Так и запишем. В HTML пропишем иконку гамбургера, overlay (затемнение фона) и крестик закрытия меню.
1 2 3 4 5 6 7 8 9 10
ul class=»mobile»> span>+/span> li>О нас/li> li>Услуги/li> li>Цены/li> li>Отзывы/li> li>Контакты/li> /ul> span class=»hamb»>☰/span> span class=»overlay»>/span>
1 2 3 4
} .mobile span, .hamb{ display: none; }
> .mobile span, .hamb
Код адаптивного меню
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
Проверяем на адаптив. Вроде не плохо. Теперь осталось добавить совсем немного jQuery, чтобы окончательно оживить наше меню. Код будет примерно таким же, как в прошлом уроке.
Итоговый результат смотрите на демо страничке.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
$(function(){ $(‘.hamb’).
click(function(){ $(‘.mobile’).animate({ right: 0 }); $(this).
hide(); $(‘.overlay’).fadeIn(); }); $(‘.mobile span, .overlay’).
click(function(){ $(‘.mobile’).animate({ right: -250 }); $(‘.hamb’).
show(); $(‘.overlay’).fadeOut(); }); });
На этом все. В завершении проверяем страницу через адаптиватор. Пишите в комментариях свои мысли по этому поводу.
Источник: serblog.ru