CSS Navigation Menu with hover effect using only HTML & CSS | Меню для сайта

В этом видео разберем, как сделать современное меню для сайта с плавным эффектом скольжения при наведении (Hover Effect), используя только чистый HTML и CSS. Вы узнаете, как сверстать шапку сайта, быстро выровнять элементы через Flexbox и настроить «умную» фоновую анимацию с помощью позиционирования, свойств transition и CSS-селекторов :nth-child() и ~ без использования JavaScript. 👉 ТАЙМКОДЫ 👈 00:00 - Введение: демонстрация меню и эффекта скольжения. 00:42 - Подготовка файлов (index.html, style.css) и базовая структура body. 01:05 - Верстка шапки: создание тега header, добавление логотипа и ссылок навигации nav. 01:44 - Создание вспомогательного блока Animation для будущей фоновой плашки. 02:10 - Стилизация body: добавление темного фонового цвета. 02:39 - Настройка хедера: фиксированное позиционирование (position: fixed) и внутренние отступы. 03:08 - Выравнивание элементов логотипа и меню с помощью Flexbox (justify-content: space-between). 03:45 - Стилизация контейнера навигации nav, скругление углов и позиционирование. 04:47 - Стилизация ссылок меню, выравнивание по центру текста и управление слоями через z-index. 05:35 - Настройка класса animation: абсолютное позиционирование фоновой плашки и плавность transition. 06:20 - Работа с псевдоклассами nth-child для задания individualной ширины пунктов меню. 07:28 - Логика фиксации активного пункта Home и обработка первого наведения. 08:22 - Знакомство с ресурсом Team Colors для подбора стильных цветов. 09:35 - Настройка эффекта перемещения и смещения (left) для второго пункта меню (About). 10:37 - Добавление анимации и смещения для третьего пункта меню (Services). 11:14 - Применение цвета и смещения фоновой плашки для четвертого пункта (Portfolio). 12:02 - Стилизация и расчет ширины для последнего пункта меню (Contact). 12:35 - Финальное тестирование работы навигации и подведение итогов урока. 👉 ПЛЕЙЛИСТЫ И КУРСЫ 👈 📚 Полный курс HTML с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UytoWbG_xrleyom6NfiRLBDE 📚 Полный курс CSS с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UyuznEWwwMmvjpG9V2GxG1DQ 🟦 Полный курс Flexbox CSS: 👉 https://www.patreon.com/collection/1320002 📚 Полный курс JavaScript с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UyvBaTS0blaMBQYJb5GLaMXB 🚀 JS Практика - проекты с нуля: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9Uyv9Xo2A-WCT0D8c1Ret6bVu 🌐 Уроки по хостингу - запуск сайта: 👉 https://www.youtube.com/playlist?list=PLIEunNjc9UyvrhTE4KC5sJK_NoeUX8ZMU 📦 Исходники кода (Patreon): 👉 https://www.patreon.com/c/topchiydev/membership 👉 СОЦИАЛЬНЫЕ СЕТИ 👈 💬 Telegram канал: 👉 https://t.me/TopchiyDev 🎓 Patreon автора: 👉 https://www.patreon.com/TopchiyDev #html #css #frontend #webdesign #navigationmenu #hovereffect #cssanimation #flexbox #webdevelopment #beginners #programming #coding #uidesign