Hacer Menus

loquillo7 · #1 (**permalink**) 03/05/2005, 08:52

Buenas Foreros mi consulta es como poderia empezar hacer menus,es decir es la parte seuperior de la pagina hayga una seria de opciones y que al arrastrar el mouse a cualquier opcion de ellas se depliegue un conjunto de opciones y asi sucesivamente,ademas de como a un button le pueda poner una figura de fondo (*.gif) muchas gracias.

trasgukabi · #2 (**permalink**) 03/05/2005, 09:00

busca en google menus DHTML.
Para lo del botón:
<input type="image" src="imagen.gif">
si quieres que mande el formulario, añade onclick="javascript:formulario.submit()"

focesar · #3 (**permalink**) 03/05/2005, 09:58

Depende, yo encontre un script bastante bueno que es el que uso, son tres archivos, aqui te los pongo

archivo html:
************************************************** **************


<html>
<head>
<title>Maximus - IE/NS</title>

<style>

</style>
<script language="javascript1.2" src="mainMaxim.js"></script>
</head>

<body onload="init()">
<script language="javascript1.2" src="menuMaxim.js"></script>
</body>
</html>
************************************************** **************

Archivo mainMaxim.js:
************************************************** **************

function MM_displayStatusMsg(msgStr) {
status=msgStr;
document.MM_returnValue = true;
}

function highlight(x){
document.forms[x].elements[0].focus()
document.forms[x].elements[0].select()
}

function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}

var NS
IE=document.all;
NS=document.layers;

hdrFontFamily="Verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#666666";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#CCCCCC";
linkTarget="_top";
YOffset=60;
staticYOffset=20;
menuBGColor="black";
menuIsStatic="no";
menuHeader="Main Index"
menuWidth=150; // Must be a multiple of 5!
staticMode="advanced"
barBGColor="#1298fd";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barText="MENU";

function moveOut() {
if (window.cancel) {
cancel="";
}

if (window.moving2) {
clearTimeout(moving2);
moving2="";
}
if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) {
if (IE) {ssm2.style.pixelLeft += (5%menuWidth);
}
if (NS) {
document.ssm2.left += (5%menuWidth);
}

moving1 = setTimeout('moveOut()', 5)
}
else {
clearTimeout(moving1)
}
};

function moveBack() {
cancel = moveBack1()
}
function moveBack1() {
if (window.moving1) {
clearTimeout(moving1)
}

if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) {
if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);
}
if (NS) {
document.ssm2.left -= (5%menuWidth);
}
moving2 = setTimeout('moveBack1()', 5)}
else {
clearTimeout(moving2)
}
};

lastY = 0;
function makeStatic(mode) {
if (IE) {winY = document.body.scrollTop;var NM=ssm2.style
}
if (NS) {winY = window.pageYOffset;var NM=document.ssm2
}
if (mode=="smooth") {
if ((IE||NS) && winY!=lastY) {
smooth = .2 * (winY - lastY);
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
if (IE) NM.pixelTop+=smooth;
if (NS) NM.top+=smooth;
lastY = lastY+smooth;
}
setTimeout('makeStatic("smooth")', 1)
}

else if (mode=="advanced") {
if ((IE||NS) && winY>YOffset-staticYOffset) {
if (IE) {NM.pixelTop=winY+staticYOffset
}
if (NS) {NM.top=winY+staticYOffset
}
}
else {
if (IE) {NM.pixelTop=YOffset
}
if (NS) {NM.top=YOffset-7
}
}
setTimeout('makeStatic("advanced")', 1)
}
}

function init() {
if (IE) {
ssm2.style.pixelLeft = -menuWidth;
ssm2.style.visibility = "visible"
}
else if (NS) {
document.ssm2.left = -menuWidth;
document.ssm2.visibility = "show"
}
else {
alert('Choose either the "smooth" or "advanced" static modes!')
}
}

function MM_displayStatusMsg(msgStr) {
status=msgStr;
document.MM_returnValue = true;
}
************************************************** **************

Archivo menuMaxim.js:
************************************************** **************
if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')}
tempBar=""
for (i=0;i<barText.length;i++) {
tempBar+=barText.substring(i, i+1)+"<BR>"}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>')
function addItem(text, link, target) {
if (!target) {target=linkTarget}
document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER>< LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')}
function addHdr(text) {
document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')}

//Only edit the script between HERE

addItem('Dynamic Drive', 'http://www.dynamicdrive.com', '');
addItem('What\'s New', 'http://www.dynamicdrive.com/new.htm', '');
addItem('What\'s Hot', 'http://www.dynamicdrive.com/hot.htm', '');
addItem('Forum', 'http://wsabstract.com/cgi-bin/Ultimate.cgi', '');
addItem('FAQs', 'http://www.dynamicdrive.com/faqs.htm', '');
addItem('Submit', 'http://www.dynamicdrive.com/submitscript.htm', '');
addHdr('External Links');
addItem('Website Abstraction', 'http://wsabstract.com', '_blank');
addItem('Freewarejava', 'http://freewarejava.com', '_blank');
addItem('DHTML Zone', 'http://www.dhtml-zone.com/', '_blank');
addItem('Active-X.com', 'http://www.active-x.com', '_blank');
addItem('Web Review', 'http://www.webreview.com', '_blank');
addItem('David\'s Website', 'http://www.david-thurston.co.uk', '_blank');

// and HERE! No more!

document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>')
if (IE) {document.write('</DIV>')}
if (NS) {document.write('</LAYER>')}
if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}

focesar · #4 (**permalink**) 03/05/2005, 10:00

Si lo que quieres es que salgan imagenes en lugar de los colore edita las variables BGColor y remplazalas por background en el archivo menuMaxm

Santiago Cortes · #5 (**permalink**) 03/05/2005, 10:20

Mia yo uso el codigo central de Xara Webstyle es muy bueno lo uso para varias opciones y despliegues pero si quieras algo mas presentable y sin imagenes puedes usar menus hechos en DHTML hay varios progrmas que los haen y quedan chulos mi buen, solo buscalos en GOGOL o sease GOOGLE

chalchis · #6 (**permalink**) 03/05/2005, 18:59

http://www.sothink.com/webtools/dhtm...tore/index.htm

http://www.xtreeme.com/dhtml/download/

http://www.softcomplex.com/products/tigra_menu_gold/