Black menu vertical con CSS3

Black menu vertical

Hola de nuevo a todos los que me visitan xD,  bueno esta vez les comparto un menú que hice hace poco utilizando algo de css3 y html, yo creo que me quedo bien, aunque se que no es la gran cosa se los comparto para los usuarios que necesiten uno asi en su sitio web o blog, el menú es negro con un efecto hover, además esta en vertical, luego tratare de hacer uno desplegable y en horizontal y se los compartire, bueno entonces empesamos, es muy sencillo tenerlo y ligero:

copia y pega el siguiente código css en donde tengas los estilos de tu web, si usas blogger busca ]]></b:skin> y arriba pega el siguiente código

 #menu {
    border: 2px solid #000000;
    list-style: none outside none;
    margin: 0;
    max-width: 200px;
    padding: 0;
    position: relative;
}

#menu li a {
    background-color: #333333;
    border-bottom: 1px solid #000000;
    border-top: 1px solid #444444;
    text-align: left;
    color: #DDDDDD;
    display: block;
    font-family: Arial,Helvetica;
    font-size: 13px;
    font-weight: bold;
    padding: 12px 15px;
    text-decoration: none;
    text-decoration: none;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

#menu li a:hover {
    padding-left:30px;
    background-color: #444;
    border-bottom: 1px solid #111;
    border-top: 1px solid #555;
    color: #FFF;
}

 Pega el siguiente código Html en donde quieras el menú:

<ul id="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
< /ul>

Lo que esta en rojo lo cambian por lo que ustedes quieran, y los "#" lo cambian por el link deseado para su menú, pueden agregar o quitar contenedores "</li>" para agrandar o encojer el menu dependiendo de cuantos links quieran tener

 El resultado sera el siguiente:

• Menu 1
• Menu 2
• Menu 3
• Menu 4
• Menu 5
• Menu 6

un menu simple pero bonito, espero les haya gustado, si tienen algun problema o pregunta dejenla en un comentario :)

 

 

 

Escrito Por: css.zanime-mf.com