¡Advertencia!
Este tema no ha tenido respuestas en más de un mes. Recuerda que si deseas añadir una nueva debes cumplir con las normas de la web.
En esta oportunidad les vengo a traer un pequeño aporte que surgió tras ayudar a un usuario del foro con unas dudas en su sitio web.
Lo que es, básicamente un sistema de navegación horizontal por la web. Puede ser adaptado para otros usos.
Espero que les sea de utilidad.
Saludos.
Lo que es, básicamente un sistema de navegación horizontal por la web. Puede ser adaptado para otros usos.
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Joaquin A." />
<meta name="twitter" content="JoakoM010" />
<title>Modulos ~ Joaquin A.</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
/*!
* Sistema de navegación por Módulos
* Desarrollado por Joaquin A. (SoyJoaquin.)
* Contacto:
* Twitter: @JoakoM010
* Skype: SoyJoaquin.
*/
function moverSec(type){
var foco = $('#foco');
var finalC;
(type=="i" || type=="d") ? coor = $('.secP').width() : coor = $('.secP').width() * (type-1);
if(type=="i")
finalC = "-="+coor;
else if(type=="d")
finalC = "+="+coor;
else
finalC = coor;
foco.animate({"scrollLeft": finalC}, 250);
}
</script>
<style>
body{ margin: 0; }
#foco{
width: 100%;
height: 100%;
overflow: hidden;
}
#cont_sec{
width: 500%;
height: 100%;
background: black;
}
.secP{
width: 20%;
height: 100%;
float: left;
font-size: 48px;
color: red;
}
.secP:nth-child(2n){ background: white; }
.btn{
width: 50px;
height: 50px;
top: 50%;
margin-top: -25px;
}
.nav{
top: 100%;
margin-top: -25px;
}
.nav > div {
width: 20px;
text-align: center;
float:left;
}
.btn, .nav{
background: gray;
position: absolute;
cursor: pointer;
z-index: 999;
}
.btn:hover, .nav > div:hover {
color: white;
background: orange;
}
</style>
</head>
<body>
<div class="btn" style="left:0;" onClick="moverSec('i');"><<</div>
<div class="btn" style="right:0;" onClick="moverSec('d');">>></div>
<div class="nav">
<div onClick="moverSec('1');">1</div>
<div onClick="moverSec('2');">2</div>
<div onClick="moverSec('3');">3</div>
<div onClick="moverSec('4');">4</div>
<div onClick="moverSec('5');">5</div>
</div>
<div id="foco">
<div id="cont_sec">
<div class="secP">1</div>
<div class="secP">2</div>
<div class="secP">3</div>
<div class="secP">4</div>
<div class="secP">5</div>
</div>
</div>
</body>
</html>
Espero que les sea de utilidad.
Saludos.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Acabo de probarlo, está buenísimo. Una cosa, en cada página (1, 2, 3 , 4 y 5) puedo poner cosas distintas, verdad? O sea, en una imágenes, en una otra y así (?)
Acabo de probarlo, está buenísimo. Una cosa, en cada página (1, 2, 3 , 4 y 5) puedo poner cosas distintas, verdad? O sea, en una imágenes, en una otra y así (?)
Sí, claro. Lo puedes hacer.
Ya me estoy imaginando el uso que le darás...
Saludos y gracias.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Me acuerdo cuando lo pidió, qué útil *-*
El 95% del trabajo hecho, lo estaba buscando hace mucho tiempo, pero como no era urgente ni necesario, no me puse a ello. Muchas gracias
El 95% del trabajo hecho, lo estaba buscando hace mucho tiempo, pero como no era urgente ni necesario, no me puse a ello. Muchas gracias
:lo:
Ya me estoy imaginando el uso que le darás...
Para seguirme solamente tienes que darle al corazón
Gran aporte, esto ayudará muchísimo!
I am the bone of my sword.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
lo copias y lo pegas en cualquier coso de html XD
Usted, ¿no hay demos?
acá uno pa testear http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
Para seguirme solamente tienes que darle al corazón
Es muy probable que lo utilice en una cosa que estoy planeado. ¡Fantástico!
Aragonés amante de la montaña y la tecnología. Ingeniero informático, game master y redactor tecnológico. #Team4DDM
Es muy probable que lo utilice en una cosa que estoy planeado. ¡Fantástico!
Se puede usar para muchas cosas, es muy sencillo de entender el código.
Un saludo.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Genial, me sirve mucho, mil gracias
Artista escénico 丨Actor丨Bailarín丨Performer丨Rolo tapatío
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Ehmm no entiendo bien lo que quieres decir explicate mas
Copia y pega el código en http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic para testearlo es muy útil
Ehmm no entiendo bien lo que quieres decir explicate mas
Para seguirme solamente tienes que darle al corazón
no si se ve claramente en el ejemplo :-.-: son "cajas" que puedes desplazar hacia la izquierda o derecha, mostrando lo que contiene cada una
Para seguirme solamente tienes que darle al corazón