1 00:00:00,750 --> 00:00:20,429 Bueno, pues ahora vamos a ver cómo hacer listas y menús de navegación, ¿vale? Otra cosa también muy importante. Yo ya me he creado aquí un archivito, ¿vale? Como siempre hacemos, el archivo se llama listas barra baja menú HTML, ¿vale? Punto HTML y bueno, vamos a empezar con esto. 2 00:00:20,429 --> 00:00:41,259 Lo primero que voy a hacer es crear el contenido. Voy a crearme dos listas, ¿vale? Voy a ponerme aquí una etiqueta H2, que va a ser listas desordenadas, ¿vale? Me voy a poner una etiqueta UL, ¿vale? Que recuerdo que era para hacer listas desordenadas. 3 00:00:41,259 --> 00:00:44,520 LI por 3 para hacer 3 elementos 4 00:00:44,520 --> 00:00:46,100 que van a ser ensaladas 5 00:00:46,100 --> 00:00:49,640 pescados y mariscos 6 00:00:49,640 --> 00:00:53,479 y carnes y aves 7 00:00:53,479 --> 00:00:57,200 justo debajo me voy a hacer otra lista H2 8 00:00:57,200 --> 00:00:59,619 que va a ser listas ordenadas 9 00:00:59,619 --> 00:01:02,460 donde voy a poner OL 10 00:01:02,460 --> 00:01:05,920 y me voy a poner otros 3 elementos LI 11 00:01:05,920 --> 00:01:09,319 que van a ser primero, segundo 12 00:01:09,319 --> 00:01:12,359 y tercero 13 00:01:12,359 --> 00:01:14,319 y justo debajo me voy a hacer 14 00:01:14,319 --> 00:01:16,620 otro elemento h2 que va a ser una lista 15 00:01:16,620 --> 00:01:18,260 con imágenes 16 00:01:18,260 --> 00:01:20,620 ¿vale? que va a ser una lista 17 00:01:20,620 --> 00:01:21,780 no ordenada ¿vale? 18 00:01:23,299 --> 00:01:24,560 a esta lista ul 19 00:01:24,560 --> 00:01:26,519 le voy a poner un identificador que va a ser 20 00:01:26,519 --> 00:01:28,299 lista imagen ¿vale? 21 00:01:28,620 --> 00:01:30,819 y dentro voy a poner también tres elementos 22 00:01:30,819 --> 00:01:32,500 li que van a ser html 23 00:01:32,500 --> 00:01:34,500 css y 24 00:01:34,500 --> 00:01:36,939 javascript 25 00:01:36,939 --> 00:01:37,480 ¿vale? 26 00:01:37,480 --> 00:01:53,859 Entonces fijaros, ahora mismo lo que estáis viendo en pantalla es lo que nosotros veíamos habitualmente cuando hacíamos una lista en HTML, ¿vale? Entonces, para nosotros modificar esos estilos de lista tenemos principalmente tres propiedades, ¿vale? 27 00:01:53,859 --> 00:02:09,439 Esas propiedades son ListStyleType, ListStyleImage para poner imágenes y ListStylePosition, ¿vale? 28 00:02:09,620 --> 00:02:12,180 Vamos a ir viendo cómo funcionan estas propiedades. 29 00:02:12,659 --> 00:02:16,639 En primer lugar, para nuestra lista desordenada, ¿vale? 30 00:02:16,639 --> 00:02:35,280 Yo puedo poner aquí list style type, ¿vale? Y por defecto, por defecto, CSS utiliza el estilo disk, de disco, ¿vale? Sin embargo, podemos utilizar también el circle, podemos usar también el square que está aquí debajo, ¿vale? 31 00:02:35,280 --> 00:02:57,360 O podremos utilizar el none, ¿vale? Es decir, no one, que no queremos poner ninguna viñeta, ningún simbolito, ¿vale? Entonces, fijaros que si yo ahora mismo aquí pongo, si yo ahora mismo pongo none, ¿vale? Me desaparecen en las dos listas que tengo ahora mismo desordenadas esos elementos, ¿vale? 32 00:02:57,360 --> 00:03:22,819 Si yo pongo square, me aparecen cuadraditos. Si yo pongo circle, me salen círculos, ¿vale? Entonces, yo con esto, pues, tendría ese juego, ¿vale? Vamos ahora a la lista ordenada, que es la misma idea, ¿vale? List style type, ¿vale? Por defecto, aparecen números decimales, esta opción, pero yo podría poner decimal leading zero, que es que le añado un cero, ¿vale? 33 00:03:22,819 --> 00:03:43,599 Podría poner, por ejemplo, upper alfa, que sería el alfabeto latino. Podría poner lower greek, para que sería el alfabeto griego en minúscula. Podría poner lower roman, para letras romanas en minúscula. 34 00:03:43,599 --> 00:04:00,060 O upper roman para letras romanas en mayúsculas. Y lo mismo, aquí también podría poner no one si quisiera que no hubiera símbolo, ¿vale? Pero fijaros que aunque yo ponga no one, el desplazamiento me lo hace igualmente. 35 00:04:00,060 --> 00:04:12,960 Entonces, si yo quisiera quitarme ese desplazamiento, aquí tendría que ponerme un margin de 0 y un padding también de 0, ¿vale? Para asegurarme que todo se queda desplazado a la izquierda, ¿vale? 36 00:04:14,560 --> 00:04:20,259 Ahora, en caso de que nosotros queramos meter una imagen como viñeta, como símbolo, ¿vale? 37 00:04:20,519 --> 00:04:23,100 Lo primero que tenemos que hacer es descargarnos esa imagen. 38 00:04:23,660 --> 00:04:25,759 Yo eso ya lo he hecho, ¿vale? 39 00:04:26,420 --> 00:04:31,699 Lo podéis ver en mi pantalla, yo dentro de mi carpeta donde tengo mi archivito, ¿vale? 40 00:04:31,759 --> 00:04:34,259 Que están todos aquí, ¿vale? 41 00:04:35,600 --> 00:04:37,240 Fijaros, todos mis archivos. 42 00:04:37,660 --> 00:04:40,379 Yo tengo aquí mi carpeta images, ¿vale? 43 00:04:40,379 --> 00:04:52,459 Y aquí dentro me he descargado un archivo de Pizzabay y lo he modificado, le he modificado el tamaño para asegurar que cumpla, que tenga unas dimensiones de 20x20, ¿vale? 20 píxeles por 20 píxeles. 44 00:04:52,459 --> 00:05:19,459 Entonces, una vez que yo tengo esa imagen, simplemente ahora me vengo a mi estilos, ¿vale? Y como yo me he definido aquí mi lista con un id, pues simplemente me voy a venir, voy a modificar ese id, lista imagen y voy a poner list style image, ¿vale? 45 00:05:19,459 --> 00:05:38,839 Y dentro voy a poner la propiedad URL que ya hemos trabajado con ella y entre comillas voy a poner images y luego checkmark, que era mi símbolo, ¿vale? Y fijaros que si yo ahora me voy a mi archivo, a mi HTML y actualizo, ahora mis símbolos son la imagen que yo había descargado. 46 00:05:38,839 --> 00:06:00,240 ¿Qué pongo uno más? PHP, pues fijaros, ¿vale? Luego tenemos una propiedad de atajo, ¿vale? Tenemos una propiedad de atajo igual que la teníamos para el resto de elementos, para bordes, para margin, para padding, ¿vale? 47 00:06:00,240 --> 00:06:05,639 Esa propiedad de atajo es list style, ¿vale? 48 00:06:07,540 --> 00:06:11,300 Entonces, yo en esta list style, pues, podría poner la URL, ¿vale? 49 00:06:11,800 --> 00:06:22,680 Y luego me podría poner, voy a comentar esto, me podría poner la opción de position, ¿vale? 50 00:06:22,699 --> 00:06:25,279 Que no la hemos visto todavía y la voy a explicar ahora después, ¿vale? 51 00:06:25,279 --> 00:06:30,220 Voy a explicarlo ahora mismo para que lo entendamos. 52 00:06:30,240 --> 00:06:53,899 ¿Vale? Voy a hacer una nueva lista, voy a poner aquí un h2 que vamos a poner controlar la identación, ¿vale? La identación es la tabulación que hay de los elementos sobre la lista, ¿vale? Y para eso nos creamos una lista desordenada con un id llamado lista posición, ¿vale? 53 00:06:53,899 --> 00:07:12,139 Y dentro nos vamos a crear tres elementos li con texto lore-nipsum, ¿vale? De tal forma que nos queda esto. Fijaros que la línea siguiente aparece en el mismo sitio en el que aparece el primer elemento, ¿vale? 54 00:07:12,139 --> 00:07:30,560 Pues eso lo podemos controlar. ¿Cómo? Pues añadiendo aquí una propiedad, que lo vamos a hacer en la lista, lista posición, que es list style position. Y tenemos la opción outside, que es por defecto, que es la que veis, ¿vale? Y la otra opción es inside, ¿vale? 55 00:07:30,560 --> 00:07:50,259 Donde veis que la viñeta forma parte también del texto. Y yo eso lo podría hacer también aquí, que era lo que decía antes, ¿vale? ¿Ok? Vale. Esto en cuanto a modificación de las listas, ¿vale? 56 00:07:50,259 --> 00:08:08,800 Ahora vamos a crearnos un menú de navegación, dos menús de navegación de hecho, un menú vertical y un menú horizontal. Vamos a empezar con el menú vertical, ¿vale? Vamos a crearnos aquí una cabecera H2 y lo vamos a llamar menú vertical, ¿vale? 57 00:08:08,800 --> 00:08:26,990 Vamos a poner un elemento ul con un id que va a ser menú vertical y nos vamos a crear cuatro enlaces. Bueno, cuatro elementos sí, perdón, con cuatro enlaces. 58 00:08:26,990 --> 00:08:49,799 ¿Vale? El primer enlace va a ir a inicio, el segundo enlace va a ir a acerca de, el tercer enlace va a ser servicios y el cuarto enlace va a ser contacto. ¿Vale? 59 00:08:49,799 --> 00:09:06,940 ¿Vale? Fijaros al crear eso cómo se ve, ¿vale? No parece realmente un menú, lo único que parece un menú es el hecho de que tiene enlaces, ¿vale? Pero vamos a ver cómo podemos modificar esto de tal forma que queda realmente curioso, ¿vale? 60 00:09:06,940 --> 00:09:28,059 Pues vamos a empezar aquí, ¿vale? Voy a poner unos comentarios y voy a poner menú vertical, ¿vale? Y vamos a empezar. Lo primero que vamos a edificar es el menú, ¿vale? Es decir, lo que es la lista en sí, menú vertical, ¿vale? 61 00:09:28,059 --> 00:09:41,720 Le vamos a poner un color de fondo que va a ser un gris, ¿vale? Esto es un gris, como veis aquí, un gris clarito, casi blanco, digamos, ¿vale? 62 00:09:42,220 --> 00:09:53,759 Le vamos a poner una anchura que va a ser del 50% y le vamos a poner de estilo de lista no one, es decir, que no tenga ninguna viñeta, ¿vale? 63 00:09:53,759 --> 00:10:08,230 Luego le vamos a poner un relleno de 0 por arriba y por abajo y de 1 píxel en los laterales, ¿vale? Fijaros las modificaciones que vamos haciendo y cómo van cambiando. Ya tenemos esta opción, ¿vale? 64 00:10:08,230 --> 00:10:28,009 Ahora vamos a modificar los elementos li de cada una de esa lista, ¿vale? Entonces ponemos menú vertical, un espacio li. Esto recuerdo que era un selector, ¿vale? De hijos, es decir, elemento li que está dentro de menú vertical. 65 00:10:28,009 --> 00:10:42,470 En este caso, lo que vamos a hacer es ponerle un borde, ¿vale? Le vamos a poner un borde de un píxel sólido, ¿vale? Simplemente eso. Y ya se ve tal y como estáis viendo. 66 00:10:42,470 --> 00:10:48,909 Ahora vamos a modificar los enlaces que están dentro de los elementos de la lista 67 00:10:48,909 --> 00:10:53,350 ¿Vale? Entonces, menú vertical, LI y ahora una 68 00:10:53,350 --> 00:10:54,389 ¿Vale? 69 00:10:55,490 --> 00:10:58,049 Y la modificación que aquí vamos a hacer es la siguiente 70 00:10:58,049 --> 00:11:01,250 En primer lugar, le vamos a poner un color a la letra, a la fuente 71 00:11:01,250 --> 00:11:04,690 ¿Vale? Le vamos a poner en negro 72 00:11:04,690 --> 00:11:09,490 ¿Vale? Este de aquí es el color negro 73 00:11:09,490 --> 00:11:12,610 Luego los vamos a representar como elementos de bloque 74 00:11:12,610 --> 00:11:13,850 ¿Vale? 75 00:11:14,169 --> 00:11:32,080 Le vamos a poner un relleno en todas las posiciones de 12 píxeles y le vamos a quitar el subrayado, ¿vale? Y fijaros cómo se ve ahora mismo. Y así parece más un menú vertical, ¿vale? 76 00:11:32,759 --> 00:11:38,120 Ahora ya lo que vamos a hacer es lo que podríamos llamar la pijadilla, ¿vale? 77 00:11:38,259 --> 00:11:41,259 Y es que le vamos a poner el efecto de hover, ¿vale? 78 00:11:41,480 --> 00:11:45,980 Vamos a poner menú vertical, L, I, A, y aquí le metemos el hover. 79 00:11:47,220 --> 00:11:56,669 Y lo que vamos a hacer es que cuando pasemos por encima, cambie el color de fondo a un gris un poquito más oscuro, ¿vale? 80 00:11:57,070 --> 00:12:03,580 Y fijaros que yo ahora cuando paso, me cambia, ¿vale? 81 00:12:06,139 --> 00:12:06,620 ¿Ok? 82 00:12:07,360 --> 00:12:23,639 Eso en cuanto a menú vertical, ¿vale? Ahora vamos a hacer un menú horizontal. El menú horizontal lo vamos a colocar arriba de la página, ¿vale? En la parte de arriba, justo después del body, ¿vale? 83 00:12:23,639 --> 00:12:39,460 Aquí vamos a meter un, como vamos a hacer una barra de navegación, ¿vale? Vamos a meter un elemento nap, ¿vale? Y dentro de este elemento nap vamos a meter una lista desordenada, ¿vale? 84 00:12:39,460 --> 00:12:58,059 Y de hecho, para ir más rápido, vamos a copiar esta lista, tal y como está, ¿vale? La vamos a copiar dentro del nav. Y simplemente cambiamos y donde pone menú vertical, ¿vale? No ponemos nada. No me va a hacer falta poner nada y ahora vais a ver el por qué. ¿Vale? 85 00:12:58,059 --> 00:13:06,700 Entonces, vamos a poner aquí los estilos para el menú horizontal, ¿vale? 86 00:13:07,799 --> 00:13:14,360 Entonces, lo primero, fijaros, como nosotros vamos a modificar una lista desordenada que está dentro del nav, 87 00:13:14,779 --> 00:13:19,059 no nos hace falta ponerle ningún... 88 00:13:19,059 --> 00:13:24,259 No nos hace falta ponerle... lo diré. 89 00:13:24,259 --> 00:13:30,500 No nos hace falta ponerle ninguna idea porque podemos utilizar ese nap, ¿vale? 90 00:13:30,500 --> 00:13:35,259 Entonces pondríamos nap, un espacio y luego ponemos la lista, ¿vale? 91 00:13:37,320 --> 00:13:42,879 Entonces sería la lista desordenada que pertenece al elemento nap, ¿vale? 92 00:13:43,879 --> 00:13:51,700 Entonces aquí ahora lo que hacemos es añadirle, vamos a añadir en primer lugar un color de fondo, ¿vale? 93 00:13:51,700 --> 00:14:11,539 Vamos a poner background color, todo tres, ¿vale? Le vamos a poner un estilo de lista sin elementos, un margen cero, un relleno de cero y ya está. Eso por ahora, ¿vale? 94 00:14:11,539 --> 00:14:15,940 Y ahora vamos a modificar los elementos que hay dentro, ¿vale? 95 00:14:17,080 --> 00:14:25,279 Y lo que vamos a hacer es flotarlos hacia la izquierda, para asegurar que quedan todos uno después del otro, ¿vale? 96 00:14:27,019 --> 00:14:35,399 ¿Qué pasa? Fijaros, que al ponerlos como un elemento flotante, está ahora mismo sobrescribiendo, ocupando otro elemento. 97 00:14:35,679 --> 00:14:40,399 Entonces, esto ya vimos cómo arreglarlo, y para arreglarlo simplemente nos vamos al elemento padre, ¿vale? 98 00:14:40,399 --> 00:14:56,820 Que sería la lista y vamos a poner overflow y ponemos la opción hide, ¿vale? Y fijaros como queda la misma, ¿vale? Vamos a seguir modificando esto para que se pueda, para que parezca más un menú, ¿vale? 99 00:14:56,820 --> 00:15:16,059 Vamos a modificar ahora los enlaces, pondríamos nap ul li a, ¿vale? Para modificar solo los enlaces, los vamos a representar como un elemento de bloque, le vamos a poner un color de fuente que sea blanco, ¿vale? 100 00:15:16,059 --> 00:15:36,240 El texto lo vamos a alinear hacia el centro, vamos a quitarle el subrayado, ¿vale? Y le vamos a poner un relleno de 14 píxeles arriba y abajo y 16 píxeles de izquierda a derecha, ¿vale? 101 00:15:36,240 --> 00:15:58,419 Y fijaros cómo se ve ahora mismo, ¿vale? Y aparece mucho más una barra de navegación. Y lo que ahora vamos a meter va a ser elementos de hover, ¿vale? Entonces, como siempre, nav, ul, lia, dos puntos, hover. 102 00:15:58,419 --> 00:16:23,179 Y aquí pues le vamos a cambiar el color de fondo y le vamos a poner 1, 1, 1, 1, 1, 1. Así. ¿Vale? Y fijaros ahora que si yo voy pasando por mi menú pues se cambian las diferentes opciones. ¿Vale? Y ya tendríamos así un menú vertical o un menú horizontal. Como más nos guste. ¿Vale? 103 00:16:26,169 --> 00:16:31,889 Bueno, pues espero que os haya gustado y os haya sido muy útil. 104 00:16:32,590 --> 00:16:33,789 Nos vemos en el siguiente.