Menu Vertical Despegable Hacia La Derecha


Hoy les traigo un menu vertical despegable hacia el lado derecho.

Este menu se compone de html, css, y java scrip con la posibilidad de insertar el codigo java en la misma pagina ya que es pequeño.

Aqui una imagen de como queda el menu:



Como les habia mensionado podeis incluir el codigo directamente en la cabezera de blog o subirlo a un servidor y llamar el codigo mediante un enlace. eso ya seria a tu gusto.

Tambien puedes cambiarle el color al fondo del menu y ponerle uno a tu gusto, eso te lo explicare mas adelante por ahora vamos con los codigos, asi que manos a la obra.

Codigo JavaScrip


Nota: para incluir este codigo en tu blog solo copia y pegalo en la plantilla antes de </head>


<script type='text/javascript'>

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</script>



Codigo CSS


Nota: para tu Blog solo copia y pega el codigo en la plantilla antes de ]]></b:skin>


ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 160px;
 }


ul li {
 position: relative;
 }


li ul {
 position: absolute;
 left: 159px;
 top: 0;
 display: none;
 }


ul li a {
 display: block;
 text-decoration: none;
 color: #000;
 background: #D3E4F4;
 padding: 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
 }

ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 160px;
 border-bottom: 1px solid #ccc;
 }

li:hover ul { display: block; 
            }

li:hover ul, li.over ul { 
 display: block; 
                      }


ul  a:hover {
             background: #E2EBF3;
             }



Codigo HTML


Este codigo como es obvio deves de incluirlo en la sidebar. solo tienes que ir a Diseño y en Añadir un gadget elegir html/Javascript, copiar y pegar y listo.


<ul id="nav"> 
  <li><a href="#">Inicio</a></li> 
  <li><a href="#">Link 1</a> 
    <ul> 
      <li><a href="#">Link 1.1</a></li> 
      <li><a href="#">Link 1.2</a></li> 
      <li><a href="#">Link 1.3</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Link 2</a> 
    <ul> 
      <li><a href="#">Link 2.1</a></li> 
      <li><a href="#">Link 2.2</a></li> 
      <li><a href="#">Link 2.3</a></li> 
      <li><a href="#">Link 2.4</a></li> 
      <li><a href="#">Link 2.5</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Link 3</a> 
    <ul> 
      <li><a href="#">Link 3.1</a></li> 
      <li><a href="#">Link 3.2</a></li> 
      <li><a href="#">Link 3.3</a></li> 
      <li><a href="#">Link 3.4</a></li> 
    </ul> 
  </li> 
</ul>


Para cambiar el color del fondo solo hay que cambiar el valor que hay en background en esta parte del codigo css.



ul li a {
 display: block;
 text-decoration: none;
 color: #000;
 background: #D3E4F4;
 padding: 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
 }


Si tienes problemas con el codigo puedes ponerte en contacto mediante mi correo.

Subir