Foros del Web » Creando para Internet » CSS »

menu css + enlace

Estas en el tema de menu css + enlace en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/01/2009, 10:59
 
Fecha de Ingreso: enero-2009
Mensajes: 2
Antigüedad: 8 años, 10 meses
Puntos: 0
menu css + enlace

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
  #2 (permalink)  
Antiguo 21/01/2009, 14:48
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: menu css + enlace

Hola:

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

Saludos.

  #3 (permalink)  
Antiguo 22/01/2009, 07:29
 
Fecha de Ingreso: enero-2009
Mensajes: 2
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: menu css + enlace

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!!!?
  #4 (permalink)  
Antiguo 22/01/2009, 08:05
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: menu css + enlace

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Mostrar ocultar capas</title>
  6. <script type="text/javascript">
  7. function MM_findObj(n, d) { //v4.01
  8.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  9.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  10.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  11.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  12.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  13. }
  14.  
  15. function MM_showHideLayers() { //v6.0
  16.   var i,p,v,obj,args=MM_showHideLayers.arguments;
  17.   for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
  18.     if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
  19.     obj.visibility=v; }
  20. }
  21. </script>
  22. <style type="text/css">
  23. #contenedor{ width:800px; height:300px; border:1px solid #333; position:relative}
  24. #menu{width:300px; height:300px; border:1px solid #333; float:left;}
  25. #cont1{ width:490px; height:300px; float:left; position:absolute; visibility:visible; margin:0 0 0 302px;}
  26. #cont2{ width:490px; height:300px; float:left; position:absolute; visibility:hidden; margin:0 0 0 302px;}
  27. #cont3{ width:490px; height:300px; float:left; position:absolute; visibility:hidden; margin:0 0 0 302px;}
  28. </style>
  29. </head>
  30.  
  31. <body onload="MM_showHideLayers('cont1','','show','cont2','','hide','cont3','','hide');">
  32. <div id="contenedor">
  33.     <div id="menu">
  34.         <ul>
  35.             <li><a href="#" onclick="MM_showHideLayers('cont1','','show','cont2','','hide','cont3','','hide');">contenido 1</a></li>
  36.             <li><a href="#"onclick="MM_showHideLayers('cont1','','hide','cont2','','show','cont3','','hide');">contenido 2</a></li>
  37.             <li><a href="#"onclick="MM_showHideLayers('cont1','','hide','cont2','','hide','cont3','','show');">contenido 3</a></li>
  38.         </ul>
  39.     </div>
  40.     <div id="cont1">
  41.         Contenido 1
  42.     </div>
  43.     <div id="cont2">
  44.         Contenido 2
  45.     </div>
  46.     <div id="cont3">
  47.         Contenido 3
  48.     </div>
  49. </div>
  50. </body>
  51. </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
__________________
WFC
codigo82

Última edición por willyfc; 22/01/2009 a las 08:25
  #5 (permalink)  
Antiguo 22/01/2009, 08:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: menu css + enlace

O con PHP y un include.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 22/01/2009, 08:40
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: menu css + enlace

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í.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
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 17:07.