Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS - Listas y menu de navegación - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 22 de febrero de 2021 por Fernando M.

67 visualizaciones

Más información Transcripción

Descargar la transcripción

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. 00:00:00
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. 00:00:20
LI por 3 para hacer 3 elementos 00:00:41
que van a ser ensaladas 00:00:44
pescados y mariscos 00:00:46
y carnes y aves 00:00:49
justo debajo me voy a hacer otra lista H2 00:00:53
que va a ser listas ordenadas 00:00:57
donde voy a poner OL 00:00:59
y me voy a poner otros 3 elementos LI 00:01:02
que van a ser primero, segundo 00:01:05
y tercero 00:01:09
y justo debajo me voy a hacer 00:01:12
otro elemento h2 que va a ser una lista 00:01:14
con imágenes 00:01:16
¿vale? que va a ser una lista 00:01:18
no ordenada ¿vale? 00:01:20
a esta lista ul 00:01:23
le voy a poner un identificador que va a ser 00:01:24
lista imagen ¿vale? 00:01:26
y dentro voy a poner también tres elementos 00:01:28
li que van a ser html 00:01:30
css y 00:01:32
javascript 00:01:34
¿vale? 00:01:36
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? 00:01:37
Esas propiedades son ListStyleType, ListStyleImage para poner imágenes y ListStylePosition, ¿vale? 00:01:53
Vamos a ir viendo cómo funcionan estas propiedades. 00:02:09
En primer lugar, para nuestra lista desordenada, ¿vale? 00:02:12
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? 00:02:16
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? 00:02:35
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? 00:02:57
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. 00:03:22
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. 00:03:43
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? 00:04:00
Ahora, en caso de que nosotros queramos meter una imagen como viñeta, como símbolo, ¿vale? 00:04:14
Lo primero que tenemos que hacer es descargarnos esa imagen. 00:04:20
Yo eso ya lo he hecho, ¿vale? 00:04:23
Lo podéis ver en mi pantalla, yo dentro de mi carpeta donde tengo mi archivito, ¿vale? 00:04:26
Que están todos aquí, ¿vale? 00:04:31
Fijaros, todos mis archivos. 00:04:35
Yo tengo aquí mi carpeta images, ¿vale? 00:04:37
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. 00:04:40
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? 00:04:52
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. 00:05:19
¿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? 00:05:38
Esa propiedad de atajo es list style, ¿vale? 00:06:00
Entonces, yo en esta list style, pues, podría poner la URL, ¿vale? 00:06:07
Y luego me podría poner, voy a comentar esto, me podría poner la opción de position, ¿vale? 00:06:11
Que no la hemos visto todavía y la voy a explicar ahora después, ¿vale? 00:06:22
Voy a explicarlo ahora mismo para que lo entendamos. 00:06:25
¿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? 00:06:30
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? 00:06:53
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? 00:07:12
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? 00:07:30
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? 00:07:50
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. 00:08:08
¿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? 00:08:26
¿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? 00:08:49
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? 00:09:06
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? 00:09:28
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? 00:09:42
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? 00:09:53
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. 00:10:08
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. 00:10:28
Ahora vamos a modificar los enlaces que están dentro de los elementos de la lista 00:10:42
¿Vale? Entonces, menú vertical, LI y ahora una 00:10:48
¿Vale? 00:10:53
Y la modificación que aquí vamos a hacer es la siguiente 00:10:55
En primer lugar, le vamos a poner un color a la letra, a la fuente 00:10:58
¿Vale? Le vamos a poner en negro 00:11:01
¿Vale? Este de aquí es el color negro 00:11:04
Luego los vamos a representar como elementos de bloque 00:11:09
¿Vale? 00:11:12
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? 00:11:14
Ahora ya lo que vamos a hacer es lo que podríamos llamar la pijadilla, ¿vale? 00:11:32
Y es que le vamos a poner el efecto de hover, ¿vale? 00:11:38
Vamos a poner menú vertical, L, I, A, y aquí le metemos el hover. 00:11:41
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? 00:11:47
Y fijaros que yo ahora cuando paso, me cambia, ¿vale? 00:11:57
¿Ok? 00:12:06
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? 00:12:07
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? 00:12:23
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? 00:12:39
Entonces, vamos a poner aquí los estilos para el menú horizontal, ¿vale? 00:12:58
Entonces, lo primero, fijaros, como nosotros vamos a modificar una lista desordenada que está dentro del nav, 00:13:07
no nos hace falta ponerle ningún... 00:13:14
No nos hace falta ponerle... lo diré. 00:13:19
No nos hace falta ponerle ninguna idea porque podemos utilizar ese nap, ¿vale? 00:13:24
Entonces pondríamos nap, un espacio y luego ponemos la lista, ¿vale? 00:13:30
Entonces sería la lista desordenada que pertenece al elemento nap, ¿vale? 00:13:37
Entonces aquí ahora lo que hacemos es añadirle, vamos a añadir en primer lugar un color de fondo, ¿vale? 00:13:43
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? 00:13:51
Y ahora vamos a modificar los elementos que hay dentro, ¿vale? 00:14:11
Y lo que vamos a hacer es flotarlos hacia la izquierda, para asegurar que quedan todos uno después del otro, ¿vale? 00:14:17
¿Qué pasa? Fijaros, que al ponerlos como un elemento flotante, está ahora mismo sobrescribiendo, ocupando otro elemento. 00:14:27
Entonces, esto ya vimos cómo arreglarlo, y para arreglarlo simplemente nos vamos al elemento padre, ¿vale? 00:14:35
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? 00:14:40
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? 00:14:56
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? 00:15:16
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. 00:15:36
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? 00:15:58
Bueno, pues espero que os haya gustado y os haya sido muy útil. 00:16:26
Nos vemos en el siguiente. 00:16:32
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
67
Fecha:
22 de febrero de 2021 - 21:37
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
16′ 34″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
48.33 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid