Latest web development tutorials

CSS barra de navegación

Ejemplo: Barra de navegación


Barra de navegación

el uso adecuado de navegación para cualquier sitio web es muy importante.

Con CSS se puede convertir en una bonita barra de navegación HTML en lugar de menús aburridos.


Navegación Lista vincula =

Como una barra de navegación basado en el estándar HTML es una necesidad

. En nuestro ejemplo vamos a crear una lista de HTML barra de navegación estándar.

Barra de navegación es básicamente una lista de enlaces, a fin de utilizar <ul> y <li> Los elementos son muy significativas:

Ejemplos

<ul>
<li><a href="default.asp">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>

Trate »

Ahora, vamos a eliminar márgenes y el relleno de la lista:

Ejemplos

ul
{
list-style-type:none;
margin:0;
padding:0;
}

Trate »

Ejemplos de análisis:

  • list-style-type: ninguno - antes de retirar la lista de banderas pequeñas. Una barra de navegación no necesita marcadores lista
  • Retire ajuste predeterminado márgenes y el relleno conjunto del navegador a 0

El código de ejemplo anterior se encuentra en los códigos de barras verticales y horizontales de navegación estándar utilizados.


barra de navegación vertical

El código anterior, sólo necesitamos elementos de estilo <a>, el establecimiento de una barra de navegación vertical:

Ejemplos

a
{
display:block;
width:60px;
}

Trate »

El ejemplo muestra:

  • display: block - mostrar enlaces elemento de bloque, por lo que la totalidad se convierte en una zona de enlace activo (no sólo texto), lo que nos permite especificar el ancho
  • Ancho: 60px - Los elementos de bloque por defecto es la anchura máxima. Queremos especificar una anchura de 60 píxeles

Consejo: Ver ejemplo de un estilo totalmente barra de navegación vertical .

Nota: Asegúrese de especificar el ancho del elemento en los <a> barra de navegación vertical 's.Si se omite el ancho, IE6 puede producir resultados inesperados.


Barra de navegación horizontal

Hay dos maneras de crear una barra de navegación horizontal. Use elementos de listaintegrado o flotante.

Ambos métodos están bien, pero si quieres enlazar con el mismo tamaño, debe utilizar el método de flotación.

elementos de la lista en línea

Uno de construir una barra de navegación horizontal es especificar

  • Elemento, el código anterior es el estándar incorporado:

    Ejemplos

    li
    {
    display:inline;
    }

    Trate »

    ejemplos de análisis:

    • display: inline; - Por defecto, <li> elemento es un elemento de bloque. A continuación, se elimina los saltos de línea antes y después de cada elemento de la lista, para mostrar la línea.

    Consejo: Ver ejemplo de una barra de navegación horizontal totalmente de estilo .

    Flotante elementos de la lista

    En el ejemplo anterior enlaces tienen diferentes anchuras.

    Para todos los enlaces de igual anchura, flotar <li> y especificar el ancho del elemento <a>:

    Ejemplos

    li
    {
    float:left;
    }
    a
    {
    display:block;
    width:60px;
    }

    Trate »

    ejemplos de análisis:

    • float: left - utilizar las diapositivas elemento deslizante al lado del otro
    • display: block - mostrar enlaces elemento de bloque, por lo que la totalidad se convierte en una zona de enlace activo (no sólo texto), lo que nos permite especificar el ancho
    • Ancho: 60px - Los elementos de bloque por defecto es la anchura máxima. Queremos especificar una anchura de 60 píxeles

    Consejo: Ver ejemplo de una barra de navegación horizontal totalmente de estilo. .