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.