elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  BARRA FIJA (sin frames) que abra las cosas en la misma página		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: BARRA FIJA (sin frames) que abra las cosas en la misma página  (Leído 4,545 veces)
AmigoCabron

Desconectado Desconectado

Mensajes: 16


http://www.twitter.com/amigocabron


Ver Perfil WWW
BARRA FIJA (sin frames) que abra las cosas en la misma página
« en: 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:
#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:
<!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:
@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.
« Última modificación: 7 Agosto 2012, 02:06 am por AmigoCabron » En línea
I am a PornStar
Spider-Net


Desconectado Desconectado

Mensajes: 1.165


Un gran poder conlleva una gran responsabilidad


Ver Perfil WWW
Re: BARRA FIJA (sin frames) que abra las cosas en la misma página
« Respuesta #1 en: 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.
« Última modificación: 7 Agosto 2012, 02:13 am por Spider-Net » En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Url fija con frames o como se llame
Desarrollo Web 		CAR3S? 4 4,427 Último mensaje 7 Julio 2011, 01:13 am
por Alex_bro
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines