elementos y el enlace relacionado se especificará en la etiqueta. Html
Navegación vertical Como resultado, la estructura del menú de navegación se verá así:
El CSS se puede usar para transformar los menús HTML simples en barras de navegación visualmente atractivas. Entonces, aplicemos propiedades CSS a los elementos HTML agregados.
Estilo todos los elementos
* Todos los elementos del archivo HTML se proporcionan con las propiedades de margen y relleno con el valor establecido como 0px.
Estilo vertical-nave div Div
.falla vertical El ".vertical "Se usa para acceder a la clase Div vertical. Las siguientes son las propiedades aplicadas a él:
"color de fondo "Especifica el color del fondo del elemento. "ancho "La propiedad ajusta el ancho del elemento. "altura "La propiedad ajusta la altura del elemento. "pesadilla "La propiedad establece espacio a la izquierda del contenido del elemento. "acolchado superior "La propiedad establece espacio en la parte superior del contenido del elemento. "Familia tipográfica "La propiedad aplica el estilo de fuente al texto del elemento. La lista se proporciona para asegurarse de que si el navegador no admite el primer estilo, el otro se aplicará a la fuente. Estilo h1 elemento de vertical-av div div
.vertical-nave h1 Las siguientes propiedades se aplican al elemento H1 de encabezado:
"margen "La propiedad establece el espacio en la parte inferior del encabezado. "color "La propiedad establece el color de fuente especificado. Hasta ahora, las propiedades aplicadas mostrarán el menú de navegación como se muestra en la imagen a continuación:
Ahora, retiremos las balas de la lista.
El elemento "UL" de estilo de vertical-av div div
.vertical-nave ul El "estilo de lista "Propiedad con el valor establecido como"ninguno "Eliminará las balas de la lista.
El elemento de estilo "A" del elemento Li
.vertical-nave ul li a El ".vertical-nave ul li a "Define el camino de la etiqueta. Se aplican las siguientes propiedades:
"decoración de texto "Con el valor"ninguno "Elimina la decoración subrayada de la lista. "mostrar "Propiedad con el valor establecido como"bloquear "Establecerá cada elemento de lista en una línea. "ancho La propiedad se utiliza para la configuración del ancho del elemento. "fondo La propiedad se utiliza para agregar efectos a los antecedentes del elemento. "color "La propiedad especifica el color de la fuente. "sombra de la caja "La propiedad especifica las compensaciones x e y, el radio y el radio de propagación, y el color de la sombra. "radio fronterizo "La propiedad hace que los bordes del elemento reduzcan. "margen La propiedad establece el espacio alrededor del elemento. "relleno "La propiedad especifica el espacio alrededor del contenido del elemento. Como resultado, la barra de navegación se verá de la siguiente manera:
Aplicemos algunos efectos de transición a los menús de navegación creados anteriormente.
Consejo de bonificación: aplique la transición al menú de navegación vertical
Ahora, aplicaremos la transición al "a " Elemento:
Transición: todos 0.3s facilidad; Aquí está la descripción del bloque de código anterior:
transición-propiedad se especifica como "todo "Lo que significa la transición aplicada a todas las propiedades. La duración de la transición se especifica como "0.3S ". La función de tiempo de transición se especifica como "facilidad ", Lo que resulta en un aumento en la velocidad al medio de la transición y luego se ralentiza al final. Elemento de estilo "A" en el flotador
.vertical-nave ul li a: hover Las propiedades anteriores aplicadas al elemento "A" del NAV vertical se describen a continuación:
"color de fondo "La propiedad especifica el color del fondo del elemento. "color "La propiedad especifica el color de la fuente del elemento. "transformar La propiedad se aplica con el valor como escala (1.1, 1.5). Esta función de escala () define una transformación del plano 2D. Guarde el código mencionado anteriormente y ábralo en el navegador. La barra de menú de navegación se verá así:
Hemos aprendido con éxito a crear un menú de navegación vertical con CSS.
Conclusión
La barra de navegación juega un papel vital en hacer que cualquier sitio web sea fácil de usar. Consiste en una lista de enlaces a diferentes secciones de la aplicación. En html, el
y Los elementos se utilizan para hacer la lista de enlaces, específicamente en la barra de navegación. Para hacerlos interactivos, se aplican diferentes propiedades de estilo utilizando CSS. Este estudio ha explicado el procedimiento para crear y animar un menú de navegación vertical con CSS.
