Cómo crear y diseñar una barra de navegación en CSS?

Html

• Hogar


• Acerca de


• Servicios


• Contáctenos

Aquí hemos creado algunos elementos de la lista y anidados algunas etiquetas de anclaje dentro del

CSS

Por defecto

Los elementos deben recibir un margen y relleno de 0px, y el tipo de estilo de lista debe establecerse en ninguno. Por último, hemos diseñado las etiquetas de anclaje de acuerdo con nuestro deseo.

Producción

Se creó una barra de navegación horizontal utilizando elementos en línea.

Creación de una barra de navegación usando Div

Exploremos cómo hacer una barra de navegación horizontal usando div.

Html


Hogar
Acerca de
Servicios
Contáctenos


En el código HTML anterior, hemos creado un DIV y lo hemos asignado el topnav clase. Dentro de ese div, tenemos cuatro etiquetas de anclaje anidadas y la primera etiqueta de anclaje se le ha dado la clase activa que permite al usuario saber en qué sección está.

CSS

cuerpo
margen: 0;

.topnav
Color de fondo: gris;
desbordamiento: oculto;

.topnav a
flotador izquierdo;
color blanco;
Text-Align: Center;
relleno: 15px 18px;
Decoración de texto: ninguna;
tamaño de fuente: 17px;

.Topnav A: Hover
Color de fondo: Ghostwhite;
de color negro;

.topnav a.activo
Color de fondo: salmón;
color blanco;


La clase Topnav se usa para agregar un color de fondo a toda la barra de navegación. Luego diseñamos los enlaces presentes dentro del contenedor Div de acuerdo con nuestros requisitos. Además, hemos agregado el estilo para el flujo y el efecto activo en el enlace de navegación.

Producción

Usando el div y la etiqueta, hemos creado con éxito una barra de navegación horizontal.

Más sobre la barra de navegación horizontal!

Hay algunas cosas más divertidas que puede agregar a su barra de navegación, explorémoslas.

Cómo flotar un enlace a la derecha en una barra de navegación

Una cosa interesante que puede hacer es que pueda flotar un enlace presente dentro de la barra de navegación a la derecha si lo desea. Establezca la propiedad flotante de ese enlace en particular a la derecha y vea el cambio.


Hogar
Acerca de
Servicios
Contáctenos


Aquí hemos establecido la propiedad flotante de la última etiqueta de anclaje a la derecha y además la asignamos una clase activa.

Producción

Un enlace fue flotado a la derecha con éxito.

Cómo crear una barra de navegación fija superior

Para arreglar la barra de navegación en la parte superior, le dé al contenedor Div una posición fija y algún ancho.

Html


Hogar
Acerca de
Servicios
Contáctenos




Algo de contenido.




Algo de contenido.




Algo de contenido.




Algo de contenido.




Algo de contenido.




Algo de contenido.




Algo de contenido.




Algo de contenido.




Algo de contenido.




Algo de contenido.




Para mostrar al funcionamiento de una barra de navegación superior fija, hemos creado un palína de contenido para demostrar la barra de navegación fija.

CSS

.topnav
Color de fondo: gris;
desbordamiento: oculto;
Posición: fijo;
arriba: 0;
Ancho: 100%;

.contenido
relleno: 20px;
Altura: 1000px;


Estamos asignando a la barra de navegación una posición fija y un ancho 100%. Además, estamos configurando la parte superior a 0px.

Producción

Se creó una barra de navegación superior fija con éxito.

Cómo crear una barra de navegación fija inferior

También puede crear una barra de navegación inferior fija. Así es como lo haces.

CSS

.topnav
Color de fondo: gris;
desbordamiento: oculto;
Posición: fijo;
Abajo: 0;
Ancho: 100%;


Aquí, además de darle a la barra de navegación una posición fija, la parte inferior se ha establecido en 0px.

Producción

La barra de navegación inferior fija funciona correctamente.

Cómo crear una barra de navegación pegajosa

Con el fin de crear una barra de navegación pegajosa, use el valor pegajoso de la propiedad de posición CSS.

CSS

.topnav
Color de fondo: gris;
desbordamiento: oculto;
Posición: pegajoso;
arriba: 0;


Aquí hemos establecido la posición de la barra de navegación a Sticky.

Producción

Se creó una barra de navegación pegajosa con éxito.

Barra de navegación vertical

Con el fin de crear una barra de navegación vertical, todo lo que tiene que hacer es establecer la visualización de los enlaces dentro de la barra de navegación para bloquear utilizando la propiedad de bloque de pantalla CSS.

CSS

.topnav a
bloqueo de pantalla;
color blanco;
Text-Align: Center;
relleno: 15px 18px;
Decoración de texto: ninguna;
tamaño de fuente: 17px;


Las etiquetas de anclaje se muestran como elementos de nivel de bloque para crear una barra de navegación vertical.

Producción

Se creó una barra de navegación vertical con éxito.

Cómo alinear la barra de navegación vertical

Para alinear su barra de navegación vertical, puede flotar a su posición deseada junto con darle un ancho.

CSS

.topnav
Color de fondo: gris;
Ancho: 30%;
flotar derecho;
desbordamiento: oculto;


Aquí estamos estableciendo la propiedad flotante de la derecha y dando al Div un ancho del 30%.

Producción

La barra de navegación vertical se flotó a la derecha.

Conclusión

Una barra de navegación juega un papel vital en el aumento de la experiencia del usuario de un sitio web, por lo tanto, puede hacer una barra de navegación de aspecto agradable utilizando varios enfoques. Para crear una barra de navegación horizontal, puede usar elementos de lista HTML o combinación de div y etiqueta en CSS. Puede hacer muchas cosas divertidas con su barra de navegación, como flotar un enlace a la derecha, convertirlo en una barra de navegación fija o hacerlo pegajoso según sus requisitos. Además de esto, también puede crear una barra de navegación vertical mostrando enlaces como elementos de nivel de bloque. Esta publicación lo guía todo sobre la creación y el diseño de una barra de navegación.