Para aprender a desarrollar una web es muy importante saber cómo crear una barra de navegación en CSS, debido a que si se hiciera solamente con HTML se vería una simple lista con un fondo blanco, que no tendría sentido para el usuario o no tendría nada interesante, pero sin en cambio se la aplican estilos CSS, como diferentes colores, diferentes formas de colocar la información, esto sería más atractivo para el usuario, por lo cual se quedaría mucho más tiempo.
Aunque parezca difícil o suene difícil realizarle estilos a una página web, no es tan complicado como parece, simplemente se debe de crear otro archivo nuevo y asignarle una serie de modificaciones como las que veremos en esta página.
Barra de navegación en CSS
👊 ¿QUIERES INCREMENTAR TUS CONOCIMIENTOS EN HTML y CSS? 👊
Entonces te recomiendo tomar este curso de HTML y CSS donde aprenderás estos lenguajes desde cero hasta convertirte en un experto, realizando varios ejercicios prácticos para que puedas aprender de una mejor manera.
👇
CURSO COMPLETO
Creación de archivo HTML
Es muy importante que para poder colocar estilos CSS debe de existir previamente un archivo HTM, ac continuación se presenta un ejemplo de una barra de navegación básica en HTML que se muestra en el siguiente código.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>My web site</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<header>
<div class="header-inner">
<a href="index.html" id="logo">
<img src="img-8.png" alt="IMG test">
</a>
<nav>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="#services">Experience</a></li>
<li><a href="#skills">Languages</a></li>
<li><a href="#proyectos">Projects</a></li>
<li><a href="#contacto">Contact</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Cómo se puede observar se usan etiquetas simples como las de listas e imágenes.
En caso de que no entiendas cómo funciona una estructura HTML, te invito que visites mi página principal, donde encontrarás otros temas relacionados a crear una página web para que aprendas.
Creación de archivo CSS
Una vez que se tiene el archivo HTML con su respectiva información, ahora se debe crear un nuevo archivo, pero éste debe ser llamado con el nombre que usted prefiera, pero debe de tener la terminación .css, en ese archivo es donde se deben integrar todas las configuraciones que se quieren realizar de la barra de navegación en CSS
Antes de empezar a realizar configuraciones en el archivo para la barra de navegación en CSS, es muy importante integrar ese archivo en nuestro archivo HTML, para que este al momento de qué el navegador web cargue la página lea los estilos, debido a que, de no ser así, los estilos no se aplicarían correctamente.
Para hacer eso simplemente que debe de colocar una simple etiqueta de <link> en nuestro archivo HTML, ésta se debe colocar en la sección HEAD de nuestro archivo, como se presenta a continuación.
<link rel="stylesheet" href="style1.css">
Además de eso es muy importante que el archivo para la barra de navegación en CSS esté en la misma carpeta donde está el archivo HTML para que esto funcione correctamente.
Creación de estilos de la barra de navegación en CSS
El primer estilo de la barra de navegación en CSS que vamos a aplicar va a ser a los enlaces, a los cuales le vamos a definir un color de letra de color negro, después a este lo vamos a quitar la decoración para que no muestre el texto, que está por defecto subrayado y por último le vamos a cambiar la fuente al estado de negritas, para que se vea más intenso.
a{
color: black;
text-decoration: none;
font-weight: bold;
}
A los mismos enlaces le vamos a aplicar otro estilo, pero ahora vamos a utilizar la sentencia :hover, que eso se refiere para definir los estilos cuando el cursor esta sobre el enlace, para el cual simplemente le vamos a cambiar el color de la letra para que se vea diferente.
a:hover{
color: #50585b;
}
A lo siguiente que vamos a aplicar estilos van a ser a las imágenes que se encuentran definidas como logos, primero lo vamos a definir como un bloque para que ocupe todo el ancho del bloque, después nos vamos a definir un margen de cero automático para que se centre la imagen correctamente, después le vamos a colocar una anchura máxima del 100% para que ésta no sobrepase mucho espacio.
Se le va a definir un ancho y una altura automática para que se ajuste al espacio de la barra de navegación en CSS y por último se le va a colocar un margen inferior de -4 pixeles para que la imagen se ajuste un poco más hacia abajo.
img{
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
width: auto;
margin-bottom: -4px;
}
👊 ¿NECESITAS UN HOSTING PARA TU PAGINA WEB O TIENDA ONLINE? 👊
Entonces te recomiendo usar Hostinger, que cuenta con una gran cantidad de ventajas y herramientas para crear tu Web de manera sencilla y profesional.
Estas son una de las características al contratar Hostinger:
💽 Hospedaje Profesional
💻 Sitio Web seguro con SSL
🔋 Velocidad de procesamiento
🖲 Interfaz fácil de usar
💰 Dominio Gratis
Entre muchas otras cosas mas…
Para toda la etiqueta del HEADER le vamos a colocar un fondo específico, también vamos a definir que ocupe un ancho del 100% del navegador y una altura de 100 pixeles, además de qué se coloque todo desde la posición izquierda arriba.
header{
background: #c3d7df;
width: 100%;
height: 100px;
top: 0;
left: 0;
}
A las imágenes que se encuentran dentro del HEADER se les va a colocar un margen de 20 pixeles, una anchura de 80 pixeles y se van a colocar una después de la otra.
header #logo img{
margin: 20px;
float: left;
width: 80px;
}
A los estilos específicos de la barra de navegación en CSS se van a colocar los que se presentan a continuación, los cuales van a hacer que se acomoden las listas de izquierda derecha y se les va a colocar todos los estilos para que se vea de manera correcta.
nav{
float: right;
padding: 25px 25px 0 0;
}
ul{
list-style: none;
}
nav ul li{
font-size: 150%;
display: inline-block;
padding: 10px;
}
nav ul li a{
color: #6991ac;
}
Resultado de la barra de navegación en CSS
Resultado de nuestra barra de navegación utilizando todos los códigos presentados anteriormente se van a observar de la siguiente manera.
Ya una vez teniendo este código es muy fácil modificar cada una de las opciones para definir tu color preferido y los fondos que quieras aplicar para que se vea diferente tu página web.
