menu css + enlace

Roberto1979es · #1 (**permalink**) 21/01/2009, 10:59

Hola, estoy haciendo una pequeña pagina web en la cual pretendo tener un menu a la izquierda con diversos enlaces. Quiero que al pulsar sobre uno de ellos, me cargue en la parte central de la pagina un determinado texto, es decir, otra pagina html, al estilo de los antiguos frames. Segun tengo entendido los frames hay que ir olvidandolos, así que queria preguntar si alguien sabe como puedo mantener mi cabecera y mi menú izquierdo, pero que se cambia el contenido central de mi pagina al pulsar sobre el enlace correspondiente del menu de la izquierda.

Ejemplo:

Inicio
Productos (enlazará con la pagina productos.html)
Servicio (enlazará con la pagina servicios.html)
Contacto

Gracias por vuestra ayuda

jomaruro · #2 (**permalink**) 21/01/2009, 14:48

Hola:

Visita la página de Mikmoro, con ella podrás solucionar tu duda de ahora (y las siguientes).

Saludos.

Roberto1979es · #3 (**permalink**) 22/01/2009, 07:29

Sí, he visitado esa página, pero no logro hacer lo que quiero, perdonad por mi ignorancia pero no lo consigo.

En cuanto a hacer el menu, ok, pero al pinchar sobre un enlace, se carga la otra pagina html y en ella no tengo al menú, ¿ como puedo hacer para conservar el menú ? ¿tengo que copiar el html ? Es que veo un poco cutre lo de copiar, ya que si quiero cambiar el menu tendré que hacerlo en todas las paginas.

Mi intención era que el menu permanezca y cargar las paginas en un div. He encontrado algo con javascript (ajax), pero me gustaria hacerlo sin usar este. ¿es posible ? Ademas ese javascript me da problemas con internet explorer.

¿Podeis ayudarme, pleaseee!!!?

willyfc · #4 (**permalink**) 22/01/2009, 08:05

necesariamente tienes que utilizar algo de javascript para poder eso, solo con css no se puede, tienes que combinar ambas, te paso algo que se con el editor dreamweaver pero que si funciona y espero que sea lo quieres, copialo y pegalo en tu editor tal cual, y asegurate de tener javascript habiliatado

Código lenguaje:

Ver original<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mostrar ocultar capas</title>
<script type="text/javascript">
function MM_findObj(n, d) { //v4.01
  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() { //v6.0
  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>
<style type="text/css">
#contenedor{ width:800px; height:300px; border:1px solid #333; position:relative}
#menu{width:300px; height:300px; border:1px solid #333; float:left;}
#cont1{ width:490px; height:300px; float:left; position:absolute; visibility:visible; margin:0 0 0 302px;}
#cont2{ width:490px; height:300px; float:left; position:absolute; visibility:hidden; margin:0 0 0 302px;}
#cont3{ width:490px; height:300px; float:left; position:absolute; visibility:hidden; margin:0 0 0 302px;}
</style>
</head>
 
<body onload="MM_showHideLayers('cont1','','show','cont2','','hide','cont3','','hide');">
<div id="contenedor">
    <div id="menu">
        <ul>
            <li><a href="#" onclick="MM_showHideLayers('cont1','','show','cont2','','hide','cont3','','hide');">contenido 1</a></li>
            <li><a href="#"onclick="MM_showHideLayers('cont1','','hide','cont2','','show','cont3','','hide');">contenido 2</a></li>
            <li><a href="#"onclick="MM_showHideLayers('cont1','','hide','cont2','','hide','cont3','','show');">contenido 3</a></li>
        </ul>
    </div>
    <div id="cont1">
        Contenido 1
    </div>
    <div id="cont2">
        Contenido 2
    </div>
    <div id="cont3">
        Contenido 3
    </div>
</div>
</body>
</html>

espero te sirva, como te digo el javascript que ves ahí te lo da dreamweaver y con lo demás tienes que jugar

Bienvenido a FDW

Mikmoro · #5 (**permalink**) 22/01/2009, 08:22

O con PHP y un include.

Dalvenjha · #6 (**permalink**) 22/01/2009, 08:40

Es que ese no es problema de CSS tío es simplemente cosa de javascript. Veamos tienes dos caminos, uno usar ajax (Qué sería lo óptimo) y otro, esconder los divs y llamarlos cuando sean necesarios.

Veamos bajo el primer método tendría que haber una conversación algo más larga, sobre el segundo en cambio la cosa se acorta mucho.

Pongamos que tienes tus dos barras tipo frame que se llamen, cabecera e izquierda, y tengas un central. A ese div central es al que deberemos dar los estilos para que se posicione, y las secciones que según dices son 4 serían cuatro divs internos, que tendrían un ancho y un alto de 100% para que ocupen todo el div, y todos ellos con display:none; (Bueno menos el que sea el principal.) Luego hacemos una manipulación de propiedades de CSS con javascript de la siguiente manera:
Asumiremos que tus divs se llaman "uno","dos", "tres" y "cuatro". Asumiremos que el div "uno" no tiene el display none. y empezaremos enseñando el div "dos"

Código:

<script type="text/javascript">
objeto = 'uno';
function enseñar(enseñame){
document.getElementById(objeto).style.display="none";
document.getElementById(enseñame).style.display="block";
objeto=enseñame;
}
</script>
Y la llamada sería:
<li onclick="enseñar('uno');">ver uno</li>
<li onclick="enseñar('dos');">ver dos</li>
<li onclick="enseñar('tres');">ver tres</li>
<li onclick="enseñar('cuatro');">ver cuatro</li>

Cualquier pregunta me la haces por MP, claro, la salida abrupta del div no va a ser lo más bonito del mundo, pero en mi blog he hecho un tutorial para que juegues con fade de una manera sencillona.

http://remsr.com/articulos/fade_noob.php

Saludos, y cualquier pregunta por MP o me la pones en un comentario ahí.