CSS: Menús y animación

Bienvenido de nuevo al curso de KnowledgeCity en hojas de estilo en cascada. Soy Cliff Brozo, soy tu instructor. Y hoy, lo adivinaste, vamos a hablar de menús. Veremos algunos menús desplegables, veremos la animación en forma de círculo, deslizaremos el menú de la barra lateral, exploraremos qué es un menú de fondo pegajoso, y habrá una bonificación al final. ¿Tienes hambre de aprender? Yo soy, vamos. Comenzaremos con un menú desplegable simple. Y el menú desplegable puede incluir tantos menús desplegables como quieras. En este caso, este en el lado derecho de la pantalla, veremos la animación. Y cuando puedes hacer clic en un menú de hamburguesas, y de repente, tenemos submenús que aparecen. Y te voy a pedir que trates de recordar algo de tu geometría de décimo grado como comentamos los planos x, y y z en el espacio 3D. Las navegaciones deslizantes salen por el lateral cuando haces clic en un menú abierto, y tiene la opción de submenús una vez que se abren los menús. Por supuesto, entonces puedes cerrar el menú. Los menús de fondo pegajoso son cosas a las que estamos acostumbrados si alguna vez usaste tu teléfono, todas las navegaciones abajo en la parte inferior. Y fiel a la forma, también podemos hacer eso en una página web. Finalmente, hablé un poco sobre una bonificación, veremos cómo poner íconos como parte de su menú. Echemos un vistazo a cómo funciona todo esto. Comenzaremos con un menú desplegable. El código tiene una lista desordenada HTML directa, que incluye uno, dos, tres elementos, y un cuarto elemento que hace el menú desplegable. Creé una clase llamada botón para soltar. Y eso está en CSS. Y eso es a lo que voy a llamar para que esta función desplegable funcione. Echemos un vistazo a cómo funciona. No pasa nada cuando me cierro sobre la ciudad del conocimiento. No pasa nada cuando me coloco sobre la programación de computadoras. No sucede nada con la barra de navegación de iconos. Pero cuando llego a CSS, ese es el que tiene el botón de caída de clase. Lo que me permite hacer es elegir submenús de esta lista. Al pasar el cursor sobre ellos, los colores cambian y eso es lo que se maneja en CSS. Aquí está el código. La parte principal de este código se ocupa del contenido desplegable. El resto es similar a los menús de navegación normales. Pero nuestro contenido desplegable me permite colocar el cursor sobre algo y cambiar los colores debido a esta sección flotante. Mientras que normalmente mi color de fondo es gasa de limón en la lista desplegable. Cuando me desplazo, cambié el color de fondo al azul de los Dodgers. Eso sucede en la línea 56. En el CSS, el color se convierte en gasa limón, y el color de fondo es azul Dodger. Mientras me alejo y no estoy flotando sobre esos elementos, entonces el color de fondo es gasa limón, y el color del texto es azul Dorger. Una cosa más sobre este cuadro de lista desplegable. Tenemos algo de sombreado de fondo. Y como puede ver, aquí tengo una sombra de caja en la línea 41. Recordarás la sombra de caja de una lección anterior. de donde hablamos qué tan lejos va la sombra a la derecha, qué tan abajo, cuánta dispersión, y cuál es realmente el color de la sombra. Y eso nos permite crear un menú de lista desplegable. El siguiente es nuestro menú circular. Nuestro menú circular se muestra en un navegador de tamaño completo. En el medio, tengo un círculo con tres líneas, y eso parece un menú normal de hamburguesas. Y agregué en el plano x, y y z para mostrar cómo se van a mover estas líneas. Al pasar el cursor sobre el menú, aumenta de tamaño. Cuando hago clic en él, aparecen los submenús. Cuando vuelvo a hacer clic para cerrarlo, los menús desaparecen. Echemos un vistazo al código HTML detrás de esto. El código es estándar. Empiezo con la imagen que me muestra mi pequeño gráfico de x, y y z. Y luego uso el tipo de entrada de casilla de verificación para saber cuando se ha hecho clic en algo y cuando hacen clic en el menú Abrir, Sé que se supone que debo llamar a esa función, cuando hacen clic en la X, Sé que se supone que debo cerrar el menú. La parte sobre la geometría del décimo grado viene ahora. Tenemos tres líneas y esas tres líneas se van a mover el del medio va a desaparecer. Los otros dos van a girar hacia arriba y hacia abajo. Y tienes que estar atento a que eso suceda. Los elementos que saldrán son los elementos de mis enlaces a otras páginas. Hagamos clic en esto varias veces para ver cómo sucede. Ahora tienes que mirar con atención lo que va a pasar es la esquina superior derecha va a bajar 45 grados. La esquina inferior derecha se elevará 45 grados, y eso formará la letra X. Mientras eso sucede, la línea media va a desaparecer. Miremos un par de veces. Mire de cerca mientras hago clic en esto varias veces. (música optimista) Veamos el código CSS. Empezamos con nuestro botón de abrir. Y el botón Abrir está codificado con un radio de borde del 100%. Y eso me da un círculo perfecto. Creo el ancho y la altura de ese círculo a 80 píxeles, y lo pongo en una posición absoluta. Lo estoy moviendo a 85 píxeles del margen izquierdo, y cuando se abra, quiero facilitar la transición. Ahora notarás que este código de la línea 32 a 37 parece estar escrito dos veces. Y eso es porque diferentes navegadores Necesito ver el código de diferentes maneras. La sección Dash WebKit está diseñado para navegadores que necesitan verlo de esa manera, como los otros navegadores puede lidiar con una transformación directa. Voy a traducir cosas en un espacio tridimensional. Y tengo una ubicación x, una ubicación, y ubicación az. Si piensa que x va y viene, y es izquierda y derecha, y z es arriba y abajo, tendrás la idea de cómo se mueven estas cosas en el espacio tridimensional.