Home-theater-designers
Sens dubte, podeu crear un menú mòbil alternable mitjançant marcs CSS com TailWind o BootStrap.
Però, quin concepte hi ha darrere? I com es pot fer un des de zero sense dependre d’aquests marcs CSS?
Si feu això mateix us proporciona un control total de personalització. Per tant, sense més detalls, a continuació us expliquem com crear un menú mòbil alternable amb el llenguatge de programació preferit.
Com es crea el menú mòbil alternable
Si encara no ho heu fet, obriu la carpeta del projecte i creeu els fitxers del projecte (HTML, CSS i JavaScript).
A continuació, veureu exemples del codi que necessiteu per als tres tipus. I si encara no ho heu fet, considereu la possibilitat de descarregar-les aquestes aplicacions per aprendre codi abans de continuar llegint.
Començarem amb 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;
}
Afegeix JavaScript:
com es crea una trama de caixes i bigotis a Excel
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');
});
A continuació s'explica l'aspecte d'una sortida de treball quan feu clic a la barra de menú:
El menú es commuta, de manera que si feu clic a la barra de nou (o en qualsevol lloc de la pàgina), s'amaguen les navegacions.
Relacionat: Elements de llocs web d’estil amb un degradat de fons CSS
És possible que el vostre navegador no admeti amagar el contingut quan feu clic a qualsevol lloc de la vostra pàgina web. Podeu provar de forçar-ho mitjançant un objectiu d'esdeveniment i un bucle JavaScript. Podeu fer-ho afegint el següent bloc de codi al vostre 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');
}
}
}
}
Així que aquí teniu un resum del que acabeu de fer: heu creat tres línies amb el fitxer div etiqueta d'HTML. Heu ajustat l'alçada i l'amplada i els heu situat al vostre DOM. A continuació, heu donat a aquests un esdeveniment de clic mitjançant JavaScript.
Relacionat: Com crear un lloc web: per a principiants
Configureu la visualització inicial de les vostres navegacions a cap per amagar-los quan es carrega la pàgina. Aleshores el feu clic l'esdeveniment de les tres línies commuta aquestes navegacions basades en una classe instantània de JavaScript ( es mostra ). Finalment, heu utilitzat aquesta nova classe per mostrar les navegacions mitjançant CSS i JavaScript toggleContents mètode.
Relacionat: Tendències de disseny neumòrfic en HTML, CSS i JavaScript
La resta de CSS, però, depèn de les vostres preferències. Però el que apareix al fragment de CSS d’exemple aquí us hauria de donar una idea de com donar estil al vostre.
Sigueu més creatiu quan creeu el vostre lloc web
Fer un lloc web atractiu visualment requereix certa creativitat. I és que és més probable que un lloc web fàcil d’utilitzar converteixi el vostre públic que un de poca.
Tot i que aquí us hem mostrat com podeu crear un menú de navegació personalitzat, encara podeu anar més enllà i fer-lo més atractiu. Per exemple, podeu animar la visualització de les navegacions, donar-los un color de fons i molt més. I feu el que feu, assegureu-vos que el vostre lloc web utilitzi les millors pràctiques de disseny i dissenys fàcils d’utilitzar pels usuaris.
Compartir Compartir Tweet Correu electrònic 15 Ordres de l'indicador de comandes de Windows (CMD) que heu de conèixerEl símbol del sistema continua sent una potent eina de Windows. Aquests són els comandaments CMD més útils que tots els usuaris de Windows necessiten conèixer.
Llegiu a continuació Temes relacionats- Programació
- HTML
- CSS
- JavaScript
- Consells de codificació
Idowu és un apassionat de qualsevol tecnologia intel·ligent i productivitat. Durant el temps lliure, juga amb la codificació i canvia al tauler d’escacs quan s’avorreix, però també li agrada deixar de banda la rutina de tant en tant. La seva passió per mostrar a la gent el camí cap a la tecnologia moderna el motiva a escriure més.
Més de Idowu OmisolaSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us