Профессиональная верстка сайта - адаптивное меню на чистом html css

Мы начинаем новый курс уроков верстка сайта с нуля профессионально. В данном курсе для начинающих верстальщиков мы рассмотрим все базовые концепции верстки адаптивных макетов для разных размеров экрана. Это лучший курс для начинающих для того чтоб разобраться с нуля как верстать, как верстать быстро и адаптивно. В первом видео я расскажу про инструменты которые необходимо установить это Chrome и VSCode а так же Photoshop. Далее мы начнем верстку адаптивного меню на чистом html css, что облегчит работу для начинающих и ускорит разработку.

Зарегистрируйся прямо сейчас и по промокоду Blog10x Вы получите скидку на все услуги кроме заказа доменов

[SuprunAlexey]

Иконка из меню для ленивых =)
<span class="toggle">☰</span>

[vpjtzpq]

Вот. Это контент. Ради этого на тебя и подписываются, а не для «вода ради рекламы». Всё чётко, по делу, без лишней воды. Лайк не задумываясь.

[whatsunderisabove]

Хорошо что делаете много подобных уроков, есть возможность укрепить и расширить имеющиеся знания.

[shampun]

Я давно скитаюсь по просторам ютуба и хочу сказать, что такие видео редкость ! Коротко и по факту без водищи.
Ставлю сердечко

[indigolight]

ШОК КОНТЕНТ. ОДНОЗНАЧНО ЛАЙК. ВСЕ ДОСТУПНО И ПОНЯТНО. Меня прям шокирует как сто строк кода могут сделать такую красоту. А это только начало!!! Эдем, 23 годика

[hollow_n]

Узнал о тебе только что, но сразу захотел подписаться, уже понятно, что ты только по делу говоришь. Наконец-то что-то новое.

[grodstrova]

Приятно видеть такой контент на youtube, не всегда в платных курсах такое увидишь! Ну что-же пожалуйста продолжай в том же духе, Годнота больше нечего сказать.

[lgtsgkq]

Спасибо большое!!! Многому научился благодаря твоей работе. Продолжай делать годноту

[iqerqvl]

Я в шоке!!!Я 4 часа не мог найти ошибки(Своей)Но!Все работает!Ребята, просто внимательней пишите)Автор, спасибо тебе +подписка и лайк тебе!Спасибо за работу)

[xdmvmkc]

тот редкий случай, когда ставишь не большую. а меньшую скорость воспроизведения, чтобы уловить все))

[icansee]

Быстро, четко, понятно, продолжай так же

[denishorkavyi]

найс контент, вот бы этот макет разжевать со всех сторон фронтенда ( в будущем добавить всякие штучки с джс и показать выгрузку на хост) лайк однозначно

[dmitry_kolom]

Спасибо большое за такие видео, в видео разок ошибся, код работает все хорошо.

[dinalytvynenko]

Отличное видео, спасибо большое! Было бы круто, если б этот макет в итоге дополнили JavaScript-ом так же для начинающих. Спасибо!

[vitaliidrapaliuk]

круто, спасибо за такой крутой контент)

[vjxgznz]

Ну шо, братья славяне, как всегда топ

[srwltfl]

Хорошее видео. Все толково и понятно. Набрал все в ВСКоде, все работает. Начал разбирать действие каждого тега, появился вопрос:
Какую роль играет align-self: center; в .menu li a{ - перестраховка, лишний тег?
Да, кстати, background там же реально подсвечивает красным, в брузере все работает.
Заранее благодарю за ответ.

[STELLS]

Все очень круто и информативно. Но ток конечно временами быстровато бывает

[kiks_ks]

Подскажите, что не так, пожалуйста
@media screen and (max-width: 800px){
.toggle{
clear: both;
display: block;
text-align: center;
font-size: 18px;
line-height: 40px;
width: 100%;
color:
background: #ff0090c2;
transition: all .1s linear;
}
.toggle:hover{
background: #ff009046;
width: 100%;
}
#checkbox-menu:checked + label .touch li {
opacity: 1;
visibility: visible;
transition: all .7s linear;
}
#checkbox-menu:checked + label .touch {
height: 500px;
}
.menu{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 0;
transition: height .3s linear;
}
.menu li{
display: flex;
align-self: center;
width: 95%;
opacity: 0;
visibility: hidden;
}
.menu li a{
width: 95%;
text-align: center;
align-self: center;
align-content: center;
}
}

[turisti-vlog]

Благодарю за твою деятельность, очень помогаешь в изучении верстки!
Не хочет работать мобильное меню
<nav>
<input type="checkbox" id="checkbox-menu">
<lable for="checkbox-menu">
<ul class="menu touch">
<li><a class="logo" href="#">CLUB</a></li>
<li><a href="#">Home</a></li>
<li><a
<li><a href="#">Service</a></li>
<li><a class="contacts" href="#">Contacts</a></li>
<li><a href="#">Galery</a></li>
<li><a href="#">Join Us</a></li>
</ul>
<span class="toggle">☰</span>
</lable>
</nav>


main.css
#checkbox-menu:checked + lable li{
opacity: 1;
visibility: visible;
transition: all .7s linear;
}

#checkbox-menu:checked + lable .touch {
height: 350px;
}