Menu Vertical De Color Verde


Hoy les traigo un Menu Vertical de color verde, es un menu con una imagen de fondo sencilla pero el hover muestra un borde que lo hace atractivo.

El menu se compone de codigos HTML, CSS e imagenes por lo que no sera dificil su implementación.

Imagen de como quedara:


Ya visto como quedara el menu sigamos adelante con los codigos, el siguiente codigo lo tendras implantar en tu plantilla justo antes de: ]]></b:skin>

Esta es la parte donde finalizan los códigos css que le dan estilo a tu Blog.

Código CSS


#side_menu {
      margin: 0 0 20px 0; 
      width:200px;
      }

#side_menu li { 
     list-style: none; 
     }

#side_menu li a { 
     color: #ccc; 
     border: 0; 
     margin: 0 0 1px 0; 
     display: block; 
     background: #fff url(img/three_0a.jpg) no-repeat; 
     padding: 8px 10px; 
     }

#side_menu li a:hover { 
     color: #fff; 
     background: #fff url(img/three_1a.jpg) no-repeat; 
     } 
 
ul   {
     list-style: none;
     margin: 0;
     padding: 0;
     }

img  {
     border: none;
     }


Para los que esten empezando en el mundo de los Blog, Esta es la parte donde tendran que insertar la url de las imagenes despues de haberlas subido a picasa o a su servidor preferido: (img/three_1a.jpg).

Estas son las imagenes que utilizaremos para nuestro menu:

three_0a



three_1a



Código HTML


Este codigo lo debes poner en la sidebar, en la pestaña Diseño, Añadir un Gadget eliges en HTML/javascript y colocas el siguiente código:


<div id="side_menu">
  <ul>
  <li><a href="#1" title="Link 1">Link 1</a></li>
     <li><a href="#2" title="Link 2">Link 2</a></li>
     <li><a href="#3" title="Link 3">Link 3</a></li>
       <li><a href="#4" title="Link 4">Link 4</a></li>
        <li><a href="#5" title="Link 5">Link 5</a></li>
       <li><a href="#6" title="Link 6">Link 6</a></li>
    <li><a href="#7" title="Link 7">Link 7</a></li>
 </ul>
   </div>


Subir