Veamos cómo crear un menú de hamburguesa de esos que cuando das click se muestran que son los enlaces
de este proyecto así que vamos a comenzar aquí.
Y a cerrar esta parte de aquí.
Y vamos a abrir el Index son tres materias del curso que vas a encontrar este archivo Barrapunto SVG.
Además lo copiamos y a 15 imágenes lo pegamos.
El siguiente paso en el Index entre lo que es el enlace la navegación vamos a colocar un dip con la
clase móvil menú y esto va a tener un enlace hacia una Heydi navegación importante.
Así es como enlazas hace una y con un signo de gato al inicio y luego al nombre de Leydi y este no existe
pero aquí vamos a poner ahí una aplicación la idea es que cuando demos clic en este enlace enlace aquí
y desplazas a poner la imagen y MGC SRC y Megía de una barra SVG aquí vamos a poner iconos menús.
Entonces si guardamos cambios y abrimos el proyecto de momento Shaver esta forma muy grande lo que es
el icono en pequeño se ve de esta forma vamos a ver algunos estilos de scroll y donde tenemos la navegación
aquí vamos a poner
móvil menú y voy a poner punto móvil menú y lo voy M.G. de 50 píxeles es decir 5 Reem que sea una imagen
pequeña.
De esta forma ahora lo importante es que por ejemplo voy a poner un Miyako y media QWERTY y en 768 píxeles
lo que viene siendo el móvil menú va a estar oculto el display.
Si abrimos el proyecto puede ser que sea aún más grande va a estar o va a desaparecer el icono iba a
ser visible únicamente en esta parte.
Ahora por ejemplo aquí voy a poner la navegación y voy a poner un display porque va a estar por Thefall
oculta va a estar oculta que no está.
Pero cuando estemos en grande la idea es que se vea entonces aquí de nueva cuenta mi idea 4 y 7 6 8
píxeles navegación display blog para que se vea lo que parece la navegación en pequeño no aparece.
Ahora cuando yo de click en esta parte de aquí por ejemplo click aquí quiero que se vea el menú y para
ello existe un selector llamado target navegación lospuntos Target y este target se va a ejecutar cuando
demos clic en esta parte y se ejecute esta navegación es decir cuando demos click se va a ejecutar ese
selector y vamos a poner el display Block ahora apoya abrir lo que viene siendo este proyecto puede
ser que se agrega en la web y con el signo del gato numeral navegación lo voy a quitar guardamos cambios
todo esto y doy click aquí y el que aparece el menú pero esta forma es un tanto limitada.
Puede ser cómo fue la animación y todo tal vez no muy interactiva pero es la forma de hacerlo sin JavaScript
usualmente utilizarías algo como JavaScript para algo así para mayor interacción y que se vea mucho
mejor pero puedes ver lo sencillo que fue.
Había cubierto esto y vamos a abrir nosotros por ejemplo nosotros y voy a copiar aquí arriba por ejemplo
aquí la navegación reemplaza lo que está Sidekick en nosotros puede ser que en este caso la navegación
es diferente doy clic y vemos que aparece la navegación entonces vamos a pegarlo en todos los demás.
Para finalizar este proyecto así anuncios y blog también y también contacto pese a las desventajas de
tener un código en un proyecto estático en HTML ya que veamos la parte de PHP.
Esto solamente vamos a editarlo en un solo archivo y finalmente nosotros ya está.
Con eso tenemos el código en todos los diferentes páginas que funciona correctamente.
Y se ve bastante bien.
Con eso tenemos un menú que se oculta o mejor dicho está oculto y se muestra cuando damos clic que es
muy común por ejemplo en un dispositivo móvil para que no tome tanto espacio.
De esta forma es como lo haces sin nada de JavaScript únicamente con CSS y HTML.