1 00:00:00,720 --> 00:00:05,700 Vamos a trabajar con las dos con el menú móvil para nuestro proyecto igual no va a funcionar todavía 2 00:00:05,700 --> 00:00:06,470 bien. 3 00:00:06,810 --> 00:00:09,560 Lo veremos en la parte de JavaScript. 4 00:00:09,570 --> 00:00:17,110 Trabajaremos con los eventos pero vamos a tener la estructura ya en CSS y en HTML. 5 00:00:17,520 --> 00:00:22,480 Creamos este tip con la clase menos móvil vamos a crear aquí un comentario que diga en un móvil menú 6 00:00:22,510 --> 00:00:36,680 móvil y le vamos a poner un ancho tanto en un móvil y en aprobemos un Wit de 60 pixeles un display Block 7 00:00:37,520 --> 00:00:45,930 lo vamos a flotar a la derecha float arriba y le ponemos un Texas. La right también para explicar todo 8 00:00:45,930 --> 00:00:50,970 lo que es lo que estamos haciendo aquí en Marien top de 12 pixeles. 9 00:00:51,340 --> 00:00:55,210 Nos hace falta los expansores a copiar y pegar ASPAN. 10 00:00:55,540 --> 00:01:01,590 Creo que es más fácil de hacerlo ya que esté terminado esta parte vamos a una altura cada span de 8 11 00:01:01,590 --> 00:01:02,480 pixeles. 12 00:01:02,560 --> 00:01:06,690 Margin Boron de 6 pixeles para que esa separación. 13 00:01:06,910 --> 00:01:22,590 Y por último un background color white o blanco y por último te vamos a poner un display Block bordamos 14 00:01:22,590 --> 00:01:29,280 cambios y recargamos y vemos que se ve de esta forma nuestro menú de hamburguesa así que todos estos 15 00:01:29,280 --> 00:01:32,320 estilos son los que ocupamos para hacer lo que se ve de esta forma. 16 00:01:32,720 --> 00:01:40,170 Así lo hacemos más pequeño vemos que se ve de esta forma nos hace falta ajustarlo para que se vea acá 17 00:01:40,190 --> 00:01:45,720 en la parte superior pero puedes ver que eso fue lo que intentamos hacer. 18 00:01:45,780 --> 00:01:49,860 Sin embargo cuando está en grande no quiero que se vea así que puedo poner a quien. 19 00:01:51,210 --> 00:01:55,510 Si te acuerdas aquí le ponemos el display Block en el 7 6 8. 20 00:01:55,740 --> 00:02:03,780 Igual aquí lo podríamos poner display Noon en el mismo 7 6 8 así que cuando uno se oculte el otro se 21 00:02:03,780 --> 00:02:10,360 mostrará y cuando el otro se muestre no se va a auscultado y así será la lógica. 22 00:02:10,680 --> 00:02:16,670 Vemos que quien no aparece si lo hacemos más pequeño vemos que aparece y el otro se oculta. 23 00:02:16,790 --> 00:02:22,770 Vamos a ver qué está pasando para que no se termine de ajustar bien vamos a hacer esto un poco más pequeño 24 00:02:23,760 --> 00:02:32,680 y nos posicionamos aquí si es porque el logo no está flotado a la izquierda seamos un flat LEF vemos 25 00:02:32,680 --> 00:02:33,720 que se vería bien. 26 00:02:35,280 --> 00:02:41,790 Un poco de scroll hacia arriba cortamos este de aquí tendría que estar acá recargamos y vemos que se 27 00:02:41,790 --> 00:02:42,600 ve de esta forma 28 00:02:46,740 --> 00:02:55,060 y vemos que se ve bastante bien en nuestro nuestro menú de hamburguesa igual lo que le faltaría sería 29 00:02:55,060 --> 00:03:02,400 que se apareciera el ícono de la manita no y eso es fácil de hacer nada más le ponemos seleccionamos 30 00:03:02,400 --> 00:03:11,460 este Jover y ponemos cursor Painter guardamos cámbiese recargamos y vemos que aparece el botón de la 31 00:03:11,460 --> 00:03:18,000 manita igual como dije cuando demos clic va a expandirse eso lo veremos con JavaScript un poco más adelante 32 00:03:18,510 --> 00:03:24,660 sin embargo vamos a ver que no tengamos que hacerle más ajustes a este menú vamos si era un poco de 33 00:03:24,660 --> 00:03:32,950 scroll y quitarle el display non que tenemos aquí guardo cambios y recargo y vemos que el menú se ve 34 00:03:32,950 --> 00:03:41,260 de esta forma igual aquí le podremos poner un widget 100 por ciento a cada uno recargar y un display 35 00:03:41,260 --> 00:03:46,070 Block. 36 00:03:46,280 --> 00:03:48,670 De esta forma nada más faltaría un texto la inocente 37 00:03:51,090 --> 00:03:56,200 recargamos y así cuando atiende click aquí hay algún error 38 00:04:02,780 --> 00:04:06,370 de navegación principal. 39 00:04:07,790 --> 00:04:10,200 Le hace falta también su propio Clear Fix 40 00:04:20,730 --> 00:04:27,880 podemos ver que se ve bien el menú igual un poco más separado o un margen Boron de 20 pixeles. 41 00:04:28,840 --> 00:04:36,980 Estoy un poco más separado cada uno de ellos y si lo hacemos grande aquí necesitaríamos resetear estos 42 00:04:36,980 --> 00:04:47,360 valores un poco de scroll nos pegamos aquí y la transición no lo ocupamos aquí la vamos a poner un weta 43 00:04:47,480 --> 00:04:59,420 auto un display inline texana encender el mar y en Boron nos Marien cero eso porque vamos a resetear 44 00:04:59,420 --> 00:05:02,830 los valores que ya teníamos margin 45 00:05:07,890 --> 00:05:10,760 desde cero cero cero cero 46 00:05:16,950 --> 00:05:18,490 valientemente pixeles arriba 47 00:05:21,900 --> 00:05:24,060 porque aquí les falta un display en la M Block 48 00:05:27,140 --> 00:05:33,860 y así cuando lo hagamos pequeño se verá el menú de esta forma y cuando lo hagamos grande se verá correcto 49 00:05:35,100 --> 00:05:43,530 así que podemos regresar al el display normal y como dije volver a esta parte cuando estemos con los 50 00:05:43,530 --> 00:05:49,860 eventos de JavaScript para cuando le demos click detecte y expanda el menú veremos algo más este menú 51 00:05:49,860 --> 00:05:52,690 igual va a ser un poco más adelante en la parte de JavaScript. 52 00:05:52,890 --> 00:06:00,180 Sin embargo pudiste ver que con CSS puedes darle los ajustes necesarios para hacerlo ver de la forma 53 00:06:00,180 --> 00:06:06,770 en que tu quieras exactamente como esta sección que tenemos aquí si quieren siguiente vamos a trabajar 54 00:06:06,770 --> 00:06:11,670 con esta sección de la mejor conferencia de diseño web en español.