CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Johhan Santana
Johhan Santana

Reputation: 2415

Dropdown bootstrap menu with unfold effect

I'm trying to make the bootstrap menu dropdown on hover with an unfold effect.

Right now I have this javascript to make it dropdown on hover with a slide effect:

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

this works well on desktop version but not on mobile and doesn't have the unfold effect.

What's the best way to achieve this? Via javascript or css?

Thanks!

Upvotes: 2

Views: 705

Answers (2)

Johhan Santana
Johhan Santana

Reputation: 2415

I was able to do the effect like this:

// dropdown hover effect
if($(window).width() > 768) {
  $('.navbar .dropdown').hover(function() {
    $(this).addClass('open');
  }, function() {
    $(this).removeClass('open');
  });
};

and css:

@media (min-width: 768px) {
  .dropdown .dropdown-menu {
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;

      max-height: 0;
      display: block;
      overflow: hidden;
      opacity: 0;
      -webkit-transform: perspective(200px) rotateX(-90deg); 
        -moz-transform: perspective(200px) rotateX(-90deg); 
        transform: perspective(200px) rotateX(-90deg);
    }

    .dropdown.open .dropdown-menu {
      max-height: 250px;
      opacity: 1;
      -webkit-transform: perspective(200px) rotateX(0deg); 
        -moz-transform: perspective(200px) rotateX(0deg); 
        transform: perspective(200px) rotateX(0deg);
        transform-origin: center top;
    }
}

the max-height will depend on how many buttons you have in the dropdown, the more you have, the more height.

Upvotes: 0

amitguptageek
amitguptageek

Reputation: 537

Yes, you are right on desktop the code works well as desktop version supports hover event but mobile version does not. Mobile version should be handled using click event.

Upvotes: 3

Related Questions