Как создать мобильную панель меню с помощью HTML, CSS и JavaScript

Несомненно, вы можете создать переключаемое мобильное меню с помощью фреймворков CSS, таких как TailWind или BootStrap.

Но что за концепция стоит за этим? И как вы можете создать его с нуля, не полагаясь на эти CSS-фреймворки?

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

Как создать мобильное меню с возможностью переключения

Если вы еще этого не сделали, откройте папку проекта и создайте файлы проекта (HTML, CSS и JavaScript).

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

Мы начнем с HTML:

 Создайте три div для представления трехстрочной строки раскрывающегося меню 








 Добавьте сюда свою навигацию 


Дом
О
Контакт

CSS:

/ * Разграничение этого раздела предназначено исключительно для целей учебника * /





instagram viewer


раздел{ 
ширина: 800 пикселей;
высота: 600 пикселей;
маржа сверху: 50 пикселей;
маржа слева: 250 пикселей;
граница: сплошной черный 1px;
фон: # e6e3dc;
}
/ * размещаем контейнер div в вашем DOM * /
# toggle-container {
дисплей: сетка;
ширина: подходящее содержание;
маржа слева: 720 пикселей;
маржа сверху: 10 пикселей;
}
/ * Ставим три блока друг над другом. Затем установите для них высоту и ширину. * /
#раз два три{
фон: черный;
ширина: 30 пикселей;
высота: 3 пикселя;
маржа сверху: 5 пикселей;
} 
.toggle-content {
дисплей: нет;
маржа слева: 700 пикселей;
маржа сверху: 20 пикселей;
}
.toggle-content a {
дисплей: блок;
текстовое оформление: нет;
черный цвет;
размер шрифта: 30 пикселей;
}
.toggle-content a: hover {
цвет синий;
}
/ * Отображение экземпляра класса, созданного JavaScript в блоке * /
.displayed {
дисплей: блок;
}

Добавьте JavaScript:

var toggler = document.getElementById ("переключатель-контейнер");
var toggleContents = document.getElementById ("переключение-контент");
document.addEventListener ("клик", function () {
// Применяем классовую интентность к каждой навигации и устанавливаем отображение на переключение:
toggleContents.classList.toggle («отображается»);
});

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

Меню можно переключать, поэтому повторный щелчок по панели - или в любом месте страницы - скрывает навигацию.

Связанный: Стилизация элементов веб-сайта с помощью фонового градиента CSS

Ваш браузер может не поддерживать скрытие содержимого, когда вы щелкаете в любом месте своей веб-страницы. Вы можете попытаться заставить это сделать это, используя цель события и цикл JavaScript. Вы можете сделать это, добавив в свой JavaScript следующий блок кода:

// Добавить событие клика на вашу веб-страницу:
window.onclick = function (event) {
// Настраиваем на событие щелчка в строке меню, чтобы тело веб-страницы могло его отслеживать:
if (! event.target.matches ('# toggle-container')) {
var dropdowns = document.getElementsByClassName ("переключить-контент");
// Скрываем навигацию, перебирая каждую из них:
для (var i = 0; я var сброшено = выпадающие списки [я];
if (drop.classList.contains ('display')) {
drop.classList.remove ('дисплей');
}
}
}
}

Итак, вот краткое изложение того, что вы только что сделали: вы создали три строки, используя div тег HTML. Вы отрегулировали их высоту и ширину и разместили их в своей DOM. Затем вы дали им событие щелчка, используя JavaScript.

Связанный: Как сделать сайт: для начинающих

Вы устанавливаете начальное отображение вашей навигации на никто чтобы скрыть их при загрузке страницы. Тогда щелкнуть событие в трех строках переключает эту навигацию на основе экземпляра класса JavaScript (отображается). Наконец, вы использовали этот новый класс для отображения навигации с помощью CSS и JavaScript toggleContents метод.

Связанный: Тенденции неуморфного дизайна в HTML, CSS и JavaScript

Однако остальная часть CSS зависит от ваших предпочтений. Но тот, что в приведенном здесь примере фрагмента CSS, должен дать вам представление о том, как стилизовать ваш.

Будьте более креативными при создании своего веб-сайта

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

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

Как повторно использовать старое оборудование как профессионал

У вас в доме много старой техники? Узнайте, что с ним делать, в этом руководстве по утилизации!

Читать далее

Об авторе