Как создать мобильную панель меню с помощью HTML, CSS и JavaScript
Несомненно, вы можете создать переключаемое мобильное меню с помощью фреймворков CSS, таких как TailWind или BootStrap.
Но что за концепция стоит за этим? И как вы можете создать его с нуля, не полагаясь на эти CSS-фреймворки?
Выполнение вышеуказанного самостоятельно дает вам полный контроль над настройкой. Итак, без лишних слов, вот как создать переключаемое мобильное меню, используя предпочитаемый вами язык программирования.
Как создать мобильное меню с возможностью переключения
Если вы еще этого не сделали, откройте папку проекта и создайте файлы проекта (HTML, CSS и JavaScript).
Ниже вы увидите примеры кода, который вам нужен для всех трех типов. А если вы еще этого не сделали, подумайте о загрузке этих приложений, чтобы изучить код, прежде чем читать дальше.
Начнем с HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mobile Navigation Menu</title>
</head>
<body>
<section>
<!-- Create three divs to represent the three-line dropdown menu bar -->
<div id="toggle-container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<!-- Add your navigations here -->
<div id="toggle-content" class="toggle-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</section>
</body>
CSS:
/*This section demarcation is solely for the purpose of the tutorial*/
section{
width: 800px;
height: 600px;
margin-top: 50px;
margin-left: 250px;
border: solid black 1px;
background: #e6e3dc;
}
/*position the divs container in your DOM*/
#toggle-container{
display: grid;
width: fit-content;
margin-left: 720px;
margin-top: 10px;
}
/*Stack the three divs above each other. Then set a height and width for them.*/
#one, #two, #three{
background: black;
width: 30px;
height: 3px;
margin-top: 5px;
}
.toggle-content{
display: none;
margin-left: 700px;
margin-top: 20px;
}
.toggle-content a{
display: block;
text-decoration: none;
color: black;
font-size: 30px;
}
.toggle-content a:hover{
color: blue;
}
/*Display the class instance created by JavaScript in block*/
.displayed{
display: block;
}
Добавьте JavaScript:
var toggler = document.getElementById("toggle-container");
var toggleContents = document.getElementById("toggle-content");
document.addEventListener("click", function(){
//Apply a class intance to each navigation and set display to toggle:
toggleContents.classList.toggle("displayed");
});
Вот как выглядит рабочий результат, когда вы щелкаете по строке меню:
Меню можно переключать, поэтому повторный щелчок по панели – или в любом месте страницы – скрывает навигацию.
Ваш браузер может не поддерживать скрытие содержимого, когда вы щелкаете в любом месте своей веб-страницы. Вы можете попытаться заставить это сделать это, используя цель события и цикл JavaScript. Вы можете сделать это, добавив в свой JavaScript следующий блок кода:
//Add a click event to your webpage:
window.onclick = function(event) {
//Target the click event on the menu bar to allow the webpage body to track it:
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName("toggle-content");
//Hide the navigations by looping through each of them:
for (var i = 0; i < dropdowns.length; i++) {
var dropped = dropdowns[i];
if (dropped.classList.contains('display')) {
dropped.classList.remove('display');
}
}
}
}
Итак, вот краткое изложение того, что вы только что сделали: вы создали три строки, используя тег div HTML. Вы отрегулировали их высоту и ширину и разместили в DOM. Затем вы дали им событие щелчка, используя JavaScript.
Вы устанавливаете начальное отображение ваших переходов на none, чтобы скрыть их при загрузке страницы. Затем событие щелчка в трех строках переключает эту навигацию на основе экземпляра класса JavaScript ( отображается ). Наконец, вы использовали этот новый класс для отображения навигации с помощью CSS и метода JavaScript toggleContents .
Однако остальная часть CSS зависит от ваших предпочтений. Но тот, что в приведенном здесь примере фрагмента CSS, должен дать вам представление о том, как стилизовать ваш.
Будьте более креативными при создании своего веб-сайта
Создание визуально привлекательного веб-сайта требует творческого подхода. А удобный веб-сайт с большей вероятностью привлечет вашу аудиторию, чем простой.
Хотя здесь мы показали вам, как создать настраиваемое меню навигации, вы все равно можете выйти за рамки этого и сделать его более привлекательным. Например, вы можете анимировать отображение навигации, придать им цвет фона и многое другое. И что бы вы ни делали, убедитесь, что ваш веб-сайт использует лучшие методы дизайна и макеты, удобные для пользователей.