Как сделать мобильное меню

Метки: / / / /

В этой статье мы разберём как сделать мобильное меню на HTML, CSS и JavaScript, вы увидите что это очень просто.

Также перед прочтением, посмотрите статьи
«Меню навигации на HTML и CSS» и
«Как сделать выпадающее меню на HTML и CSS».

Логика программы:

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

HTML:

Сначала создадим HTML файл, ну в нём всё очень просто.

Здесь мы создаём меню с помощью тега nav и в main добавили рыбный текст, что бы явно было видно что меню можно открыть везде, не зависимо от скролинга.

Также внутри nav, вы можете заметить div с классом btn-menu, это как раз и будет наша кнопка.

CSS:

Теперь перейдём CSS.

Разберём этот файл, в самом его начале мы убираем все отступы у документа, что бы меню выглядело красивее, потом настраиваем  отображение текста в main, но оборот добавляем внутренние отступы.

Потом переходим к настройки тега nav, там просто делаем позиционирование fixed, это нужно что бы мы всегда видели меню, дальше самое важное, это настройка ul, дле него меняем цвет и самое главное тоже делаем fixed и высоту 100vh, это нужно что бы элемент отображался во всю высоту экрана, также делаем позицию -600px или просто минус его ширина, для того чтобы элемент не виден на экране а был скрыт слева, ну и transition: 500ms, для плавного показа.

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

JavaScript:

Последние что осталось посмотреть, это код на языке JavaScript, но он не большой и очень простой.

Тут сперва берём элемент меню и кнопки, для работы с ними, потом делаем обработчик события клик на кнопку, там меняем классы, вот что получилось.

Готовое меню на HTML и CSS

То есть всё работает так как надо, но выглядит не очень, потому что это только основа, вы сможете скачать эту программу и модернизировать так, как вам надо.

Вывод:

В этой статье вы прочитали как сделать мобильное меню для сайт на HTML, CSS и JavaScript, и как видите всё очень просто, вы можете скачать файлы и модернизировать их как вам надо

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую:

55058653