Cómo hacer un Slide Toggle abajo con jQuery

Poderes JQuery los efectos visuales detrás de sitios web con estilo. JQuery es un lenguaje de programación web basado en JavaScript que se puede utilizar para llevar a cabo los menús visuales resbaladizas. Con jQuery, puede crear un menú que se desliza hacia abajo dinámicamente a medida que el usuario navega a través del sitio web. La interfaz de programación de aplicaciones jQuery deslizante, o API, es fácil de usar. 

CAMBIAR JQUERY

Abra una aplicación de edición de texto, como el Bloc de notas de Microsoft y crear un nuevo documento HTML mediante las siguientes líneas de código:

! DOCTYPE HTML

HTML

cabeza

Añade un título y definir la hoja de estilos en cascada para el menú, añadiendo las líneas de código que siguen este ejemplo:

titlejQuery slideDown () con los elementos / title Medio posicionados

Tipo style = "text / css"

# Container {

inferior: 0px;

display: none;

izquierda: 10px;

position: fixed;

anchura: 90%;

}

/ Estilo

Agregue la navegación jQuery basado llamando a una función Javascript que hace referencia a la biblioteca jQuery:

script type = "text / javascript" src = "jquery-1.4.js" / script

script type = "text / javascript"

jQuery (function ($) {

var container = $ ("# contenedor");

Incluya el deslizamiento de palanca con el siguiente código y evitar que un evento predeterminado, que mostrará el menú sin efectos:

$ ("A"). Haga clic en (

función (evento) {

event.preventDefault ();

Permitir a los usuarios alternar entre el menú deslizante basado en la forma en que se ve:

if (container.is ("Visible")) {

container.slideUp (2000);

Complete el argumento de visualización del menú jQuery, proporcionando la alternativa cuando no se cumplen las condiciones establecidas en este tutorial. Modificar y poner este código:

} Else {

container.slideDown (2000);

}

}

);

});

/ Script

/ Head