menus desplegables

**javidj** · Tema: menus desplegables Miér Nov 12, 2008 2:50 pm

en vista de ser la moda ahora, voy a localizar y explicar, como crear menus desplegables:
este es uno basico: (aqui no funcionan)

Código:

<form>
<SELECT NAME="urldestino">
<option selected>elije pagina:
<option value="http://">texto
<option value="http://">texto
<option value="http://">texto
<option value="http://">texto
<option value="http://">texto
</SELECT>
<input type="button" value="IR" onClick="location=this.form.urldestino.value" name="button">
</form>

donde dice http, debes poner el link de esa pagina, y donde dice texto, es lo que la gente verá. ojo! no modifiques donde dice "urldestino" para añadir o quitar paginas, modifica esta frase:
------------------------
tambien podemos hacer de varias categorias, por ejemplo 3 seria asi:

Código:

<form>
<SELECT NAME="urldestino">
<option selected>elije pagina:
<option value="http://">texto
<option value="http://">texto
<option value="http://">texto
<option value="http://">texto
<option value="http://">texto
</SELECT>
<SELECT NAME="urldestino">
<option selected>elije pagina:
<option value="http://">texto
<option value="http://">texto
<option value="http://">texto
<option value="http://">texto
<option value="http://">texto
</SELECT>
<SELECT NAME="urldestino">
<option selected>elije pagina:
<option value="http://">texto
<option value="http://">texto
<option value="http://">texto
<option value="http://">texto
<option value="http://">texto
</SELECT><input type="button" value="IR" onClick="location=this.form.urldestino.value" name="button">
</form>

____________________________
Descubre el gremio Templarios AQUI

Spoiler:

**javidj** · Tema: Re: menus desplegables Miér Nov 12, 2008 5:11 pm

tipo cascada: (esto imita como el menu de inicio de tu pc)
este es un poco mas complejo, NO MODIFIQUE NADA MAS QUE EL LINK HTTP: Y EL TEXTO, pegalo todo junto donde quieras que salga abre spoiler porque ocupa mucho..

Spoiler:

Código:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
/* Make the menu float to the left of the text. */
#menu {float:left; width:50pt; background:lightgrey;
border:2px white outset; cursor:default}
/* Hide the pop-up menus initially. */
#menu .popup {position:absolute; display:none;
background:lightgrey; border:2px white outset;
width:135pt; margin:2pt}
#menu P {margin-top:0pt; margin-bottom:0pt}
.over {color:navy; font-weight:bold}
</STYLE>
<script LANGUAGE="Javascript">
var curPop = null;

function clearCurrent() {
// Hide the pop-up menu that is currently displayed.
if (null != curPop)
curPop.style.display = "";
curPop = null;
}

function popup() {
var el = event.srcElement;
clearCurrent();
// Display a new menu option.
if (("P" == el.tagName) &&
("menu" == el.parentElement.id)) {
// Position and display the pop-up menu.
var elpop = document.all[el.sourceIndex + 1];
elpop.style.pixelLeft = document.all.menu.offsetLeft +
document.all.menu.offsetWidth - 7;
elpop.style.pixelTop = el.offsetTop +
document.all.menu.offsetTop;
elpop.style.display = "block";
curPop = elpop;
}
event.cancelBubble = true;
}

function highlight() {
// Highlight the menu options.
if (null != event.fromElement)
if ((event.fromElement.tagName == "P") &&
(event.fromElement.parentElement.id == "menu"))
event.fromElement.className = "";
if (null != event.toElement)
if ((event.toElement.tagName == "P") &&
(event.toElement.parentElement.id == "menu"))
event.toElement.className = "over";
}
</script>

</HEAD>
<BODY bgcolor="white" ONCLICK="clearCurrent()">

<DIV ID="menu" ONCLICK="popup()" ONMOUSEOVER="highlight()"
ONMOUSEOUT="highlight()">
<P>TITULO DE CATEGORIA 1
<DIV CLASS="popup">
<P><A HREF="http://">texto1</A>
<P><A HREF="http://">texto 2</A>
<P><A HREF="http://">texto 3</A>
<P><A HREF="http://">texto 4</A>
<P><A HREF="http://">texto 5</A>
</DIV>
<P>TITULO DE CATEGORIA 2
<DIV CLASS="popup">
<P><A HREF="http://">TEXTO 1.2</A>
<P><A HREF="http://">TEXTO 2.2</A>

</DIV>

</div>

</body>
</html>

y aqui la explicacion para editar:

Spoiler:

____________________________
Descubre el gremio Templarios AQUI

Spoiler:

**javidj** · Tema: Re: menus desplegables Miér Nov 12, 2008 6:06 pm

menu css editable esta es la madre de todas jeje. esta ya si es mucho mas compleja, pero es editable de tipo de desplegable (hacia donde queremos que abra al pasar el mouse), color, tamaño, links...etc...
AQUI VEREIS EL RESULTADO, Y AL TIEMPO LA FUENTE ORIGINAL DE DONDE SALE http://www.saulo.net/pub/dweb/dhtml-menu.htm

