Veamos cómo crear un menú que sea disponible o que esté disponible para la parte móvil.
Por ejemplo puede ser que este menú en un teléfono tomaría buena parte de la pantalla y es algo que
haces usualmente con JavaScript para esperar la interacción del usuario de dar clic tener alguna animación
etcétera.
Pero también es algo que puedes hacer solamente con CSS así que veamos cómo hacerlo.
Primero vamos a abrir lo que viene siendo Olsson y vamos a ver quién está y voy a darle clic en este
ícono de aquí para que me copie el enlace hacia el año que viene siendo el CDN de Houston y vamos a
darle scroll hacia arriba y lo vamos a pegar aquí.
Eso nos va a cargar lo que viene siendo la hoja de estilos y también las fuentes.
Ya no es necesario descargar todo el paquete solamente con descargar o enlazar a este archivo es suficiente
el siguiente paso es buscar un ícono y vamos a buscar ponerla aquí por ejemplo menú iba a haber diferentes
tipos de menús.
Por ejemplo hay unos que no tienen nada que ver por ejemplo este de aquí no sé qué onda pero por ejemplo
estos están aquí las barras es el típico menuda hamburguesa.
Por ejemplo Android ya agregó estos puntos aquí más o menos similares ver que es lo mismo que está aquí
en Grom entonces vamos a utilizar este que dice elipses y doy click aquí.
Entonces Android o casi cualquier producto de Krumm de Google ya hoy en día utiliza este menú a copiar
y abrir.
Visual Studio aquí donde tengo esta navegación principal voy a agregar un nuevo enlace.
Esto nos vamos a pegar el icono pero la idea es que tenga un enlace por lo tanto poner primero a una
y luego Tap to complete la HR-V.
Quiero poner un enlace a un Heydi que va a ser navegación y una clase para darle estilo CSS llamada
por ejemplo móvil menú y Enter y dentro coloco lo que viene siendo mi ícono si guardo cambios y abro
el proyecto.
Puedes ver qué aparece de este lado muy pequeño difícil de ver en esta parte pero sí puedes ver el ícono
significa que pasaste correctamente fondos son de otra forma revisa esta sintaxis o también revisa que
hayas enlazado correctamente el CDN.
Puedes ver que aquí tienen un Heydi hacia un enlace y hace una navegación aquí iba a ponerle Leidi porque
este va a ser el enlace NAP en este nombre y este deben de concordar solamente con el signo de gato
numeral alinicio siguiente paso.
Puedes ver por ejemplo si el proyecto nada ha cambiado pero tenemos que darle estilos a este móvil menú
y a lo que viene siendo el botón de estilos y los voy a colocar aquí arriba.
Tal vez después de los globales creo que está bien que vamos a ponerle una aplicación responsive responsive
y lo cierro aquí.
Respon respondi
response.
Primero lo que voy a hacer es darle estilos al menú ponemos punto móvil menú y vamos a ponerle un color
que sea más fácil de ver vamos puro puro blanco.
Puedes ver que cambia un poco el ícono y lo voy a hacer un poco hacia la derecha para que puedas ver
mejor el Foncillas.
Al final lo que van siendo los iconos de fondo son son fuentes así que le puedes aplicar un Foncillas
para hacerlo más grande.
Digamos dos RAAM sólo va a ser un poco más grande y por ejemplo la idea que tengo es que si estoy en
pequeño este menú esté al centro sea más fácil darle clic ahí.
Como muchos estudios Mucha gente dice que este menú debe ir al centro porque tiene más interacciones
a la derecha a la izquierda.
Yo lo voy a mantener al centro nada más.
Para este ejemplo entonces nada más le ponemos un texto a encender un display Bloc entonces dos propiedades
para que aparezca el centro.
Ahora un detalle importante es que por ejemplo aquí quedaría como muy pegado lo va a poner un padre
de 20 píxeles y 020 pixeles arriba y abajo y cero en la parte inferior.
Eso nos va a dar así como mucha separación aquí pero no importa porque la idea es que el menú esté oculto
es decir no se vea lo que viene siendo la navegación completa y para ello si recuerdas tenemos esta
clase que dice navegación principal.
Para que este truco funcione vamos a hacerlo aquí y no dudo que haya muchas más formas de hacerlo.
Para mí esto es lo más fácil de todas la navegación principal y lo voy a poner un Max de cero y eso
va a hacer que sea más pequeña ahora tener Macs de cero pero los elementos siguen viéndose aquí para
que no se vean o para que no aparezcan aquí.
Vamos a ponerle en esta parte.
Necesito ver cómo se llama en este caso es el contenedor principal de tanto el botón como de la navegación.
Puedes ver que el barra se olvidó del nombre o ponerle punto barra y le pones una overflow given overflow
y entonces eso va a hacer que por ejemplo no aparezca en lo que vienen siendo los enlaces tienen una
altura de cero flojita en lo que haces.
OK se pasa de lo que son mis límites porque la altura es cero todo lo que se pase quita.
Entonces ya hace que desaparezcan los elementos de aquí porque la altura es cero.
Ahora para que esto funcione puedes ver que yo aquí le puse un NAB Heydi y luego aquí está Leidi te
voy a mostrar un selector que se llama target creo que no lo habíamos visto en todo el curso.
Y para qué funciona el target primero.
Por ejemplo crear otro elemento que no sea ese para que sea más fácil de ilustrar el punto
después aquí en esta parte digamos después del Main.
Después de este artículo voy a poner a quien section a tener Clas.
Así como ejemplo ejemplo de tarjeta algo así entonces tenemos aquí el ejemplo de tarjeta y voy a crear
aquí un HR-V.
También puedes ir a HR-V no tienes que hacer este ejemplo en realidad nada más quiero mostrarte cómo
funciona Altaria activar el ejemplo
activar el ejemplo y hacer que tengas activado el ejemplo.
Este ejemplo hasta aquí tiene apuntado una idea y por lo tanto tengo que crearon Heydi ejemplo de esta
forma y puedes ver que aquí les di el ejemplo lo que voy a ver lo estilosas esta parte sección que acabo
de crear hasta abajo.
Al final voy a borrar este ejemplo entonces el Heydi si recuerda se llama ejemplo pongo ejemplo y cuando
ocurre el evento llamado target quiero que mi sección se pinte de color Bagram color hielo guardamos
cambios puedes ver muy importante recapitulando un poco tengo este enlace que apunta hacia el ejemplo
y tengo este Heydi que dice ejemplo entonces cuando dé clic en lo que viene siendo esté inquer me va
a llevar a este sección pero muy importante cuando ocurra el evento de Target este se debe de pintar
de amarillo.
Target es el evento que ocurre cuando presionas por ejemplo este enlace doy click aquí y puedes ver
que se pinta de color amarillo entonces puedes utilizar por ejemplo esta técnica cuando quieres que
pinte algo o cualquier propiedad de CSS se aplica al darle click a cierto elemento muy importante revises
la estructura puede verse un poco complicado pero recuerda va a tener un enlace un elemento que vendría
siendo activar el ejemplo debes de enlazar hacia el otro y le vas a dar estilos al elemento que quieres
cambiar no al que da clic sino al al HR-V sino al que viene siendo el otro Heydi ya podemos eliminar
todo esto.
Cambios y también lo que viene siendo este section.
Ya podemos quitar el sentido y el scroll hacia arriba.
La idea que tengo aquí es por ejemplo puedes ver que a la navegación voy a volver hacia arriba a lo
que viene siendo la navegación principal.
Le dimos una altura de cero la idea es que cuando yo presione este botón el target que vendría siendo
la navegación principal va a tomar toda la altura disponible va a tomar todo lo que va a crecer mejor
dicho.
Entonces la idea es la siguiente vamos a ponerla aquí vamos a poner.
Lo puse como si con esteroide NAP opponent NAP y lo ponemos target de ir junto a poner un Max Jaitt
y digamos 800 pixeles máximo 800.
No va a pasarse de ese tamaño pero también si no hay tantos elementos en el menú como en este caso es
un menú pequeño no se va a pasar de ahí.
Es muy importante este espacio no debe ir donde después ver que estoy seleccionando el NAP cuando tenga
Altaria como que ya se me había colocado el Heydi muy importante va a ser más grande entonces ver que
definitivamente aquí no se ve bien pero lo que quiero es que eliminar la parte de la web después de
punto HTML va a parecer el signo de gato y eso hay que eliminarlo.
Ya lo hacemos más pequeño de nueva cuenta y cuando les dé click aquí lo que viene siendo este target
va a crecer y por lo tanto lo overflow sigue aplicándose pero flojita pero como el elemento crece no
va a haber ningún problema.
Click aquí y puedes ver que aparece lo que viene siendo el menú no hay así como que esa funcionalidad
como de quitar y poner o sea el mismo elemento solamente puede tener un target lo podrías manejar con
JavaScript algo así pero por ejemplo me gustaría agregar otro icono que cuando dé click aquí aparezca
algo así como que diga cerrarme aquí vamos a buscar otro más.
Otro icono que va a ser el de Clowes hay muchas opciones.
Puedes ver que por ejemplo aparecen aquí o de aquí o de acá está aquí y voy a copiar esta parte de click
y me lo llevo al Index.
Entonces después de contacto aquí voy a crear otro inquer que va a tener nada más una charla Hrólfr
y un clásico es decir cerrar Na+ lo pego y quiero mostrarte algo.
Por ejemplo aparece aquí ya la X sino algo más pequeño de click aquí puedes ver que eso se cierra en
automático por qué se cierra.
Bueno si das si viene si das clic en esta parte puedes ver que aparece una idea pero si das click aquí
este enlace apunta hacia otro lado es decir este Navia no existe en la web.
Por lo tanto el target ya no ya no se va a ver en la web R.L ya no va a ser visible lo que viene siendo
este target y con esto suficiente para que lo quiten.
Dos cosas en la parte móvil está bastante bien el menú queda pequeño cada compacto das click muestra
el contenido y tenemos esta X para cerrarlo si lo haces grande aparece este icono y también por ejemplo
aparecería la X esos dos mil que no es necesario tenerlos por lo tanto aquí tenemos este móvil menú
esta clase.
Voy a poner aquí un móvil medio Koma porque voy a agregar otra que es la de punto cerrar esta que está
aquí juntos cerrar agregó ambas y les pongo un display non pero muy importante debe de ser cuando estemos
de acuerdo.
Minuit 7 6 8 es decir cuando estemos en una tableta o un dispositivo un poco más grande esto ya no lo
requiero porque ya no es tan pequeña la pantalla y puede ser que aparece de esta forma aquí como que
me hizo falta algo en el cerrar y creo que ya sé que de hecho si lo hace aquí inspeccionar sin inspecciones
esta parte este y puedes ver que te va a aparecer un display in Block que son los estilos que te agrega
Photoshop.
Hay quien además de poner un importante importante para que tome más bien nuestro estilo y no el de
ellos puedes ver qué queda de esta forma y se ve bastante bien ya si lo haces pequeño y cierras aparece
lo que viene haciendo click aquí y se muestra el menú con un botón para cerrar debido a cómo desarrollamos
este proyecto animando o mejor dicho creando este Max Jaitt podemos tener acceso a las transiciones
que podemos poner en transición de Punto 5 segundos para que nos crea una pequeña transición se ve bastante
bien.
Obviamente puedes tener mucho más control de esto si utilizas algo de JavaScript pero no hay ningún
problema y es una excelente opción.
Ahora existe por ejemplo la duda tal vez tengas por qué target target va a esperar a que alguien de
click o mejor dicho a que se actualice la web real en esta parte es decir el elemento que estás presionando
ese evento si existe en un dispositivo móvil.
Si utilizáramos Jover Jover no existe un dispositivo móvil no es así como que tengamos un mouse para
entrar y salir del botón cuando tienes un dispositivo móvil y das click con los dedos.
Eso se toma como untar y no se toma como un joven muy importante es ver si por ejemplo algo más grande
el proyecto gracias a lo que acabamos de agregar ya se pierde totalmente.
Y si aquí por ejemplo inspeccionar revisamos lo que viene siendo nuestro código.
Puedes ver que nuestra barra tiene el overflow giren y si vemos por ejemplo dentro vamos a ver que la
navegación principal sigue teniendo ese Max de cero.
Entonces tenemos este maxcady de cero aquí dentro del cual podemos copiar este y utilizar una propiedad
que dice Max Jaitt ignorarlo de aquí en adelante Zet Concept y eso lo va a remover entonces de esa forma
ya queda nuestro menú mucho mejor puedes dar clic aquí va a mostrarlo hacerlo más grande va a tomar
los Miyako series etc. con CSS sin necesidad de utilizar JavaScript.
Y finalmente como siempre el mejor lugar para encontrar cómo funciona un evento por ejemplo target.
Para mí sigue siendo la pagina web de Firefox.
En ella vas a encontrar algunos ejemplos por ejemplo aquí vienen abajo el CSS que aplican por ejemplo
aquí puedes jugar con lo que ellos colocaron aquí en esta parte pero creo yo que el ejemplo práctico
que hemos hecho lo pone un poco más claro qué es lo que hace este target.