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.

Jak stworzyć swoje przełączalne menu mobilne?

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:

 Utwórz trzy elementy div reprezentujące trzywierszowy pasek menu rozwijanego 








 Dodaj swoje nawigacje tutaj 


Dom
O
Kontakt

CSS:

/*Rozgraniczenie tej sekcji służy wyłącznie do celów samouczka*/
Sekcja{ 
szerokość: 800px;

instagram viewer


wysokość: 600px;
margines górny: 50px;
margines lewy: 250px;
ramka: jednolita czarna 1px;
tło: #e6e3dc;
}
/*umieścić kontener divs w DOM*/
#toggle-kontener{
wyświetlacz: siatka;
szerokość: dopasowanie treści;
margines lewy: 720px;
margines górny: 10px;
}
/*Ułóż trzy div jeden nad drugim. Następnie ustaw dla nich wysokość i szerokość.*/
#raz Dwa Trzy{
tło: czarne;
szerokość: 30px;
wysokość: 3px;
margines górny: 5px;
} 
.toggle-treść{
Nie wyświetla się;
margines lewy: 700px;
margines górny: 20px;
}
.toggle-treść a{
Blok wyświetlacza;
dekoracja tekstu: brak;
kolor czarny;
rozmiar czcionki: 30px;
}
.toggle-content a: hover{
kolor niebieski;
}
/*Wyświetl instancję klasy utworzoną przez JavaScript w bloku*/
.wystawiany{
Blok wyświetlacza;
}

Dodaj JavaScript:

var toggler = document.getElementById("toggle-container");
var toggleContents = document.getElementById("toggle-content");
document.addEventListener("kliknij", function(){
//Zastosuj instancję klasy do każdej nawigacji i ustaw wyświetlanie na przełączanie:
toggleContents.classList.toggle("wyświetlony");
});

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:

//Dodaj zdarzenie kliknięcia do swojej strony internetowej:
window.onclick = funkcja (zdarzenie) {
//Wybierz zdarzenie kliknięcia na pasku menu, aby umożliwić treści strony internetowej śledzenie go:
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName("toggle-content");
//Ukryj nawigacje, przechodząc przez każdy z nich:
for (zmienna i = 0; i < dropdowns.length; i++) {
var spadła = listy rozwijane[i];
if (dropped.classList.contains('display')) {
drop.classList.remove('wyświetlanie');
}
}
}
}

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.

Związane z: Neumorficzne trendy projektowe 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.

Jak ponownie wykorzystać swój stary sprzęt jak profesjonalista?

Masz dużo starych technologii w swoim domu? Dowiedz się dokładnie, co z tym zrobić w tym przewodniku po recyklingu technologicznym!

Czytaj dalej

O autorze