Kako napraviti mobilnu traku izbornika s HTML -om, CSS -om i JavaScript -om

Bez sumnje, možete stvoriti mobilni izbornik koji se može mijenjati pomoću CSS okvira kao što su TailWind ili BootStrap.

No, koji koncept stoji iza toga? I kako ga možete napraviti od nule, a da ne ovisite o ovim CSS okvirima?

Ako sami učinite gore navedeno, imate potpunu kontrolu prilagođavanja. Dakle, bez daljnjih zamolbi, evo kako stvoriti mobilni izbornik koji se može preklopiti koristeći vaš željeni programski jezik.

Ako to već niste učinili, otvorite mapu projekta i stvorite datoteke projekta (HTML, CSS i JavaScript).

U nastavku ćete vidjeti primjere koda koji vam je potreban za sve tri vrste. A ako već niste, razmislite o preuzimanju ove aplikacije za učenje koda prije čitanja.

Počet ćemo s 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;  
 }

Dodajte JavaScript:

prostor na disku 100 posto 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');  
});

Evo kako izgleda radni izlaz kada kliknete traku izbornika:

Izbornik se može uključiti, pa ponovni klik na traku - ili bilo gdje na stranici - skriva navigaciju.

Povezano: Stilizirajte elemente web stranice s CSS gradijentom pozadine

Vaš preglednik možda ne podržava skrivanje sadržaja kada kliknete bilo gdje na svojoj web stranici. To možete pokušati prisiliti pomoću cilja događaja i JavaScript petlje. To možete učiniti dodavanjem sljedećeg bloka koda u svoj 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');  
 }  
 }  
 }  
}

Evo sažetka onoga što ste upravo učinili: stvorili ste tri retka koristeći div HTML oznaka. Prilagodili ste njihovu visinu i širinu i postavili ih u svoj DOM. Zatim ste ovim događajima dali klik pomoću JavaScripta.

Povezano: Kako napraviti web stranicu: Za početnike

Početni prikaz navigacije postavili ste na nijedan da ih sakrijete kad se stranica učita. Onda klik događaj u tri retka prebacuje ove navigacije na temelju klase s JavaScriptom ( prikazano ). Konačno, ovu ste novu klasu upotrijebili za prikaz navigacije pomoću CSS -a i JavaScripta toggleSadržaj metoda.

Povezano: Neumorfni trendovi dizajna u HTML -u, CSS -u i JavaScript -u

Ostatak CSS -a, međutim, ovisi o vašim željama. Ali onaj u primjeru CSS isječka ovdje trebao bi vam dati ideju o tome kako oblikovati svoj.

Budite kreativniji pri izradi web stranice

Izrada vizualno privlačne web stranice zahtijeva određenu kreativnost. Vjerojatnije je da će web stranica prilagođena korisniku pretvoriti vašu publiku od blage.

Iako smo vam ovdje pokazali kako stvoriti prilagođeni navigacijski izbornik, ipak možete otići dalje od toga i učiniti ga privlačnijim. Na primjer, možete animirati prikaz navigacija, dati im boju pozadine i još mnogo toga. Što god radili, pobrinite se da vaša web stranica koristi najbolje dizajnerske prakse i rasporede koje će korisnici jednostavno koristiti.

Udio Udio Cvrkut E -pošta 15 Komande Windows naredbenog retka (CMD) koje morate znati

Naredbeni redak i dalje je moćan Windows alat. Evo najkorisnijih CMD naredbi koje svaki korisnik sustava Windows mora znati.

Pročitajte Dalje Povezane teme

Programiranje
HTML
CSS
JavaScript
Savjeti za kodiranje

O autoru Idisou Omisola(94 objavljena članka)

Idowu je strastven u bilo čemu pametnom tehnologiji i produktivnosti. U slobodno vrijeme igra se kodiranjem i prebacuje na šahovsku ploču kad mu je dosadno, ali također voli povremeno odustati od rutine. Njegova strast prema pokazivanju ljudi suvremene tehnologije motivira ga da piše više.

Više od Idowua Omisole

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu

Kako stvoriti svoj Togglable mobilni izbornik

Budite kreativniji pri izradi web stranice

Pretplatite se na naše obavijesti