Demostración: barras de exploración
Barras de navegación
Tener una navegación fácil de usar es importante para cualquier sitio web.
Con CSS se puede transformar menús HTML aburridas en barras de buen aspecto de navegación.
Barra de navegación = Lista de Enlaces
Una barra de navegación necesita HTML estándar como base.
En nuestros ejemplos vamos a construir la barra de navegación de una lista HTML estándar.
Una barra de navegación es básicamente una lista de enlaces, así que usar el <ul> y <li> elementos hace perfecto sentido:
Ejemplo
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Inténtalo tú mismo " Ahora vamos a quitar las balas y los márgenes y el relleno de la lista:
Ejemplo explicó:
-
list-style-type: none;- Elimina las balas. Una barra de navegación no necesita marcadores lista - Conjunto
margin: 0;ypadding: 0;para eliminar la configuración predeterminada del navegador
El código en el ejemplo anterior es el código estándar utilizado en ambas barras de navegación vertical, y horizontal.
Vertical barra de navegación
Para construir una barra de navegación vertical, puede estilo de los <a> elementos dentro de la lista, además del código de seguridad:
Ejemplo explicó:
-
display: block;- Viendo los enlaces como elementos de bloque hace que toda la zona se puede hacer clic enlace (no sólo el texto), y que nos permite especificar el width (y padding, margin, height , etc. si quieres) -
width: 60px;- Los elementos de bloque ocupan todo el ancho disponible de forma predeterminada. Queremos especificar un ancho de 60 píxeles
También puede ajustar el ancho de <ul> , y quitar el ancho de <a> , ya que se ocupará de todo el ancho disponible cuando se muestran como elementos de bloque. Esto producirá el mismo resultado que el ejemplo anterior:
Ejemplo
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
} Inténtalo tú mismo " Ejemplos vertical de la barra de navegación
Crear una barra de navegación vertical básico con un color de fondo gris y cambiar el color de fondo de los enlaces cuando el usuario mueve el ratón sobre ellos:
Ejemplo
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} Inténtalo tú mismo " Activo / Corriente Enlace de Navegación
Añadir una clase de "activo" para el enlace actual para que el usuario sepa qué página que él / ella está en:
Centro de Enlaces y Agregar bordes
Añadir text-align:center a <li> o <a> para centrar los enlaces.
Añadir la border propiedad a <ul> añadir un borde alrededor de la barra de navegación. Si usted también quiere fronteras dentro de la barra de navegación, añadir un border-bottom a todos los <li> elementos, a excepción de la última:
Ejemplo
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} Inténtalo tú mismo " De altura completa barra de navegación vertical fijo
Crear una altura completa, "sticky" de navegación de la:
Ejemplo
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} Inténtalo tú mismo " Nota: Este ejemplo podría no funcionar correctamente en dispositivos móviles.
Barra de navegación horizontal
Hay dos maneras de crear una barra de navegación horizontal. El uso de elementos de la listaen línea o flotante.
Elementos de lista en línea
Una forma de construir una barra de navegación horizontal es especificar los <li> elementos como en línea, además de la "standard" el código de seguridad:
Ejemplo explicó:
-
display: inline;- Por defecto, <li> elementos son elementos de bloque. A continuación, se elimina los saltos de línea antes y después de cada elemento de la lista, para mostrarlos en una sola línea
Flotante elementos de lista
Otra forma de crear una barra de navegación horizontal es flotar los <li> elementos, y especificar un diseño para el menú de navegación:
Ejemplo
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
} Inténtalo tú mismo " Ejemplo explicó:
-
float: left;- utilización de flotación para obtener elementos de bloque para deslizar uno junto al otro -
display: block;- Viendo los enlaces como elementos de bloque hace que toda la zona se puede hacer clic enlace (no sólo el texto), y que nos permite especificar el relleno (y height, width, margins , etc. si quieres) -
padding: 8px;- Dado que los elementos de bloque ocupan todo el ancho disponible, no pueden flotar junto a la otra. Por lo tanto, especifique algo de relleno para que se vean bien -
background-color: #dddddd;- Añadir un fondo gris-color a cada elemento
Consejo: Añada el color de fondo a <ul> en lugar de cada <a> elemento si desea un color de fondo de ancho completo:
Ejemplos horizontal barra de navegación
Crear una barra de navegación horizontal básico con un color de fondo oscuro y cambiar el color de fondo de los enlaces cuando el usuario mueve el ratón sobre ellos:
Ejemplo
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;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
} Inténtalo tú mismo " Activo / Corriente Enlace de Navegación
Añadir un "active" clase para el enlace actual para que el usuario sepa qué página que él / ella está en:
Enlaces de alineación derecha
Enlaces de alineación derecha, por flotación de los elementos de la lista a la derecha ( float:right; ):
Ejemplo
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul> Inténtalo tú mismo " Los divisores de frontera
Añadir la border-right propiedad a <li> para crear separadores de enlace:
Ejemplo
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
} Inténtalo tú mismo " Fijo barra de navegación
Hacer la estancia barra de navegación en la parte superior o inferior de la página, incluso cuando el usuario se desplaza por la página:
Nota: Estos ejemplos podrían no funcionar correctamente en dispositivos móviles.
Gris horizontal barra de navegación
Un ejemplo de una barra de navegación horizontal gris con un borde gris delgada:
Ejemplo
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Inténtalo tú mismo " 
Más ejemplos
topnav sensible
Cómo utilizar CSS3 preguntas de los medios para crear una barra de navegación superior sensible.
Sidenav sensible
Cómo utilizar CSS3 preguntas de los medios para crear una navegación de la capacidad de respuesta.
desplegable barra de navegación
Cómo agregar un menú desplegable en el interior de una barra de navegación.