Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje12-01-2009, 21:26 (UTC)    
Título del mensaje: [Código Javascript] Spry: Menú Vertical desplegable

Hola! no he visto este codigo en PWG y cosa que me sorprende mucho ya que es mas facil que el de horizontal, solo lo he visto en el servicio de PWG en ingles OFW

ADVERTENCIA!=Este es un codigo Spry asi que tienen que colocar algo asi como:

"Codigo hecho por Spry Microsoft" o "Codigo hecho por Spry Adobe" o "codigo hecho por Spry Dreamweaver" cualquiera de los tres esta bien xD

Truco es este:

Hacer un menú vertical con la misma opcion del menu horinzontal: colocar un link que tenga sub-categorias al pasar por enzima el mouse.

Pre-visualizacion:



NOTA!=Este codigo es corto, asi que no crean que es tan largo como la media cosa que es el horinzontal

Lo primero es colocar este corto codigo en "Texto por enzima de la pagina"

Cita:
<script src="http://img9.xooimage.com/files/5/7/7/sprymenubar10-a01cdc.js" type="text/javascript"></script>
<link href="http://img7.xooimage.com/files/9/d/6/sprymenubarvertical10-a01cfd.css" rel="stylesheet" type="text/css" />


Nota!=El archivo .css pueden descargarlo, editarlo y luego subirlo de nuevo y sustituir la url por el nuevo.

y ahora simplemente colocamos este codigo HTML en la seccion que queramos colocar el menú(Editen lo que esta en rojo):

Cita:
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Elemento 1</a>
<ul>
<li><a href="#">Elemento 1.1</a></li>
<li><a href="#">Elemento 1.2</a></li>
<li><a href="#">Elemento 1.3</a></li>
</ul>
</li>
<li><a href="#">Elemento 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Elemento 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Elemento 3.1</a>
<ul>
<li><a href="#">Elemento 3.1.1</a></li>
<li><a href="#">Elemento 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Elemento 3.2</a></li>
<li><a href="#">Elemento 3.3</a></li>
</ul>
</li>
<li><a href="#">Elemento 4</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"Imagen que va a ir a la derecha de un link con sub-categorias"});
//-->
</script>


Ultima edición por noticiaspwg el Lun Ene 19, 2009 1:43 pm; editado 1 vez
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group