Jak zrobić mobilny pasek menu za pomocą HTML, CSS i JavaScript?

Niewątpliwie możesz stworzyć przełączalne menu mobilne za pomocą frameworków CSS, takich jak TailWind lub BootStrap.

Ale jaka jest za tym koncepcja? A jak możesz stworzyć go od zera bez polegania na tych frameworkach CSS?

Wykonanie powyższego samodzielnie zapewnia pełną kontrolę nad dostosowywaniem. Tak więc, bez zbędnych ceregieli, oto jak stworzyć przełączalne menu mobilne przy użyciu preferowanego języka programowania.

Jeśli jeszcze tego nie zrobiłeś, otwórz folder projektu i utwórz pliki projektu (HTML, CSS i JavaScript).

Poniżej zobaczysz przykłady kodu, którego potrzebujesz dla wszystkich trzech typów. A jeśli jeszcze tego nie zrobiłeś, rozważ pobranie te aplikacje do nauki kodu przed czytaniem.

Zaczniemy od 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;  
 }

Dodaj JavaScript:

jak wymazać dysk twardy windows 10

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

Oto jak wygląda działający wynik po kliknięciu paska menu:

Menu można przełączać, więc ponowne kliknięcie paska — lub w dowolnym miejscu na stronie — powoduje ukrycie nawigacji.

Związane z: Stylizuj elementy witryny za pomocą gradientu tła CSS

Twoja przeglądarka może nie obsługiwać ukrywania treści po kliknięciu w dowolnym miejscu na stronie internetowej. Możesz spróbować to wymusić, używając celu zdarzenia i pętli JavaScript. Możesz to zrobić, dodając następujący blok kodu do swojego 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');  
 }  
 }  
 }  
}

Oto podsumowanie tego, co właśnie zrobiłeś: Utworzyłeś trzy linie za pomocą div tag HTML. Dopasowałeś ich wysokość i szerokość oraz umieściłeś je w DOM. Następnie nadałeś im zdarzenie kliknięcia za pomocą JavaScript.

Związane z: Jak zrobić stronę internetową: dla początkujących

Ustawiasz początkowe wyświetlanie nawigacji na Żaden aby ukryć je po załadowaniu strony. A później Kliknij zdarzenie w trzech wierszach przełącza te nawigacje w oparciu o instancję klasy JavaScript ( wystawiany ). Wreszcie, użyłeś tej nowej klasy do wyświetlania nawigacji za pomocą CSS i JavaScript toggleContents metoda.

Powiązane: Trendy projektowania neumorficznego w HTML, CSS i JavaScript

Reszta CSS zależy jednak od twoich preferencji. Ale ten z przykładowego fragmentu kodu CSS powinien dać ci wyobrażenie o tym, jak stylizować twój.

Bądź bardziej kreatywny, budując swoją witrynę

Stworzenie atrakcyjnej wizualnie strony internetowej wymaga pewnej kreatywności. A witryna przyjazna dla użytkownika z większym prawdopodobieństwem skonwertuje odbiorców niż ta nijaka.

Chociaż pokazaliśmy Ci, jak utworzyć niestandardowe menu nawigacyjne, nadal możesz wyjść poza to i uczynić je bardziej atrakcyjnym. Na przykład możesz animować wyświetlanie nawigacji, nadać im kolor tła i nie tylko. I cokolwiek robisz, upewnij się, że Twoja witryna korzysta z najlepszych praktyk projektowych i układów, które są łatwe w użyciu dla użytkowników.

Udział Udział Ćwierkać E-mail 15 poleceń wiersza polecenia systemu Windows (CMD), które musisz znać

Wiersz poleceń jest nadal potężnym narzędziem systemu Windows. Oto najbardziej przydatne polecenia CMD, które każdy użytkownik systemu Windows musi znać.

Czytaj dalej Powiązane tematy

Programowanie
HTML
CSS
JavaScript
Wskazówki dotyczące kodowania

O autorze Idisou Omisola(94 opublikowane artykuły)

Idowu pasjonuje się każdą inteligentną technologią i produktywnością. W wolnych chwilach bawi się kodowaniem, a gdy się nudzi, przechodzi na szachownicę, ale od czasu do czasu uwielbia też oderwać się od rutyny. Jego pasja do pokazywania ludziom drogi do nowoczesnych technologii motywuje go do pisania więcej.

Więcej od Idowu Omisola

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować

Jak stworzyć swoje przełączalne menu mobilne

Bądź bardziej kreatywny, budując swoją witrynę

Zapisz się do naszego newslettera