Kā izveidot mobilās izvēlnes joslu, izmantojot HTML, CSS un JavaScript

Neapšaubāmi, jūs varat izveidot pārslēdzamu mobilās izvēlni, izmantojot CSS ietvarus, piemēram, TailWind vai BootStrap.

Bet kāda ir tā koncepcija? Un kā jūs varat to izveidot no nulles, neatkarīgi no šiem CSS ietvariem?

Veicot iepriekš minēto, jūs varat pilnībā pielāgot pielāgojumus. Tātad, bez papildu piepūles, lūk, kā izveidot pārslēdzamu mobilās izvēlni, izmantojot vēlamo programmēšanas valodu.

Ja vēl neesat to izdarījis, atveriet projekta mapi un izveidojiet projekta failus (HTML, CSS un JavaScript).

Tālāk redzēsit koda piemērus, kas nepieciešami visiem trim veidiem. Un, ja vēl neesat to izdarījis, apsveriet lejupielādi šīs lietotnes, lai uzzinātu kodu pirms lasīt tālāk.

Mēs sāksim ar 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;  
 }

Pievienot JavaScript:

kā ievietot chicago stila zemsvītras piezīmes

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

Lūk, kā izskatās darba rezultāts, noklikšķinot uz izvēlnes joslas:

Izvēlne ir pārslēdzama, tāpēc, noklikšķinot uz joslas vēlreiz vai jebkurā vietā lapā, navigācijas tiek paslēptas.

Saistīts: Stila vietnes elementi ar CSS fona gradientu

Jūsu pārlūkprogramma, iespējams, neatbalsta satura slēpšanu, noklikšķinot uz jebkuras vietnes lapas. Varat mēģināt to piespiest, izmantojot notikuma mērķi un JavaScript cilpu. To var izdarīt, pievienojot JavaScript šādam koda blokam:

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

Tātad šeit ir kopsavilkums par to, ko jūs tikko izdarījāt: jūs izveidojāt trīs rindas, izmantojot div HTML tags. Jūs pielāgojāt to augstumu un platumu un novietojāt tos savā DOM. Tad jūs piešķīrāt tiem klikšķa notikumu, izmantojot JavaScript.

Saistīts: Kā izveidot vietni: iesācējiem

Sākotnējo navigācijas displeju iestatāt uz neviens lai tos paslēptu, kad lapa tiek ielādēta. Tad klikšķis notikums trīs rindās pārslēdz šīs navigācijas, pamatojoties uz JavaScript iniciēto klasi ( parādīts ). Visbeidzot, jūs izmantojāt šo jauno klasi, lai parādītu navigācijas, izmantojot CSS un JavaScript pārslēgtSaturs metode.

Saistītie: Neumorfās dizaina tendences HTML, CSS un JavaScript

Pārējais CSS tomēr ir atkarīgs no jūsu vēlmēm. Bet šeit redzamajam CSS fragmenta paraugam vajadzētu dot priekšstatu par sava stila veidošanu.

Veidojiet savu radošumu, veidojot savu vietni

Vizuāli pievilcīgas vietnes izveide prasa zināmu radošumu. Un lietotājam draudzīga vietne, visticamāk, pārveidos jūsu auditoriju, nevis mīlīga.

Lai gan mēs esam parādījuši, kā šeit izveidot pielāgotu navigācijas izvēlni, jūs joprojām varat iet tālāk un padarīt to saistošāku. Piemēram, varat animēt navigāciju displeju, piešķirt tām fona krāsu un daudz ko citu. Un neatkarīgi no tā, ko darāt, nodrošiniet, lai jūsu vietne izmantotu labāko dizaina praksi un izkārtojumu, kas lietotājiem būtu ērti lietojams.

Kopīgot Kopīgot Čivināt E -pasts 15 Windows komandrindas (CMD) komandas, kas jums jāzina

Komandu uzvedne joprojām ir spēcīgs Windows rīks. Šeit ir visnoderīgākās CMD komandas, kas jāzina katram Windows lietotājam.

Lasīt Tālāk Saistītās tēmas

Programmēšana
HTML
CSS
JavaScript
Kodēšanas padomi

Par autoru Idisou Omisola(Publicēti 94 raksti)

Idowu aizraujas ar jebko gudru tehnoloģiju un produktivitāti. Brīvajā laikā viņš spēlējas ar kodēšanu un pārslēdzas uz šaha galdu, kad viņam ir garlaicīgi, taču viņam arī patīk laiku pa laikam atrauties no rutīnas. Viņa aizraušanās parādīt cilvēkiem ceļu apkārt mūsdienu tehnoloģijām motivē viņu rakstīt vairāk.

Vairāk no Idowu Omisola

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu

Kā izveidot maināmu mobilās izvēlni

Veidojiet savu radošumu, veidojot savu vietni

Abonējiet mūsu biļetenu