BARRA FIJA (sin frames) que abra las cosas en la misma página

AmigoCabron · 7 Agosto 2012, 01:20 AM

Hola a todos , pues eso , que ando con mi web , y hice un menu desplegable gracias a la ayuda de esta comunidad , y lo separe por frames para que al clikar en un boton del menu se abriera abajo la pagina , pero nosé , estéticamente no queda tan bien , por ello me preguntaba si podrian ayudarme a quitarlo y poner una barra fija [QUE ABRA OTRAS PÁGINAS DEBAJO DE ELLA]

El código para que sea una barra fija ya se lo puse a mi css .

Código [Seleccionar]

#menu{position:fixed;top:0px}

Ahora como puedo hacer para que se abran abajo? (code) si puede ser<xd
Si no me entienden pidanme informacion mas detallada xd , salu2 y gracias et

EDITO:

adjunto el menu y el css :

Código [Seleccionar]

<!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=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>

<body style="background: #151515">

<div id="menu-wrapper">
	<ul id="hmenu">	
<li><A HREF="index.html" target="ventana"><IMG SRC="IMAGENES/Placote.png" >
</a></li>	
<li><A HREF="index.html" target="ventana">Inicio</a></li> 
		<li><a href="peliculasindex.html" target="ventana">Grupo</a>
	  		<ul class="sub-menu">
	    		<li><A HREF="FRAMEGRUPO.html" target="ventana">Lista</a></li>
	    		<li><a href="" target="ventana">Comparte una con nosotros</a></li>
      		</ul>
  		</li>
		<li><a href="seriesindex.html" target="ventana">WebsFan Amigas</a>
			<ul class="sub-menu">
			    <li><a href="FRAMESERIES.html" target="ventana">Lista</a></li>
				<li><a href="" target="ventana">Comparte una con nosotros</a></li>
			</ul>
		</li>
		<li><a href="juegosindex.html" target="ventana">Videos</a>
			<ul class="sub-menu">
			    <li><a href="FRAMEJUEGOS.html" target="ventana">Lista</a></li>
				<li><a href="" target="ventana">Comparte una con nosotros</a></li>
			</ul>
		</li>
		<li><a href="contacto.html" target="ventana">Contacto</a></li>
	</ul>
</div>
</body>
</html>

Código [Seleccionar]

@charset "utf-8";
/* CSS Document */

body{margin:0;
	font-family: JudasPriest;
	font-size:14px;
}

#menu{position:fixed;top:0px}
}

#menu-wrapper ul{padding:0;
		list-style:none;
}

#hmenu > li{
	display:  inline-block;
}

#hmenu > li > a{
	display:	  block;
	padding:   10px 5px;
	widht:	  90px;
}

li ul{
   position: absolute;
   display:none;
   
}

.sub-menu a{
	display: block;
	padding: 10px 5px;
	width: 130px;
}
   
li:hover ul{
	display: block;
}

#menu-wrapper, li ul{
	background: #000000;
}

#hmenu {
	width: 412px;
	margin: 0;
}

#hmenu a{
	color: #ff9800;
	text-decoration:none;
	font-weight: bold;
}

#hmenu li:hover{
	background: #1C1C1C;
	text-shadow: 0 0 2px #000;
}

PARA SER MAS CONCRETO , ALGO TIPO LA BARRA DE TUENTI.

Spider-Net · 7 Agosto 2012, 02:10 AM

La forma de hacer eso es utilizando AJAX, y yo te recomiendo que para usar AJAX utilices jQuery, que te va a facilitar las cosas y vas a hacerlo de una forma muy sencilla. Además pesa muy poco: http://jquery.com/

Te lo descargas, lo colocas donde te parezca y lo primero que tienes que hacer es linkar el script de jquery a tu documento en el header:

Citar<!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=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>

Ahora vamos a añadir al header una función que haga una carga mediante AJAX en un div contenido, es muy sencillo, quedaría algo así el header:

Citar<!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=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function cargar(pagina){
$('#contenido').load(pagina);
}
</script>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>

Ahora quita el target="ventana" de todos los enlaces. Eso es para los frames y no te va a servir de nada. De hecho no te recomiendo el uso de frames, ya apenas se usan. Crea un div contenido donde se va a cargar todo. Y fíjate como le añado a cada enlace en el evento onclick la función que hemos creado antes para que abra la página correspondiente.

Citar<body style="background: #151515">

<div id="menu-wrapper">
   <ul id="hmenu">
<li><A HREF="#" onclick="cargar('index.html');"><IMG SRC="IMAGENES/Placote.png" >
</a></li>
<li><A HREF="#" onclick="cargar('index.html');">Inicio</a></li>
      <li><a href="peliculasindex.html">Grupo</a>
           <ul class="sub-menu">
           <li><A HREF="#" onclick="cargar('FRAMEGRUPO.html');">Lista</a></li>
           <li><a href="">Comparte una con nosotros</a></li>
       </ul>
       </li>
      <li><a HREF="#" onclick="cargar('seriesindex.html');">WebsFan Amigas</a>
         <ul class="sub-menu">
          <li><a HREF="#" onclick="cargar('FRAMESERIES.html');">Lista</a></li>
            <li><a href="">Comparte una con nosotros</a></li>
         </ul>
      </li>
      <li><a HREF="#" onclick="cargar('juegosindex.html');">Videos</a>
         <ul class="sub-menu">
          <li><a HREF="#" onclick="cargar('FRAMEJUEGOS.html');">Lista</a></li>
            <li><a href="">Comparte una con nosotros</a></li>
         </ul>
      </li>
      <li><a HREF="#" onclick="cargar('contacto.html');">Contacto</a></li>
   </ul>
</div>

<div id="contenido"></div>
</body>
</html>

Como casi siempre lo he hecho a ojo desde el foro, así que puede que haya algún error pero en teoría debería funcionar.

Test Foro de elhacker.net SMF 2.1

BARRA FIJA (sin frames) que abra las cosas en la misma página

AmigoCabron

Spider-Net