Barras de navegación CSS | TIEngranaje

Tener una herramienta de navegación fácil de usar en su sitio web es muy importante en hacer que su sitio sea fácil de usar y SEO. A menos que esté codificando su sitio con un lenguaje de secuencias de comandos del lado del servidor como ASP.NET, necesitará la ayuda de CSS para que pueda transformar sus menús HTML simples en barras de navegación limpias y nítidas.

Podemos diseñar nuestra barra de navegación usando una variedad de métodos, pero usando un elemento de lista es, con diferencia, la herramienta más flexible de usar.

Comience con una lista HTML

La base de nuestra barra de navegación es una lista HTML, específicamente una lista desordenada. Aquí hay un ejemplo:

<ul id="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Sin especificar ningún CSS, tenemos una lista simple de elementos.

Aplicar estilo CSS

Podemos empezar aplicando valores a padding, margin, widthy list-style. Esto asegurará que podamos obtener una apariencia uniforme en los navegadores modernos.

ul#navbar {
    padding:0px;
    margin:0px;
    width:420px;
    list-style:none;
}

A continuación, debemos diseñar los elementos de la lista. Los elementos de la lista son normalmente elementos de nivel de bloque. Dado que estamos implementando una barra de navegación vertical, queremos que se muestren en línea.

ul#navbar li {
    display:inline
}

Para los enlaces, eliminaremos el subrayado estándar predeterminado, agregaremos algunos padding, aplique un color de fondo y un color de texto blanco. También especificaremos un width para cada enlace. Finalmente, float los elementos de la izquierda.

ul#navbar li a {
    text-decoration:none;
    padding:10px 0px;
    width:100px;
    background:#666666;
    color:#ffffff;
    float:left;
}

Nuestra barra de navegación está casi completa. Lo haremos poner algunos toques finales tales como centrar el texto, agregar un borde entre los elementos del menú y crear un efecto de desplazamiento.

ul#navbar li a {
    text-align:center;
    border-left:1px solid #ffffff;
}

ul#navbar li a:hover {
    background:#cccccc;
    color:#333333
}

Con algunos cambios menores, puedes crear una variedad de diferentes barras de navegación para sus proyectos web.