Mobil menüsor létrehozása HTML, CSS és JavaScript segítségével

Kétségkívül váltható mobilmenüt hozhat létre olyan CSS -keretek segítségével, mint a TailWind vagy a BootStrap.

De mi a koncepció mögötte? És hogyan készíthet egyet a semmiből anélkül, hogy függne ezektől a CSS -keretrendszerektől?

Ha maga elvégzi a fentieket, teljes testreszabási lehetőséget biztosít. Tehát minden további nélkül itt van, hogyan hozhat létre váltható mobil menüt a kívánt programozási nyelv használatával.

Ha még nem tette meg, nyissa meg a projektmappát, és hozza létre a projektfájlokat (HTML, CSS és JavaScript).

Az alábbiakban példákat láthat a mindhárom típushoz szükséges kódra. És ha még nem tette meg, fontolja meg a letöltést ezeket az alkalmazásokat, hogy megtanulják a kódot mielőtt tovább olvasna.

Kezdjük vele 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;  
 }

JavaScript hozzáadása:

Hogyan ellenőrizhetem a legutóbbi tevékenységeket a számítógépemen?

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

Így néz ki a működő kimenet, ha a menüsorra kattint:

A menü váltható, így a sávra történő újbóli kattintás - vagy az oldalon belül bárhol - elrejti a navigációkat.

Összefüggő: Stílusú weboldal elemek CSS háttér színátmenettel

Előfordulhat, hogy böngészője nem támogatja a tartalom elrejtését, amikor a weboldal bármely pontjára kattint. Megpróbálhatja ezt erőltetni eseménycél és JavaScript -hurok használatával. Ezt úgy teheti meg, hogy hozzáadja a következő kódblokkot a JavaScripthez:

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

Íme tehát egy összefoglaló arról, amit most tett: Három sort hozott létre a div HTML címke. Beállította magasságukat és szélességüket, és elhelyezte őket a DOM -ban. Akkor ezeknek kattintási eseményt adott meg JavaScript használatával.

Összefüggő: Weboldal készítés: kezdőknek

A navigációk kezdeti megjelenítését erre állítja egyik sem hogy elrejtse őket az oldal betöltésekor. Aztán a kattintson esemény a három sorban a JavaScript példányosított osztálya alapján váltja ezeket a navigációkat ( Megjelenik ). Végül ezzel az új osztállyal jelenítette meg a navigációkat CSS és JavaScript használatával toggleContents módszer.

Kapcsolódó: Neumorf formatervezési trendek HTML -ben, CSS -ben és JavaScriptben

A CSS többi része azonban az Ön preferenciájától függ. De a példában szereplő CSS -kódrészletnek ötletet kell adnia a stílus stílusának kialakítására.

Legyen kreatívabb a webhely felépítése során

A vizuálisan vonzó weboldal készítése némi kreativitást igényel. És egy felhasználóbarát webhely nagyobb valószínűséggel téríti meg közönségét, mint egy szelíd.

Bár itt megmutattuk, hogyan hozhat létre egyéni navigációs menüt, ettől még túlléphet és vonzóbbá teheti. Például animálhatja a navigációk megjelenítését, háttérszínt adhat nekik és így tovább. És bármit is tesz, győződjön meg arról, hogy webhelye a legjobb tervezési gyakorlatokat és elrendezéseket használja a felhasználók számára.

Részvény Részvény Csipog Email 15 Windows parancssori (CMD) parancs, amit tudnia kell

A parancssor továbbra is hatékony Windows eszköz. Itt vannak a leghasznosabb CMD -parancsok, amelyeket minden Windows -felhasználónak tudnia kell.

Olvassa tovább Kapcsolódó témák

Programozás
HTML
CSS
JavaScript
Kódolási tippek

A szerzőről Idisou Omisola(94 cikk megjelent)

Idowu szenvedélyes minden intelligens technológia és termelékenység iránt. Szabadidejében kódolással játszik, és ha unatkozik, sakktáblára vált, de szeret időnként elszakadni a rutintól. Szenvedélye, hogy megmutassa az embereknek a modern technológia körüli utat, arra ösztönzi, hogy többet írjon.

Továbbiak Idowu Omisola -tól

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide

A váltható mobil menü létrehozása

Legyen kreatívabb a webhely felépítése során

Iratkozzon fel hírlevelünkre