Kaip sukurti meniu juostą mobiliesiems naudojant HTML, CSS ir „JavaScript“

Neabejotinai galite sukurti perjungiamą meniu mobiliesiems naudodami CSS sistemas, tokias kaip „TailWind“ ar „BootStrap“.

Bet kokia už jos esanti koncepcija? Ir kaip tai padaryti nuo nulio, nepriklausomai nuo šių CSS sistemų?

Jei atliksite aukščiau nurodytus veiksmus, galėsite visiškai valdyti tinkinimą. Taigi, be jokių abejonių, štai kaip sukurti perjungiamą meniu mobiliesiems naudojant pageidaujamą programavimo kalbą.

Jei to dar nepadarėte, atidarykite projekto aplanką ir sukurkite projekto failus (HTML, CSS ir „JavaScript“).

Žemiau matysite visų trijų tipų kodo pavyzdžius. O jei dar to nepadarėte, apsvarstykite galimybę atsisiųsti Šios programos mokosi kodo prieš skaitant toliau.

Pradėsime nuo 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;  
 }

Pridėti „JavaScript“:

paleiskite 16 bitų 64 bitų „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');  
});

Štai kaip darbo rezultatas atrodo spustelėjus meniu juostą:

Meniu yra perjungiamas, todėl dar kartą spustelėję juostą arba bet kurioje puslapio vietoje naršymas yra paslėptas.

Susijęs: Stilingi svetainės elementai su CSS foniniu gradientu

Jūsų naršyklė gali nepalaikyti turinio slėpimo, kai spustelite bet kurią svetainės vietą. Galite pabandyti tai priversti naudodami įvykio tikslą ir „JavaScript“ kilpą. Tai galite padaryti pridėję šį kodo bloką prie „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');  
 }  
 }  
 }  
}

Štai ką jūs ką tik padarėte, santrauka: sukūrėte tris eilutes naudodami div HTML žyma. Jūs pakoregavote jų aukštį ir plotį ir padėjote juos savo DOM. Tada davėte šiems įvykiams paspaudimą naudodami „JavaScript“.

Susijęs: Kaip sukurti svetainę: pradedantiesiems

Pradinį navigacijos rodymą nustatote į nė vienas paslėpti juos, kai puslapis įkeliamas. Tada spustelėkite įvykis trijose eilutėse perjungia šias navigacijas pagal „JavaScript“ sukurtą klasę ( rodomas ). Galiausiai, jūs panaudojote šią naują klasę norėdami parodyti naršymą naudodami CSS ir „JavaScript“ perjungtiTurinys metodas.

Susiję: Neumorfinio dizaino tendencijos HTML, CSS ir „JavaScript“

Tačiau likusi CSS dalis priklauso nuo jūsų pageidavimų. Tačiau čia pateiktame pavyzdyje pateiktame CSS fragmente turėtumėte suprasti, kaip sukurti savo stilių.

Kurkite savo svetainę kūrybiškiau

Norint sukurti vizualiai patrauklią svetainę, reikia šiek tiek kūrybiškumo. Vartotojui patogi svetainė labiau linkusi paversti jūsų auditoriją nei švelni.

Nors čia parodėme, kaip sukurti pasirinktinį naršymo meniu, vis tiek galite tai padaryti ir padaryti jį įtikinamesnį. Pavyzdžiui, galite animuoti naršymo ekraną, suteikti jiems fono spalvą ir dar daugiau. Kad ir ką darytumėte, užtikrinkite, kad jūsų svetainėje būtų naudojama geriausia dizaino praktika ir maketai, kuriuos naudotojams būtų lengva naudoti.

Dalintis Dalintis „Tweet“ Paštu 15 „Windows“ komandų eilutės (CMD) komandų, kurias turite žinoti

Komandų eilutė vis dar yra galingas „Windows“ įrankis. Čia yra naudingiausios CMD komandos, kurias turi žinoti kiekvienas „Windows“ vartotojas.

Skaityti toliau Susijusios temos

Programavimas
HTML
CSS
„JavaScript“
Kodavimo patarimai

Apie autorių Idisou Omisola(Paskelbti 94 straipsniai)

Idowu aistringai domisi visomis išmaniosiomis technologijomis ir produktyvumu. Laisvalaikiu jis žaidžia koduodamasis ir nuobodžiai persijungia į šachmatų lentą, tačiau taip pat mėgsta retkarčiais atitrūkti nuo rutinos. Jo aistra parodyti žmonėms kelią aplink šiuolaikines technologijas skatina jį daugiau rašyti.

Daugiau iš Idowu Omisola

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia

Kaip sukurti perjungiamą meniu mobiliesiems

Kurkite savo svetainę kūrybiškiau

Prenumeruokite mūsų naujienlaiškį