Как да направите мобилна лента с менюта с 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 е страстен за всичко умно технология и производителност. В свободното си време той играе с кодиране и превключва на шахматната дъска, когато му е скучно, но също така обича да се откъсва от рутината от време на време. Страстта му да показва на хората пътя около съвременните технологии го мотивира да пише повече.

Още от Idowu Omisola

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате

Как да създадете своето Togglable мобилно меню

Бъдете по -креативни при изграждането на вашия уебсайт

Абонирайте се за нашия бюлетин