Ayuda

mundolinux · #1 (**permalink**) 13/06/2009, 12:54

estoy haciendo un sitio web, me gustaria colocarle unos botones que con solo apoyar el puntero del mouse se despliegue una lista de opciones lo vi en varias pagina si alguien sabe como hacerlo me gustaria que me pasen el script.
Gracias

American2010 · #2 (**permalink**) 13/06/2009, 15:22

Supongo que buscas algo del estilo de lo que tengo en www.elgastronomo.com.ar

Está hecho así...

Crea un pop.js primero y dentro le pones esto...

Código PHP:

  /***********************************************

* Pop-it menu- © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

 
var defaultMenuWidth="160px" //set default menu width.

 
var linkset=new Array()

//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

 
linkset[0]='<b><a href="100-mitos.php">100 mitos</a></b>'

linkset[0]+='<b><a href="las-conservas.php">Las conservas</a></b>'

 
linkset[1]='<b><a href="la-alimentacion.php">La alimentaci&oacute;n</a></b>'

linkset[1]+='<b><a href="el-peso.php">El peso</a></b>'

 
linkset[2]='<b><a href="chocolate.php">Chocolate</a></b>'

linkset[2]+='<b><a href="harina.php">Harina</a></b>'

 
////No need to edit beyond here

 
var ie5=document.all && !window.opera

var ns6=document.getElementById

 
if (ie5||ns6)

document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

 
function iecompattest(){

return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body

}

 
function showmenu(e, which, optWidth){

if (!document.all&&!document.getElementById)

return

clearhidemenu()

menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")

menuobj.innerHTML=which

menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth

menuobj.contentwidth=menuobj.offsetWidth

menuobj.contentheight=menuobj.offsetHeight

eventX=ie5? event.clientX : e.clientX

eventY=ie5? event.clientY : e.clientY

//Find out how close the mouse is to the corner of the window

var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX

var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY

//if the horizontal distance isn't enough to accomodate the width of the context menu

if (rightedge<menuobj.contentwidth)

//move the horizontal position of the menu to the left by it's width

menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"

else

//position the horizontal position of the menu where the mouse was clicked

menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"

//same concept with the vertical position

if (bottomedge<menuobj.contentheight)

menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"

else

menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"

menuobj.style.visibility="visible"

return false

}

 
function contains_ns6(a, b) {

//Determines if 1 element in contained in another- by Brainjar.com

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}

 
function hidemenu(){

if (window.menuobj)

menuobj.style.visibility="hidden"

}

 
function dynamichide(e){

if (ie5&&!menuobj.contains(e.toElement))

hidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

hidemenu()

}

 
function delayhidemenu(){

delayhide=setTimeout("hidemenu()",3000)

}

 
function clearhidemenu(){

if (window.delayhide)

clearTimeout(delayhide)

}

 
if (ie5||ns6)

document.onclick=hidemenu

Vas poniendo tantos linkesets como sean necesarios...

Luego en tu <head> pones

Código:

<script type="text/javascript" src="pop.js"></script>

Y luego ya donde tengas tu menu pones, por ejemplo yo lo tengo dentro de una lista, pones esto...

Código HTML:

<ul>
	<li><a href="index.php">Inicio</a></li>
	<li><a onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()" href="generales.php">Generales</a></li>
	<li><a onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()" href="alimentacion.php">Alimentaci&oacute;n</a></li>
	<li><a onMouseover="showmenu(event,linkset[2])" onMouseout="delayhidemenu()" href="ingredientes.php">Ingredientes</a></li>
	<li><a onMouseover="showmenu(event,linkset[3])" onMouseout="delayhidemenu()" href="destacados.php">Destacados</a></li>
	<li><a onMouseover="showmenu(event,linkset[4])" onMouseout="delayhidemenu()" href="vinos-y-licores.php">Vinos y Licores</a></li>
	</ul>

mundolinux · #3 (**permalink**) 14/06/2009, 09:04

si es justamente lo que estaba buscando lo que pasa que no encontraba un ejemplo para ponerlo, muchas gracias lo voy a probar y cualquier duda te consulto

mundolinux · #4 (**permalink**) 15/06/2009, 08:00

Tengo una consulta que programa utilizaste para hacer el menu que dice, inicio, generales. ingrdientes, etc.

American2010 · #5 (**permalink**) 15/06/2009, 09:54

Cita:

Iniciado por mundolinux

Tengo una consulta que programa utilizaste para hacer el menu que dice, inicio, generales. ingrdientes, etc.

En realidad el aspecto del sitio está tomado de un Theme que era para Wordpress, y lo adapté a mis nececidades, así que el menú ya estaba diseñado...

Igual hay algo que se llama CSS Tab Designer, buscalo que quizás te sirva...

http://css-tab-designer.softonic.com/

También hay una versión 2.0

http://www.highdots.com/css-list/

Suerte...

mundolinux · #6 (**permalink**) 16/06/2009, 08:32

Existe alguna version de ese progama para linux????? Por que yo uso Ubuntu.