Etiqueta: Barra de navegación horizontal con CSS

CSS
Sutil Web Fragmentos de código, Lenguajes de programación , ,

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>
Sutil Web Fragmentos de código, Lenguajes de programación , , ,

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.

Sutil Web Fragmentos de código, Lenguajes de programación , , ,

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: