Foros del Web » Creando para Internet » CSS »

Mostrar Links del Menu en un DIV

Estas en el tema de Mostrar Links del Menu en un DIV en el foro de CSS en Foros del Web. Hola, he consultado algunos temas del foro, y he llegado hasta aquí en la página, de los elementos del menú, quiero que aparezcan en la ...
  #1 (permalink)  
Antiguo 17/04/2010, 02:26
Avatar de pepe2506  
Fecha de Ingreso: abril-2010
Mensajes: 1
Antigüedad: 7 años, 7 meses
Puntos: 0
Mostrar Links del Menu en un DIV

Hola, he consultado algunos temas del foro, y he llegado hasta aquí en la página,
de los elementos del menú, quiero que aparezcan en la capa de la derecha a la hora de hacer click, ya todos se ocultan y sólo se muestra 1 al mismo tiempo, el problema es que los va mostrando abajo del que apareció.
dejo mi código agradezco la ayuda....

el archivo

estilos.css

#titulo {background-color: #CCCC66;
height : 100px;
width: 700px;
border:none;
}
#menu {
width: 100px;
height: 400px;
background-color:#006600;
float:left;
}

#contenedor{
width: 700px;
background-color : #ffffff;
margin: auto;
}


#navega {
list-style:none;
margin:0;
padding:0; }

#navega li { margin:2px;
padding:2px;
}

#navega li a {
display:block;
width:100px;
padding:4px 0;
text-decoration:none;
text-align:center;
font-size:11px; color:#FFFFFF;
background-color:#000000;
}

#navega li a:hover {
color:#99CC00;
background-color:#003366;
}



#cont1 {
visibility:visible;
width: 600px;
background-color:#009933;
height: 400px;
float: right;
}

#cont2 {
visibility:hidden;
width: 600px;
background-color:#009933;
height: 400px;
float: right;
}

#cont3 {
visibility:hidden;
width: 600px;
background-color:#009933;
height: 400px;
float: right;
}

#cont4 {
visibility:hidden;
width: 600px;
background-color:#009933;
height: 400px;
float: right;
}


y el archivo index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="estilos.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estilos Css</title>


<script type="text/javascript">
function MM_findObj(n, d) {
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() {
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
</script>



</head>


<body onload="MM_showHideLayers('cont1','','show','cont2 ','','hide','cont3','','hide','cont4','','hide');" >

<div id="contenedor">

<div id="titulo">
T&iacute;tulo de la P&aacute;gina
</div>

<div id="menu">

<ul id="navega">
<li><a href="#"onclick="MM_showHideLayers('cont1','','sho w','cont2','','hide','cont3','','hide','cont4','', 'hide');">Inicio</a>
</li>
<li><a href="#"onclick="MM_showHideLayers('cont1','','hid e','cont2','','show','cont3','','hide','cont4','', 'hide');">Opción 1</a>
</li>
<li><a href="#"onclick="MM_showHideLayers('cont1','','hid e','cont2','','hide','cont3','','show','cont4','', 'hide');">Opción 2</a>
</li>
<li><a href="#"onclick="MM_showHideLayers('cont1','','hid e','cont2','','hide','cont3','','hide','cont4','', 'show');">Opción 3</a>
</li>
</ul>

</div>

<div id="cont1">
Inicio
</div>

<div id="cont2">
Contenido 2
</div>

<div id="cont3">
Contenido 3
</div>

<div id="cont4">
Contenido 4
</div>



</div>

</body>

</html>
  #2 (permalink)  
Antiguo 18/04/2010, 04:52
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Mostrar Links del Menu en un DIV

Hola:

No he entendido bien cual es tu duda, sólo entiendo que hablas de un menú desplegable. En las FAQ's de CSS, tienes varios ejemplos de menús desplegables sin utilizar Javascript.

Saludos.


Etiquetas: links
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:11.