Borchani.COM – Blog

Menu Square es un menú bastante sencillo, pero que a la vez dentro de su sencillez tiene su estilo. Css utilizado en el Menu

CSS:

#shortcuts, #navigation {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-transform: lowercase;
} 

#shortcuts li, #navigation li {
    float: left;
}

#shortcuts li {
    padding-left: 1em;
}

#shortcuts a {
    font-size: 0.8em;
    color: #999;
    background: #333;
    text-decoration: none;
}

#navigation {
    padding-top: 43px;
    clear: right;
    letter-spacing: 1px;
}

#navigation li {
    height: 100px;
    line-height: 90px;
    width: 120px;
    text-align: center;
}

#navigation a {
    display: block;
    height: 100px;
    line-height: 90px;
    width: 120px;
    color: #fff;
    background-image:  url(images/navigation-2.jpg);
    background-repeat: no-repeat;
    background-position: -120px 0;
}

#navigation a:hover, #navigation a#current {
    font-size: 110%;
    background-position: 0 0;
}

#navigation a span {
    background: #525252;
    color: #fff;
}

Html

<ul id=”navigation”>

 

<li><a href=”http://www.borchani.com/” title=”borchani”><span>Home</span></a></li>
<li><a href=”http://www.borchani.com/Galeria/index.html” title=”Galeria”><span>Galeria</span></a></li>
<li><a href=”http://www.borchani.com/index.php/acerca-de/” title=”Acerca de”><span>Acerca de</span></a></li>
<li><a href=”http://www.borchani.com/index.php/contacto/” title=”contacto”><span>contacto</span></a></li>
        </ul