Spoiler:

Código:

<html>
<head>
<title>Menú desplegable con capas</title>
<link rel="StyleSheet" href="../estilo.css" title="Formulario" media="screen" type="text/css" />
<style>
#menu1, #menu2, #menu3, #menu4 {
display:inline;
position:absolute;
width:100px;
background-color:#BFD8D8;
color:navy;
border: 1px solid navy;
visibility:hidden;
}

#menu1 {
left:10px;
top:10px;
height:10px;
visibility:visible;
}

#menu2 {
left:95px;
top:15px;
height:20px;
}

#menu3 {
left:180px;
top:20px;
height:20px;
}

#menu4 {
left:180px;
top:40px;
width:200px;
height:20px;
}

#opcion1, #opcion1_1, #opcion1_2, #opcion1_1_1, #opcion1_1_2, #opcion1_2_1 , #opcion1_2_2 {
width:100%;
font-weight:bold;
background-color:#BFD8D8;
color:navy;
border-width: 0;
padding:5px;
cursor:hand;
}
#opcion1 {
top:0%;
height:100%;
}
#opcion1_1, #opcion1_1_1, #opcion1_2_1 {
top:0%;
height:50%;
}
#opcion1_2, #opcion1_1_2, #opcion1_2_2 {
top:50%;
height:50%;
}
</style>

<script>
function marcar(opc, a)
{
var color = "navy";
var bkcolor = "#BFD8D8";
if (a == true)
{
color = "white";
bkcolor = "navy";
}
document.all[opc].style.backgroundColor = bkcolor;
document.all[opc].style.color = color;
}

function vermenu1()
{
document.all['menu1'].style.visibility="visible";

document.all['menu2'].style.visibility="hidden";

document.all['menu3'].style.visibility="hidden";
document.all['menu4'].style.visibility="hidden";
}
function vermenu2()
{
vermenu1();
document.all['menu2'].style.visibility="visible";
}
function vermenu3()
{
vermenu2();
document.all['menu3'].style.visibility="visible";
}
function vermenu4()
{
vermenu2();
document.all['menu4'].style.visibility="visible";
}

function ir(url)
{
window.open ("http://" + url);
}
</script>

</head>

<body >
<div id="menu1">
<div id="opcion1" onmouseover="vermenu2();marcar('opcion1',true);"
      onmouseout="vermenu1();marcar('opcion1',false);">
Menú
</div>
</div>
<div id="menu2">
<div id="opcion1_1" onmouseover="vermenu3();marcar('opcion1_1',true);"
         onmouseout="vermenu1();marcar('opcion1_1',false);">
Buscadores<br>
</div>
<div id="opcion1_2" onmouseover="vermenu4();marcar('opcion1_2',true);"
onmouseout="vermenu1();marcar('opcion1_2',false);">
Diseño
</div>
</div>
<div id="menu3">
<div id="opcion1_1_1" onmouseover="vermenu3();marcar('opcion1_1_1',true);"
         onmouseout="vermenu1();marcar('opcion1_1_1',false);"
onclick="ir('www.google.com')">
Google<br>
</div>
<div id="opcion1_1_2" onmouseover="vermenu3();marcar('opcion1_1_2',true);"
         onmouseout="vermenu1();marcar('opcion1_1_2',false);"
onclick="ir('www.yahoo.com')">
Yahoo
</div>
</div>
<div id="menu4" onmouseout="vermenu1()">
<div id="opcion1_2_1" onmouseover="vermenu4();marcar('opcion1_2_1',true);"
onmouseout="vermenu1();marcar('opcion1_2_1',false);"
onclick="ir('html.conclase.net')">
HTML con clase<br>
</div>
<div id="opcion1_2_2" onmouseover="vermenu4();marcar('opcion1_2_2',true);"
onmouseout="vermenu1();marcar('opcion1_2_2',false);"
onclick="ir('www.htmlweb.net')">
HTML Web
</div>
</div>

</body>
</html>

Ahora explico:

#menu1, #menu2, #menu3, #menu4 { display:inline; position:absolute; width:100px; background-color:#BFD8D8; color:navy; border: 1px solid navy; visibility:hidden;	width:100px sera el tamaño de cada boton principal, background-color le damos el color, border, sera el borde del boton
#menu1 { left:10px; top:10px; height:10px; visibility:visible;	el left top y height, es para darle la orientacion si los ponemos a 0, abrira justo debajo, cada numero de menu es un boton
Google onmouseout="vermenu1();marcar('opcion1_1_2',false);" onclick="ir('www.yahoo.com')">	ahora mas abajo, donde esta el body del menu, aqui por ejemplo google. donde lo pinté de azul será lo que se verá en los botones, y el verde donde debemos escribir la direccion de la web

____________________________
Descubre el gremio Templarios AQUI

Spoiler: