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

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

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

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

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

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

Мы начнем с HTML:

  
  
  
 Mobile Navigation Menu  
  
  
  
     
  
  
  
  
  
     
  
  Home   
  About   
  Contact

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');  
});

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

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

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

Ваш браузер может не поддерживать скрытие содержимого при нажатии в любом месте веб-страницы. Вы можете попытаться заставить это сделать это, используя цель события и цикл 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  var dropped = dropdowns[i];  
 if (dropped.classList.contains('display')) {  
 dropped.classList.remove('display');  
 }  
 }  
 }  
}

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

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

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

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

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

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

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

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

Делиться Делиться Твитнуть Эл. адрес 15 команд командной строки Windows (CMD), которые вы должны знать

Командная строка по-прежнему остается мощным инструментом Windows. Вот самые полезные команды CMD, которые должен знать каждый пользователь Windows.

Читать далее Похожие темы

Программирование
HTML
CSS
JavaScript
Советы по кодированию

Об авторе Идису Омисола(Опубликовано 94 статей)

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

Ещё от Idowu Omisola

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!

Нажмите здесь, чтобы подписаться

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

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

Подписывайтесь на нашу новостную рассылку