necesito ayuda: como hacer un menu desplegable en html

claudia22
07 de Febrero del 2006
Hola Nesecito ayuda.
Como puedo poner un menu desplegable con vinculos hacia otras paginas en html o frontpage
por favor diganme se los agradecere mucho
ok gracias

Jose
07 de Febrero del 2006
hola, miraba si me habian contestado y he leido tu msg, estoy haciendo una pagina, y he empezado a usar las capas, nunca lo he hecho, pero estoy seguro que usandolas es posible conseguir lo que tu dices, la tienes que crear, con el submenu, en donde quieras que aparezca, con la propiedad:
-fijate en el display none-
<div id="mi capa" style="display:none;position:absolute; width:359px; height:350px; z-index:2; left: 355px; top: 146px;">

en el evento onClick del menu, tienes que hacer una funcion, que al pulsar mande el nombre desde donde hayas pinchado:
-algo asi-
<input name="button3" type="button" id="afi" onClick="muestraTexto(this.id)" value="Aficiones...">

la function:
function muestraTexto(name) {
if (name == 'afi') { //para saber de qué boton has pulsado
// muestras la capa del submenu
document.getElementById('mi capa').style.display = '';
}
}

algo asi, deberia funcionarte... pero te repito que nunca lo he probado, estoy yo tb un poco verde, haciendo preguntas al foro, y he visto lo tuyo y me apetecia mucho responder a la pregunta, ya me diras si te ha funcionado, ok??????????

claudia22
07 de Febrero del 2006
a jose
gracias por responder pero con ese metodo no lo logre, pero encontre una pagina donde apareció algo como esto

<form>
<SELECT NAME="numeros">
<option selected>--- M E N U ---
<option value="url para uno" >uno</option>
<option value="url para dos">dos</option>
<option value="url para tres">tres</option>
</SELECT>
<input type="button" value="IR" onClick="location=this.form.numeros.value" name="button">
</form>

que usa como base el formulario y con el location en el boton me manda al url de equis numero (uno, dos, tres)

de todos modos gracias

esto les puede servir a otras personas que se encontran en misma situacion

sifran
07 de Febrero del 2006
Mira, hay programas que te hacen un diseño grafico de diferentes clases de menus, y te generan un codigo en java scripts y lo pegas en tu HTMl, facila no!!!!.

saludos

sifran
07 de Febrero del 2006
ahhh se me olvidaba, crea menus horizontales.vertivles. popup, con submenus,etc.
En modo texto o grafico, son muy buenos, la cosas esta en hacer mas faciles, si todo esta hecho para que rompernos la cabeza.
saludos


Mauricio
07 de Febrero del 2006
Intenta esto el primero es el html y el segundo es el css
este es un menu de capas escondidas y disculpa alguna palabras pero tenia hueva de modificar el codigo, el css se tiene que llamar respaldo.css

Mauricio
07 de Febrero del 2006
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="respaldo.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 6;

//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = 6;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}

//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}

function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval(\'menuitem\'+i+\'.thediv\');
shutdiv.style.visibility=\'hidden\';
}
}
}
// -->
</script>
<style type="text/css">
<!--
body {
background-color: #000066;
}
-->
</style></head>
<body onmousemove="closesubnav(event);">
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<div id="masthead">
<h1 id="siteName">el rinconcito de mauricio</h1>
<div id="globalNav">
<div id="globalLink">
<a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">mauricio
</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global
link</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global
link</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global
link</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global
link</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global
link</a>
</div>
<!--end globalLinks-->
</div>
<!-- end globalNav -->
<div id="subglobal1" class="subglobalNav">
<a href="#">chingadera</a> | <a href="#">oscuridad</a> | <a href="#">rock</a> |
</div>
<div id="subglobal2" class="subglobalNav">
<a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a>
</div>
<div id="subglobal3" class="subglobalNav">
<a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
link</a> | <a href="#">subglobal3 link</a>
</div>
<div id="subglobal4" class="subglobalNav">
<a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4
link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4
link</a> | <a href="#">subglobal4 link</a>
</div>
<div id="subglobal5" class="subglobalNav">
<a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5
link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5
link</a> | <a href="#">subglobal5 link</a>
</div>
<div id="subglobal6" class="subglobalNav">
<a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
link</a> | <a href="#">subglobal6 link</a>
</div>
<div id="subglobal7" class="subglobalNav">
<a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
link</a> | <a href="#">subglobal7 link</a>
</div>
</div>
<!-- end masthead -->
<!--end pagecell1-->
<br>
<script type="text/javascript">
<!--
var menuitem1 = new menu(6,1,"hidden");
var menuitem2 = new menu(6,2,"hidden");
var menuitem3 = new menu(6,3,"hidden");
var menuitem4 = new menu(6,4,"hidden");
var menuitem5 = new menu(6,5,"hidden");
var menuitem6 = new menu(6,6,"hidden");
// -->
</script>
</body>
</html>

Mauricio
07 de Febrero del 2006
a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

/************ subglobalNav styles **************/

.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
color: #cccccc;
}

/*************** search styles *****************/

#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;

}

#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}


a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
text-decoration: none;
}

.skipLinks {display: none;}