Hola, bienvenido de nuevo. ¿ Adivina qué? Vamos a hacer otra, y nuestra última, barra de navegación juntos, en esta revisión de código. Este, sin embargo, es un poco diferente, no sólo por la forma en que configuramos las cosas, sino porque quiero hablarles de la accesibilidad de cuántas personas hacen sus barras de navegación. La nueva forma, que he usado de esta manera, es crear sus enlaces de navegación como parte de las listas. Así que puedes ver, ya lo tenemos un poco diferente por aquí. Tengo una lista desordenada con uno, dos, tres, cuatro elementos de una lista, y algunos de esos elementos de la lista tienen listas desordenadas ellos mismos. Entonces, si bien esto es muy común, hay algunos problemas de usabilidad, cuando te das cuenta, ¿son realmente listas? Porque si no, esa es una etiqueta semántica que estamos usando, que podemos querer evitar. Pero es tan común, quiero mostrártelo y dejarte jugar con él y tomar tus propias decisiones. El otro problema cuando hacemos esta barra de navegación desplegable, tiene que ver con la accesibilidad de las personas que pueden pasar el ratón sobre ciertas cosas que desea activar. Creo que todos hemos estado allí, cuando hemos estado en una página web y estamos tratando de pasar el cursor sobre algo para hacer clic en un enlace. Y sigue apareciendo porque nuestra mano está demasiado temblorosa o tenemos que flotar sobre tres cosas al mismo tiempo. Así que de nuevo, aunque esta es una técnica que quiero compartir con ustedes y ayudarles a entender, espero que se asegure de que cualquier aplicación que haga, haga todo lo posible para asegurarse de que sea lo más accesible posible. Así que de nuevo, comencemos con este simple y aburrido código HTML, y veamos si no podemos hacer que parezca algo un poco más emocionante. Lo que tenemos aquí ahora es una barra de navegación horizontal que va a tener elementos desplegables. Por lo tanto, cuando voy a casa, no hay nada más que ver, pero, cuando repaso Pictures, se puede ver que tengo tres enlaces adicionales que puedo intentar hacer, y lo mismo con Recetas, y Contacto, de nuevo, es todo por sí mismo. Entonces, ¿cómo hice esto? ¿ Cómo lo tuve para que 2015, 14 y 13 no aparezcan a menos que esté flotando? ¿ Y lo mismo con las recetas? Echemos un vistazo. Muy bien, voy a saltarme el cuerpo en la navegación porque creo que sabes cómo hacer todo esto. En su lugar, hablemos de las diferentes listas. Lo siento, listar los elementos mismos en los enlaces. Así que lo que he hecho es que he entrado aquí, para que puedas ver las dos al mismo tiempo. Y es muy débil, y ojalá hubiera hecho un color diferente ahora. Pero tengo un límite entre cada una de estas opciones. Ahora, habría parecido un poco raro para mí tener una frontera justo aquí a lo largo del costado. Así que lo que tenía que hacer es ir y dije que sabes qué? Para ese último elemento de la lista, el último, no pongamos un borde. Son esos pequeños ajustes que puedes poner en tu código para que parezca un poco más profesional. Tampoco queremos fronteras en los subelementos, ¿verdad? Porque no hay nada. Dado que están bloqueados, no necesitamos bordes en el costado. Así que hice lo mismo aquí, donde dije, ¿sabes qué? No quiero usar ninguna frontera por aquí. Bastante directo, espero. Ahora, echemos un vistazo de nuevo. Hice un estilo sencillo en mis enlaces de navegación, ¿de acuerdo? Lo único que hice es que, de nuevo, quería mostrarte un ejemplo de uso de la transición. La transición aquí es lo que cambia lentamente el color cuando pasa el cursor sobre, en lugar de un cambio rápido. Así que puedes ver, es un poco más gradual que repentino, ¿de acuerdo? El activo es como la última vez. Ahora, aquí está la parte interesante. Vamos a hablar de los submenús, ¿de acuerdo? Entonces, ¿cómo sabe el navegador cuando algo es un submenú? Bueno, puede mirar el DOM, y puede mirar hacia abajo y decir, oh, estoy en navegación. Y ahora estoy en una lista desordenada, y aquí estoy en un elemento de lista. Si encuentra otro elemento de la lista más abajo, se está encadenando, sabe, oh, oh, estoy en un submenú. Así que aquí mismo, sabe que estoy en el navegador, estoy dentro de una lista, y acabo de encontrar una lista desordenada dentro de allí. Entonces, cómo lo tenemos configurado para que no se muestre al principio es que he establecido la posición en absoluta, y he establecido la visualización en ninguno. Así que no va a aparecer por defecto. No va a suceder. ¿ Está bien? Entonces, ¿cómo lo consigo para que de repente aparezca si queremos hacer algo a lo largo de esa línea? Bueno, queremos averiguar cómo cambiarlo aquí, cuando pase el cursor sobre un elemento de la lista que tiene una lista desordenada debajo, cambie esa pantalla de ninguno a bloque. Entonces, estas dos líneas de código justo aquí, esto realmente lo está configurando. De modo que cuando voy aquí, de forma predeterminada, la visualización no es ninguna, pero cuando paso el cursor, la visualización se convierte en bloque. Es un concepto muy simple, muy corto, muy poderoso de entender. Así que te he mostrado algunas formas diferentes de que puedes darle estilo a tus barras de navegación. Tenemos horizontal, tenemos vertical, tenemos desplegable. Realmente espero que elija uno con el que se sienta más cómodo, o realmente realmente, el más emocionado, y cree uno para su proyecto final aquí en esta clase de CSS. No te preocupes si tienes problemas. Publicar en el panel de discusión. Ve en línea y busca respuestas. Pero lo que realmente espero es que puedas crear algo de lo que estés orgulloso, que sea hermoso y accesible. Buena suerte.