javascript ejemplos - Agregar un efecto de diapositiva al menú desplegable de arranque




5 Answers

Si actualiza a Bootstrap 3 (BS3), han expuesto una gran cantidad de eventos de Javascript que son agradables para unir la funcionalidad deseada. En BS3, este código le dará a todos sus menús desplegables el efecto de animación que está buscando:

  // Add slideDown animation to Bootstrap dropdown when expanding.
  $('.dropdown').on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  // Add slideUp animation to Bootstrap dropdown when collapsing.
  $('.dropdown').on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });

here puede leer sobre los eventos de BS3 y específicamente sobre los eventos desplegables here .

barra html5

Estoy usando bootstrap , y me gustaría agregar animación a un menú desplegable.

Quiero agregarle una animación, deslizar hacia abajo y hacia atrás al salir de ella.

¿Cómo podría hacer esto?

Cosas que intenté:

Cambiando el archivo desplegable Js de esta manera:

¿Cómo puedo hacer que el menú desplegable de navegación de Bootstrap se deslice suavemente hacia arriba y hacia abajo?

¡Cualquier ayuda sería buena! ¡gracias!.




Estoy haciendo algo así pero al pasar el mouse sobre el mouse en lugar de hacer clic. Este es el código que estoy usando, es posible que pueda modificarlo un poco para que funcione al hacer clic.

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});



aquí está mi solución para el efecto de deslizamiento y desvanecimiento:

   // Add slideup & fadein animation to dropdown
   $('.dropdown').on('show.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}).animate({'margin-top': orig_margin_top + 'px', opacity: 1}, 300, function(){
         $(this).css({'margin-top':''});
      });
   });
   // Add slidedown & fadeout animation to dropdown
   $('.dropdown').on('hide.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': orig_margin_top + 'px', opacity: 1, display: 'block'}).animate({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}, 300, function(){
         $(this).css({'margin-top':'', display:''});
      });
   });



Al hacer clic se puede hacer usando el código a continuación

$('.dropdown-toggle').click(function() {
  $(this).next('.dropdown-menu').slideToggle(500);
});



$('.navbar .dropdown').hover(function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
}, function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

Este código funciona si desea revelar los desplegables en vuelo estacionario.

Acabo de cambiar el .slideToggle por .slideDown & .slideUp , y .slideUp el (400) timing




Related

javascript drop-down-menu twitter-bootstrap