Ir a la comunidad

Diseño y Programación Web

Comunidad oficial de diseñadores web, web developers y Webmasters. Aqui podemos tratar temas actuales sobre diseño y tecnología. Podemos compartir y actualizarnos. Flash, PHP, ASP, Java, HTML, CSS, MySQL, CMS, etc. Unite YA y lee los Sticky

Ver más
  • 17,231 Miembros
  • 12,975 Temas
  • 4,979 Seguidores
Hace más de 10 meses
  • 0

Efecto pestaña Mozilla (sube y baja)

Buenas noches,

Estoy tratando de averiguar como carajos sacan ese efecto que tiene la pagina de Mozilla y Battlefieldo:

http://www.mozilla.org/en-US/
http://www.battlefieldo.com/

En la parte superior (navibar) tiene una pestaña en la que das click, y te baja un div con contenido dentro (ejemplo en battlefieldo es el sign up y el login). Estoy seguro que lo sacan con Jquery. Pero no se como comenzar, si tengo que crear un div oculto, o por fuera del top de la pagina.

Alguien que haya hecho ese efecto antes, o tenga idea de como seria, se los agradecería mucho.
  • 0
  • 0Calificación
  • 0Seguidores
  • 134Visitas
  • 1Favoritos

4 comentarios

@frente54 Hace más de 10 meses
Mostrar/Ocultar divs.. jquery..

Head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Body:
<input type="button" value="" onclick='$("#id-de-tu-div&quot.toggle("slow"'>
<div id="imagen" style="display:none;"></div>
@Flanders16 Hace más de 10 meses
frente54 dijo:

Mostrar/Ocultar divs.. jquery..

Head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Body:
<input type="button" value="" onclick='$("#id-de-tu-div&quot.toggle("slow"'>
<div id="imagen" style="display:none;"></div>



Pon el codigo entre [*code] [*/code] ( para que los iconos no den a un error )

Pero si lo pones asi consigues el efecto de que se arrastra? o simplmente se muestra el div y punto?
@pichoncitotv Hace más de 10 meses
frente54 dijo:

Mostrar/Ocultar divs.. jquery..

Head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Body:

<input type="button" value="" onclick='$("#id-de-tu-div").toggle("slow");'>
<div id="imagen" style="display:none;"></div>

@Incasoft Hace más de 10 meses
En el caso de la de mozilla podes ver con firebug que la capa esta siempre ahi, y visible. Por defecto tiene la propiedad
height:0px;

Cuando clickeas en la pestaña le da la altura correspondiente, y como la capa esta al principio del body al agrandar su altura se mueve todo el resto de la pagina.
Tienes que ser miembro para responder en este tema