Blog

CSS

Barra de posición fija en la parte superior con CSS

Vamos a escribir la sintaxis para crear una barra de menús de posición fija en nuestra página web, veamos la sintaxis HTML y CSS que vamos a utilizar.

<!DOCTYPE html>
<html lang="es">
<head>
<style>
body {
font-size: 26px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /*SAFARI*/
position: sticky;
top: 0;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4caf50;
}
</style>
</head>

<body>
<div class="header">
<h2>Desplaza el ratón hacia abajo</h2>
<p>Desplaza el botón hacia abajo para ver el efecto</p>
</div>

<ul>
<li><ahref="#"class="active">Home</a></li>
<li><ahref="#">Quienes somos</a></li>
<li><ahref="#">Donde estamos</a></li>
<li><ahref="#">Contacto</a></li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you
 reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky
 positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet,
 illum definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
 evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet,
 illum definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
 evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum
 definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
 evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum
 definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
 evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum
 definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
 evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum
 definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
 evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum
 definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</body>
</html>

Barra de navegación fija en la parte superior de la página

Vamos a crear un ejemplo en el que haremos que una barra de navegación quede fija en la parte superior de nuestra página, para ello utilizaremos la siguiente sintaxis HTML y CSS:

<!DOCTYPE html>
<html lang="es">
<head>
<style>
body {margin: 0;}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #04aa6d;
}
</style>
</head>

<body>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Quienes somos</a></li>
<li><a href="#">Donde estamos</a></li>
<li><a href="#">Contacto</a></li>
</ul>

<div style="padding-top: 30px;">
<h1>Barra de navegación horizontal</h1>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
<p>Algún texto</p>
</div>
</body>
</html>

Si quisiéramos que el menú de navegación apareciera en la parte inferior tan sólo tendríamos que cambiar la sintaxis CSS de ul por la siguiente

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}

Cambiar la propiedad top por la propiedad bottom.

Enlaces alineados a la derecha con CSS

En este ejemplo vamos a utilizar CSS para alinear horizontalmente a la derecha enlaces. Veamos la sintaxis que vamos a utilizar.

<!DOCTYPE html>
<html lang="es">
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;

}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #04aa6d;
}
</style>
</head>

<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Quienes somos</a></li>
<li><a href="#">Donde estamos</a></li>
<listyle="float: right"><a href="#"class="active">Contacto</a></li>
</ul>
</body>
</html>

a

Enlace de navegación activo/actual con CSS

Os dejamos un ejm de cómo con CSS podemos crear barras de navegación, en este caso se mostrará un enlace de navegación activo.

El código sería el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #04aa6d;
}
</style>
</head>

<body>
<ul>
<li><ahref="#"class="active">Home</a></li>
<li><ahref="#">Quienes somos</a></li>
<li><ahref="#">Donde estamos</a></li>
<li><ahref="#">Contacto</a></li>
</ul>
</body>

</html>

El resultado sería el siguiente

Barra de navegación horizontal con CSS

Veamos un ejemplo de una barra de navegación horizontal con CSS. El código que hay que crear es el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}
</style>
</head>

<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="">Quienes somos</a></li>
<li><a href="#">Dondes estamos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</body>
</html>

El resultado es el siguiente:

CSS

Barra de navegación vertical fija de altura completa

Veamos un ejemplo de como crear una barra de navegación vertical fija con altura completo. El código es el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
<style>
body {
margin: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

li a {
display: block;
color: #000;
padding: 8px16px;
text-decoration: none;
}

li a.active {
background-color: #04aa6d;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>

<body>
<ul>
<li><a href="#"class="active">Home</a></li>
<li><a href="#">Quienes somos</a></li>
<li><a href="#">Donde estamos</a></li>
<li><a href="#">Cont</a></li>
</ul>
</body>
</html>

El resultado es el siguiente