Как да направите мобилна лента с менюта с HTML, CSS и JavaScript

Несъмнено можете да създадете превключващо се мобилно меню с помощта на CSS рамки като TailWind или BootStrap.

Но каква е концепцията зад него? И как можете да направите такъв от нулата, без да зависите от тези CSS рамки?

Правейки горното сами, вие получавате пълен контрол по персонализиране. Така че, без повече шум, ето как да създадете превключващо се мобилно меню, като използвате предпочитания от вас език за програмиране.

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

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

По -долу ще видите примери за кода, от който се нуждаете и за трите типа. И ако все още не сте, помислете за изтеглянето тези приложения, за да научите кода преди да прочетете нататък.

Ще започнем с HTML:

 Създайте три div, които да представят триредовото падащо меню 








 Добавете навигацията си тук 


У дома
относно
Контакт

CSS:

/*Разграничаването на този раздел е само за целите на урока*/

instagram viewer


раздел { 
ширина: 800px;
височина: 600px;
марж-топ: 50px;
марж-ляво: 250px;
рамка: плътно черно 1px;
фон: #e6e3dc;
}
/*позиционирайте контейнера divs във вашия DOM*/
#toggle-container {
дисплей: решетка;
ширина: fit-content;
марж-ляво: 720px;
margin-top: 10px;
}
/*Подредете трите дива един над друг. След това задайте височина и ширина за тях.*/
#едно две три{
фон: черен;
ширина: 30px;
височина: 3px;
margin-top: 5px;
} 
.toggle-content {
дисплей: няма;
марж-ляво: 700px;
margin-top: 20px;
}
.toggle-content a {
дисплей: блок;
декорация на текст: няма;
цвят черен;
размер на шрифта: 30px;
}
.toggle-content a: hover {
цвят: син;
}
/*Показване на екземпляра на класа, създаден от JavaScript в блок*/
.Показва{
дисплей: блок;
}

Добавяне на JavaScript:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener ("щракване", функция () {
// Прилагаме инстанция на клас към всяка навигация и настройваме дисплея за превключване:
toggleContents.classList.toggle ("показва се");
});

Ето как изглежда работещ изход, когато щракнете върху лентата с менюта:

Менюто може да се превключва, така че щракването върху лентата отново - или навсякъде в страницата - скрива навигацията.

Свързани: Стилизирайте елементите на уебсайта с CSS градиент на фона

Вашият браузър може да не поддържа скриване на съдържанието, когато щракнете някъде в уеб страницата си. Можете да опитате да принудите това, като използвате цел на събитие и JavaScript цикъл. Можете да направите това, като добавите следния блок код към вашия JavaScript:

// Добавяне на събитие за щракване към вашата уеб страница:
window.onclick = функция (събитие) {
// Насочете към събитието щракване в лентата с менюта, за да позволите на тялото на уеб страницата да го проследи:
if (! event.target.matches ('#toggle-container')) {
var dropdownns = document.getElementsByClassName ("toggle-content");
// Скриване на навигацията чрез преминаване през всяка от тях:
за (var i = 0; i var drop = падащи менюта [i];
if (drop.classList.contains ('display')) {
drop.classList.remove ('дисплей');
}
}
}
}

Ето резюме на това, което току -що направихте: Създадохте три реда, използвайки div етикет на HTML. Регулирахте височината и ширината им и ги позиционирахте във вашия DOM. След това сте им дали събитие за щракване с помощта на JavaScript.

Свързани: Как да си направим уебсайт: За начинаещи

Задавате първоначалното показване на навигацията си на нито един за да ги скриете, когато страницата се зареди. Тогава щракнете събитие на трите реда превключва тези навигации въз основа на JavaScript -екземпляр клас (Показва). И накрая, използвахте този нов клас за показване на навигациите с помощта на CSS и JavaScript toggleContents метод.

Свързани: Неоморфни тенденции в дизайна в HTML, CSS и JavaScript

Останалата част от CSS обаче зависи от вашите предпочитания. Но този в примерния CSS фрагмент тук трябва да ви даде представа как да оформите вашия.

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

Създаването на визуално привлекателен уебсайт изисква известна креативност. Удобният за потребителя уебсайт е по-вероятно да превърне вашата аудитория, отколкото неблагоприятната.

Въпреки че ние ви показахме как да създадете персонализирано навигационно меню тук, все пак можете да надхвърлите това и да го направите по -завладяващ. Например, можете да анимирате дисплея на навигациите, да им дадете цвят на фона и др. И каквото и да правите, уверете се, че вашият уебсайт използва най -добрите дизайнерски практики и оформления, лесни за използване от потребителите.

Как да използвате повторно стария си хардуер като професионалист

Имате ли много стари технологии, затрупали дома ви? Разберете какво точно да правите с него в това ръководство за рециклиране на технологии!

Прочетете Напред

За автора