В этой статье мы разберём как сделать мобильное меню на HTML, CSS и JavaScript, вы увидите что это очень просто.
Также перед прочтением, посмотрите статьи
«Меню навигации на HTML и CSS» и
«Как сделать выпадающее меню на HTML и CSS».
Логика программы:
Для начала разберём логику программы, а суть заключается в том, что при нажатие на кнопу, будем менять класс и тем самым показывать меню, по умолчанию оно скрыто.
HTML:
Сначала создадим HTML файл, ну в нём всё очень просто.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <nav> <ul class="menu"> <li><a href="#">Главная</a></li> <li><a href="#">Галерея</a></li> <li><a href="#">О себе</a></li> </ul> <div class="btn-menu"></div> </nav> <main> 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. </main> |
Здесь мы создаём меню с помощью тега nav и в main добавили рыбный текст, что бы явно было видно что меню можно открыть везде, не зависимо от скролинга.
Также внутри nav, вы можете заметить div с классом btn-menu, это как раз и будет наша кнопка.
CSS:
Теперь перейдём CSS.
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 41 42 43 44 45 46 47 48 49 50 51 | html, body { margin: 0; padding: 0; } main { padding: 20px; font-size: 7vw; } nav { position: fixed; font-size: 7vw; } ul { position: fixed; list-style: none; padding: 0; width: 600px; height: 100vh; background-color: green; margin-top: 0; left: -600px; transition: 500ms; } .btn-menu { width: 100px; height: 100px; position: relative; background-color: red; } li { padding: 10px 0; text-align: center; } li a { color: white; text-decoration: none; } .show-menu { left: 0; } div.btn-show-menu { background-color: blue; } |
Разберём этот файл, в самом его начале мы убираем все отступы у документа, что бы меню выглядело красивее, потом настраиваем отображение текста в main, но оборот добавляем внутренние отступы.
Потом переходим к настройки тега nav, там просто делаем позиционирование fixed, это нужно что бы мы всегда видели меню, дальше самое важное, это настройка ul, дле него меняем цвет и самое главное тоже делаем fixed и высоту 100vh, это нужно что бы элемент отображался во всю высоту экрана, также делаем позицию -600px или просто минус его ширина, для того чтобы элемент не виден на экране а был скрыт слева, ну и transition: 500ms, для плавного показа.
Дальше просто добавляем стили чтобы более красивого отображение, но последние два это классы для замены, первый, для показа меню, в нём позиция слева равна нулю, а во втором просто меняем цвет для кнопки.
JavaScript:
Последние что осталось посмотреть, это код на языке JavaScript, но он не большой и очень простой.
1 2 3 4 5 6 7 8 9 10 11 12 | // Берём кнопку let btnMenu = document.querySelector(".btn-menu"); // Берём меню let ulMenu = document.querySelector(".menu"); // Обработка события нажатия на кнопку btnMenu.addEventListener("click", function () { // Переключаем класс меню ulMenu.classList.toggle("show-menu"); // Переключаем класс кнопки btnMenu.classList.toggle("btn-show-menu") }) |
Тут сперва берём элемент меню и кнопки, для работы с ними, потом делаем обработчик события клик на кнопку, там меняем классы, вот что получилось.
То есть всё работает так как надо, но выглядит не очень, потому что это только основа, вы сможете скачать эту программу и модернизировать так, как вам надо.
Вывод:
В этой статье вы прочитали как сделать мобильное меню для сайт на HTML, CSS и JavaScript, и как видите всё очень просто, вы можете скачать файлы и модернизировать их как вам надо
Подписываетесь на соц-сети:
Оценка:
Загрузка...