Современная верстка сайта - Адаптивное меню на CSS
HTML-код
- Опубликовано: 16 апр 2018
- Мы продолжаем курс современная верстка сайта с нуля и в этом видео мы сделаем адаптивное меню. Я покажу как сделать сверстать адаптивное меню на чистом CSS без использования JavaScript. У многих начинающих слово адаптивное меню в верстке сайта вводит в ступор, действительно есть огромное множество способов как сделать адаптивное меню. И сегодня мы сверстаем простой вариант на сайт.
Группа вк: developblog
Ссылка на шаблон: developblog?w=wall-110...
Промокод на 3 месяца бесплатного хостинга по тарифу Мак-10 - WebDeveloper (вводить при регистрации на сайте billing.mchost.ru/order.php?h... ). Для активации бесплатного периода необходимо пополнить баланс на 100 руб.
Товарищи, те у кого не работает медиа запрос, не ставьте после значения 420px точку с запятой ;, он из за неё ругается))) И после оперции and надо ставить пробел and (max-width:420px)
thanks
спасибо, долго тупил, не мог понять в чем проблема)
Из-за одного пробела,дружище,спасибо большое)
добром) выручил)))
все равно не работает медиа запрос. в хроме при отображении "респонсив" или видов мобильников основное десктопное меню никуда не исчезает.
Лайк поставил вчера, сегодня набрал. Всё работает отлично! Спасибо за ясный, качественный урок!
Классный курс, многому научился! Спасибо!:)
Respect , курс классный, а главное понятный
Ну наконец после кода сразу стал показывать результат!
Ролики класс. Спасибо за работу.
Отличный урок, спасибо!
Спасибо! Скоро будет еще !
Очень молодец!!!)
Кстати, по поводу меню, которе написано капсом в html-файле: на работе за это бьют по рукам, капс для меню нужно указывать в стилях через text-transform: uppercase;
Зачем?
@@user-qs2zp5dq6w что бы в поисковике уёбищно не смотрелось, капс весь этот
Полностью согласен
Для тех у кого не появляется менюшка по клику , то проверьте на валидаторе ваш html ,
мне показало Warning: The navigation role is unnecessary for element nav.
From line 17, column 9; to line 17, column 31
>↩ ↩
Потом я заметил ошибку в css ,пробел перед классом main-menu в css(#menu-checkbox:checked + nav[role="navigation"](ТУТ пробел потом только .класс) .main-menu)
Было бы лучше, если бы выложил на какой-то тестовый домен. Чтоб наглядно можно было код посмотреть еще и в браузере. А вообще все круто и доходчиво. Спасибо огромное
У кого проблема с классом .main-menu, пропишите в head эту строку:
И ещё добавлю, что я бы .toggle-button:after заменил на .toggle-button:before, иначе CLOSE после открытия выходит за меню!
Спасибо бро мой эммит не вставляет эту мету
Спасибо за видео, за труд! Хотелось бы больше информативности, про свойства и атрибуты тегов, когда параллельно пишете код. Не все просто знаю, а видео не охота приостанавливать, чтобы копаться в спецификации. М.б. приглядитесь к подаче информации у Хауди Хо. Ну и в будущем вебку прикрутить!
Что такое паддинг и марджин не знаете? А вебка зачем?:)
У хауди не надо. У него тоже не плохие видео. Но если люди приходят сюда, это значит, что они хотят послушать другого человека.
@@SuprunAlexey Ничего не понял про псевдо-элемент :after и что вы делаете далее - content: attr() и там около 2 минут все не ясно. потому что я с такими приемами вообще не знаком. Но вы так просто об этом говорите и не углубляетесь как будто это всем известно.
Кроме того, в первом видео вы быстро вставили 4 тэга, а также w400 у вас преобразуется както в width=400px; каким-то сверх быстрым способом, но абсолютно не понял какой плагин вам в этом помог и как ним пользоваться.
@@Alex_Ramem_Music Это волшебство по имени Emmet. Автор данного видео учит приемам верстки, а не свойствам CSS, смотрите уроки по Emmet и CSS свойствам
Объясните пожалуйста как действует последний самый margin-right: -65px; для .header-container a
Я разные цифры поклацал, но так и не понял как именно оно работает, ставлю -5, чуть-чуть больше двигается лого, ставлю 5, так же немного. Как я понял двигается main-menu при нажатии кнопки МЕНЮ, опять же, ставлю 65, начинает меню наезжать на лого почти, ставлю -65, всё хорошо, ставлю -165 оно так же как и при -65, оно фиксируется с помощью того что мы в .main-menu выставили "position: relative;" и поставили отступы сверху и с права по дефолту? Хелп хд многобуков
Ой да ты красавчик.
Спс
Хорошие урок. Хотелось бы добавить: для адаптивности можно было бы поставить max-width: 1400px )
Хотел сначала фиксировано сделать
Недавно начал изучать верстку. Всю адаптацию для разных экранов делал на бутстрапе, вроде приловчился и выходит довольно легко. И только сейчас увидел как это делается на простом CSS. Так вот вопрос к экспертам: нужно ли изучать это или можно дальше не парясь пользоваться бутстрапом?
курс клевый
коротко и понятно
классно еще было бы если бы был разбор домашки
а то сделал и не понимаешь правильно или нет
идем дальше
.toggle-button{
text-align: center;
Команда не работает, меню прижато вправо.
Изменения происходят только когда прописываю margin в .toggle-buttom:after...
В чем может быть проблема?
По какой причине адаптивное меню при открытии не расширяет поле меню(header-container) как на видео, а открывается поверх, залезая при этом на фото, отчего становится абсолютно не читаемым?
Почему у меня меню скачет в нис когда открываю меню со стилями как в уроки(.toggle-button:after{
content: attr(data-open);
display: block;
})
меняю на before и все гуд
Меня одного волнует вопрос автозакрытия меню при клике на пустом месте без js?
#menu__checkbox:checked + nav[role="navigation"] .main__menu{
display: block;
}
}
Почему не работает?
(ПОООМОГИТЕ) Здравствуйте ,подскажите пожалуйста ,почему то меню не раскрывается ,не работает?
Menu появляется при уменьшении экрана ,а раскрываться не хочет на пункты(лишки)
все перепробывал уже даже и не знаю в чем ошибка.
пишу на scss вот код
#menu-checkbox:checked + nav[role="navigation"] .main-meny {
display: block;
}
все остальное работает
спасибо.
У меня просьба, если можно: лучше бы было ставить номера урокам. Так лучше ориентироваться тем, кому это интересно. Например: "Современная верстка сайта, урок 2 Адаптивное меню на CSS."
У меня когда нажимаю не МЕНЮ, тот белый квадратик оставляется но уже с галочкой почему он не пропал?
Полезный урок. Всегда был вопрос: где брать макеты, не конкретно этот, а в целом
Спасибо! В интернете или у знакомых дизайнеров)
Очень полезные уроки... а я пошел дальше учить golang...
Спасибо! Но ты их хоть смотришь? Верстку имею ввиду..
Когда есть время
А сколько у тебя таких курсов будет?
Что прописать чтобы меньше становился марджин ссилок при уменьшении окна
Доброго времени суток!
Повторил ваш код и столкнулся с проблемой.
После нажатия на кнопку "Menu", "Close" не появляется точно на ее месте, а съезжает влево пикселей на 30, сдвигая лого. При этом искажает сам логотип (сжимает с обеих сторон).
В чем может быть проблема?
у меня((
Eskel Как решили? У меня тоже такая проблема
Это происходит из-за разной ширины отображения Menu и Close элемента nav, решил установкой width: 85px; для nav в медиа запросе.
Очень крутое видео. Знал (из теории) про возможность добавлять интерактивность различным элементам на странице в зависимости от значения чекбокса без js, но как это можно было применить на практике не очень понимал. Спасибо!
Кто из 2020 ставь лайк!))
Лайк
@@SuprunAlexey Очень хороший и качественный материал! Спасибо вам!))
Всегда пожалуйста 😇
если у кого то не работает @media screen and(max-width: 420px) ПРоверьте на валидаторе. Мне он очень помог.
почему когда нажимаю на menu. она не работает
Почему ты опять вернулся на sublime text ? Почему не пишеш в vs code ? Чем то не понравилось или какая другая причина?
Почему после обновления меню автоматически не закрывается?
Почему @media screen and (max-width: 420px) у меня в ФФ срабатывает точно на 420px, а в хроме на 378px!
Аналогичная проблема
Единственное что не понятно : почему нельзя сделать бургер меню? просто бургер меню без танцов с бубнами и label? У этого способа есть свои плюсы?
у кого не открывается меню проверьте всё ли так с:
@media screen and ( max-width: 420px){
.header-container{
width: 100%;
display: flex;
justify-content: space-around;
}
.main-menu{
display: none;
}
.main-menu li{
width: 100%;
display: block;
font-size: 12px;
}
.main-menu a{
display: block;
padding: 8px;
}
.toggle-button {
text-align: center;
display: block;
cursor: pointer;
color: black;
}
.toggle-button:after{
content: attr(data-open);
display: block
margin-top: 20px;
}
#menu-checkbox:checked + nav[role="navigation"] .main-menu{
display: block;
}
#menu-checkbox:checked + nav[role="navigation"] .toggle-button:after{
content: attr(data-close);
Что не так с этим кодом, он у мня не работает:
#menu-checkbox:checked + nav[role="navigation"] .main-menu {
display: block;
}
Сработало, оказывается дело было в for="menu" (атрибут label). А нужно было "menu-checkbox".
Кстати, понял это только после проверки валидатором. На заметку если сами не можете найти смело отправляйте на валидацию: validator.w3.org не прогодайте).
#menu-checkbox:checked + nav[role="navigation"] .main-menu {
display: block;
}
Не работает несмотря на то,что переписано символ в символ. Кто-нибудь может помочь?
Скопировал твой код, вставил, все работает, видать синтаксическую ошибку ты где-то допустил в html.
надо закрыт тег ,тоже забыла
Мне помог валидатор. Нужно всегда использовать валидатор. ПРоверте html и css на валидаторе
пробел перед .main-menu {display: block;}
Подскажите пожалуйста, не работает
.main-menu {
display: none;
}
c id тоже не работает
что делать?
Нашел ошибку, @media screen and ( max-width: 420px)
,было так and(max
спс большое, помог
Почему про js скрипт промолчал?
так же встретился с проблемой
@media screen and(max-width: 420px)
в этом моменте код не работает, хотя код символ в символ
до ужаса смехотворная проблема, но я над ней бился дня два. Поставьте пробел после and) это ведь не функция,а логический оператор
Тоже с ней столкнулся, благо не два дня потратил DD
таже проблема, при 980px еще работает, а при 979 уже нет. В чем дело?
Тоже столкнулся с этой проблемой, не помогал ни пробел, ничего. В хроме не работало, а в ФФ работало. Пробуйте в добавить сразу просле открывающего тега, мне помогло
Vallife Studio
спс помог
С помощью комментариев получилось сделать аналогично, как у автора.
Радует что хоть как то, а написать самому не?
Написать самому что именно?
Написать код по уроку в видео
Как видишь по комментариям, не у меня одного были трудности с написанием кода по видео. Если что к тебе претензий не имею, просто говорю, что сложно было)
@@mishasv1490 пздц сложно за пол часа переписал весь код, одну ошибку допустил по своей тупости пробел не поставил в css. А трудности у людей в большинстве случаев из за невнимательности.
ДОБРЫЙ, у меня datta-close не отображается. Menu выходит, close нет
проверь правильность написания слова CLOSE в строке:
label for="menu-checkbox" class="toggle-button"
data-open="MENU" data-close="CLOSE" onclick
У меня тоже так было. Переглядел еще раз и нашел пропущенную букву))))
Нужна помощь, когда меню открываю, у меня ссылки не в столбик, а в строчку, как исправить?
что то где то ты упустил, перепроверь код css в видео все верно показано
Не хочет подхватывать в браузере, постоянно нужно сохранять, F5, контролировать чтобы style.css обновился, ищешь ошибку раз по десять, а в итоге оказывается, что в браузере не обновился css. Может есть какой плагин или еще какой метод, чтобы все обновлялось как в видео?
Так я тоже f5 всегда нажимаю:) ну а так есть, посмотрите мое видео про плагины саблайм текст
просто бывает находишь ошибку, типа childe вместо child исправляешь ее, сохраняешь файл, запускаешь отладчик в браузере, смотришь - а там по прежнему с ошибкой, и F5 не помогает
Странно, в простом html файле?????
в css, правда может это только в китайском maxthon, вроде в хроме тоже глючило, но в китайском я чаще бываю
сегодня все делал в хроме - такая же фигня, немного ошибся в размерах с картинками, первая была 250х208, остальные 250х287, передалал, сделал все одинаковыми, сохранил файлы, F5 - не помогает, в отладк показывает что размеры прежние, стопнул опен сервер - помогло (именно стоп, перезагрузка - желтый флажок - не помогала)
togglebutton не срабатывает. кнопка menu вообще не появляется. ???
Решили проблему?
Все отлично, но блин меню не открывается МЕНЮ, проверил на валидность на W3C все в идеале, код проверил, открывал в пяти браузерах, я в панике)) Где собака зарыта
B сука нашел, пробелы между nav и [navbgation], вот жесть, хорошо хоть час ушеел))))
Спасибо за уроки
Главное что нашёл! Часто бывает блоки где то не закрывают или местами меняют
@@SuprunAlexey Я вообще целый день искал ошибку в css,а я оказывается ошибся в html в lable в for вместо menu-checkbox,написал просто checkbox,главное еще удивлялся почему если оставить квадрат с галочкой и кликать на него все работает,а на текст хоть обкликайся не работает, при том курсор меняется и все норм.
Можно ссыдку на первый урок, где делали это меню?
Откройте плейлисты у меня на канале
@@SuprunAlexey уже нашла и сделала)) спасибо)))) очень интересно и доступно)
А можно вместо слов MENU CLOSE вставить background image. Бургер меню и крестик?
Блин меню не работает пж помогите
код идентичный но в мобильной версии при нажатии на MENU и CLOSE оно прыгает
Где то ошибка
@@SuprunAlexey извиняюсь , уже нашел....указал для header-container не padding: 27px 6px;. A align-items: center; мне показалось так проще будет...но в мобильной версии из за этого все прыгали..
Народ подскажите что за фигня,пишу @media screen and и так далее а редактор не отсвечует не работает,что может быть?
проверь пробелы. Должно быть так:
@media screen and (max-width: 420px) {
}
еще может быть, если ты работаешь например на маленьком экране (ноутбук), при уменьшении окна браузера оно не достигает величины 420px. Тут либо увеличь параметр до 600-700px, либо перейди в режим разработки и выбери эмуляцию мобильного девайса.
Добрый день уважаемые,
на сегодняшний день по примеру кода автора, чек бокс на слово Menu не меняется,
но работает при уменьшении браузера и когда на него нажимаешь выводит и убирает основное меню.
Подскажите как это (чек бокс поменять на Menu) в 2020 реализуется?
Переписал по новой код. В итоге humanerror... у меня не работало потому что в html не правильно написал toggle button, а в css пропустил момент когда для чек бокса прописывали отображение none. В общем будьте внимательны и будет вам счастье :) ...
Для этого урока код сss: pastebin.com/N43uzAV6 - доступен 1 год от 06.05.2020
Для этого урока код html: pastebin.com/XCiJ2ApR - доступен 1 год от 06.05.2020
Не появляется кнопка menu, что делать?
Проверь синтаксис здесь
.toggle-button:after{
content: attr(data-open);
display: block;
}
Помогло, спасибо.
Получилось? Перепроверял все несколько раз, не появляется
@@mishasv1490 что вы исправили? Перепроверял несколько раз, не работает
Можете макет верстать php
На 8:12 не отображается меню, ошибок не заметел, 4 раза проверил код но всё равно не получается. Что делать?
В @media после "and" пробел поставь
@@user-fc2jb3rr8i не помогает
@@svyatavia перепроверь код
@@user-fc2jb3rr8i я уже разобрался , там в html ошибка была, а я css целый день проверял.
У меню li margin-right: 63px; у последнего не сброшен, по этому шапка косо смотрится.
Это да! Вы у себя сбросьте и отлично будет!
Web Developer Blog, я смотрю просто, я ничего не хочу сбрасывать))
Не верстаешь у себя?
Web Developer Blog, нет, смотрю просто, авось чего для себя интересного подмечу)
Можете помочь я все написал как он но у меня не получилось поставить MENU и CLOSE Ребят кто может скинуть свой Index ПОЖАЛУЙСТА ОТВЕТЬТЕ КТО МОЖЕТ СКИНУТЬ Я ЕМУ ДАМ СВОЙ ТГ ЧТОБЫ ВЫ МОГЛИ ОТПРАВИТЬ МНЕ
у кого подобное было? при суженнии окна до менее 420 строка меню остается, вместе с новой кнопкой меню) и при уменьшении экрана до 357 теряется лого.
www.picshare.ru/view/10254768/
А разве не лучше адаптивную менюшку через js сделать?
со стороны оптимизации лучше через сss,а так лучше уметь делать и так и так
*2:22* _А_ -ЧТО- *ТАК МоЖнО* БЫЛО ?
нихрена не работает.... меню не выскакивает
В коде поройся, может там ошибка
jQuery подключил?
блин, поначалу я вдохновился, подумал, интересно, сейчас забацаю прикольную страничку, но у автора много недочётов (по-своему прикольно, теперь я понимаю важность meta viewport... и не буду больше забывать указывать этот метатег) но на обучающем канале... меню поплыло, если на данном этапе проверять адаптивность применяя Ctr+Shift+M , а не как автор таская инструменты разработчика. В общем энтузиазм пропал. Может и дойду до конца - благо видео короткие, особенно если рекламу проматывать - но с вниманием к мелочам очень много времени на недочёты автора тратится.
у меня экран 1366 px, и чо делать?
чел, ты гений блядь.
@@maxgold1539 а что не так в моем вопросе? ведь эту вепстку адаптивной назвать нельзя. ккк я выставлю 1400, если у меня экран меньше. так верстать нельзя, надо пользоваться viewport
@@systemconnect3096 в браузере ctrl +
@@systemconnect3096 у меня вообще 1280 x 1024 но почему-то всё работает
а че так мало реклам? Добавь ещё по 5 в 1 мин
По 5 это уже будет слишком
Ну мало рекламы, хочу ещё :)
А уроки доходчивые!
.main-menu {
position: relative;
top: 30px;
right: 115px;
}
позицию нужно задать absolut, и top: 100px, а то плывет все
position: relative;
при релетив у меня плывет все
Замид Рзаев +
.toggle-button:after стоит заменить на .toggle-button:before, иначе CLOSE после открытия выходит за меню, что логично! Думаю в этом еще была Ваша проблема.
Я думал, что знаю все аттрибуты html...
не работает медиазапрос , пошарился в комментариях , ничего не помогает , сто раз все обновлял , сто раз переписывал , сто раз перепроверял , бесполезно, вот мой код : @media screen and (max-width:420px) {...} , все равно не работает.
Решили проблему? Подскажите пожалуйста, как?
как решили проблему?
@@alinamoskalenko813 быть честным : я до сих пор не понимаю как работает эта магия , но сейчас все в порядке , и , возможно , лично моя проблема была в том , что я забыл кое-где поставить ' ; '
Я решил. у меня была написано неправильно role и в сss пропущен ;
Мне помог валидатор. Нужно всегда использовать валидатор. ПРоверте html и css на валидаторе
а исходный код где найти?
HOME
PORTFOLIO
BLOG
ABOUT AS
CONTACT
*{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
}
li{
list-style: none;
display: flex;
}
body{
font-family: 'Poppins', sans-serif;
}
header{
background: #f6f6f6;
padding: 22px 0;
}
.header__container{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.header__container a{
color: #000;
font-size: 16px;
margin-right: 63px;
padding: 27px 6px;
}
.header__container a:hover{
background: #ffea00;
}
.header__container ul{
display: flex;
}
nav{
margin-top: 20px;
}
#menu-checkbox{
display: none;
}
ul{
display: flex;
}
nav{
margin-top: 20px;
}
@media screen and ( max-width: 420px){
.header__container{
width: 100%;
display: flex;
justify-content: space-around;
}
#main-menu {
display: none;
}
#main-menu li{
width: 100%;
display: block;
font-size: 12px;
}
#main-menu a{
display: block;
padding: 8px;
}
.toggle-button{
text-align: center;
display: block;
color: #000;
}
toggle-button:after{
content: attr(data-open);
/*display: block;*/
}
/*#menu-checkbox:checkbox + nav[role="navigator"] #main-menu{
display: block;
}
#menu-checkbox:checkbox + nav[role="navigator"] .toggle-button:after{
content: attr(data-close);
}
.header__container a{
margin-right: -65px;
}
#main-menu{
position: relative;
top: 30px;
right: 115px;
}*/
}
90% зря поставил. Ты ж не только для своего ноутбука верстаешь
Нафиг столько уроков про адаптивное меню?
постоянно всплывает реклама неприятно и не удобно вообще!!!!!!!!
Мда, а ведь на таких уроках учатся много новичков и потом в итоге получается куча гавно-верстальщиков и говно-кода. Для тех кто в танке... Качайте курсы вёрстки от современных Школ онлайн образования, не буду говорить каких, что бы не рекламить, погуглите.
Подскажи, пж, где можно посмотреть пример современной верстки? По-моему, материал изложен довольно доходчиво. Использован интересный подход в наборе свойств. Ничего лишнего, но вполне функционально. Возможно есть стандарт адаптивной верстки?
awwwards.com
Спасибо
Не согласен,все отличие современных школ в том что там снимают в стиле 3 чаового вебинара ,где 1.5 часа в носу ковыряются ,тут все кратко и по делу,а если ты не понимаешь того что делает автор ,то скорее всего просто напросто не смотрел его курсов по этим основам.
отвратительный канал. в 12 минутном видео минута рекламы от автора и аж 8 (!) вставок рекламы. 8 !
adblock and 5 taps --> -->
Да, ужасный человек. Пилит бесплатный контент и хочет чтобы его труд хоть сколько-нибудь монетизировался. Где это видано-то!
🤣🤣🤣🤣🤣 даже смотреть смысла нет, кроссбраузерность зачем да?:) адаптив с первой строки прям :) треш в корзину весь курс короче
cделано годно, но отвратительно со стороны дизайна
у меня не работает строка
.main-menu {
display: none;
}
Но если меняю класс .main-menu на айди #main-menu ( и в html соответственно) все работает. Почему класс не работает ?
В head
не работает
у меня тоже такая проблема
Я сменил класс на id и все равно не работает
@@muhammadrizoalimuhammad пробел перед классом main-menu в css(#menu-checkbox:checked + nav[role="navigation"] .main-menu)