megamenu dropdown bootstrap mobile collapse

Question

So I have a dropdown that works and scales down perfectly fine thanks to Bootstrap.

The client however wants the collapse to act like an accordion.

I'm trying to get to something like this. Avada's main nav menu-scaled down into mobile: Note how the 'Home Samples' header goes missing and becomes a toggle with the list items as its dropdown. How could I find out what was used to create this?A push in the right direction would be appreciated.

This is a fiddle of what i got.


                    Apparel
                    
                     
                        
                            
                                APPAREL
                                ALL PRODUCTS
                                
                                    Bottoms
                                      Formal Wear
                                      Golfers
                                      Jackets
                                      Knitwear
                                      Shirts
                                      Sweaters
                                      Tracksuits
                                      T-Shirts
                                
                                
                            
                        
                        
                            
                                 
                                BRANDS
                                 Altitude
                                  Birdi
                                  Chefworks
                                  Drimac
                                  Flexfit
                                  Lexor
                                  SA Rugby
                                  Underarmour
                            
                        
                        
                            
                                
                                CATEGORY
                               Activewear
                              Hospitality
                              Locally Produced
                              Outdoor
                              Supporters
                              Team Wear
                              Workplace
                            
                        
                        
                            
                                
                                CLEARANCE
                            
                        
                        
                            
                                
                                SPECIALS

In the fiddle. the first

in the dropdown, i've tried to make it a dropdown like normal. Is there a way to make it work without the use of java?

IndieRok · Accepted Answer

[EDITED]

With a little research and patience, I managed to add a slightly similar accordion-like transition effect to the bootstrap dropdown. I also managed to fix a visual bug that happened when the dropdown slided up too fast.

With bootstrap 3, they exposed quite a few javascript events for us to tinker with. The events that we will use are: 'show.bs.dropdown' and 'hide.bs.dropdown'. Learn more about their javascript events. Or check out the Dropdown events.

Inside each event, we will add a few jquery lines to give the dropdown our desired effect. The jquery events are: slideDown and slideUp.

All there is left for you is to overwrite bootstrap's default navbar color and add your own styles to it.

Here is the result (Click the phone icon on the far right): Bootply example

Javascript/Jquery:

$(function(){
    //Add OnResize event
    window.onresize = myResize;
    myResize();
});

//This finction will fire each time the browser is resized
function myResize(){
    //Get browser/device height and width
    var bWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var bHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    //If viewport is lower than ipad, hence mobile
    if(bWidth < 768){
        // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
        $('.dropdown').on('show.bs.dropdown', function(e){
            $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
        });

        // ADD SLIDEUP ANIMATION TO DROPDOWN //
        $('.dropdown').on('hide.bs.dropdown', function(e){
            e.preventDefault();
            $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
                //On Complete, we reset all active dropdown classes and attributes
                //This fixes the visual bug associated with the open class being removed too fast
                $('.dropdown').removeClass('open');
                $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
            });
        });
    }
}

HTML/Bootstrap navbar:


  
    
    
      
      Brand
    

    
    
              
        
          APPAREL 
          
            Bottoms
            Formal Wear
            Golfers            
            Jackets            
            Knitwear
            Shirts
            Sweaters
            Tracksuits
            T-Shirts
          
        
      

              
        
          BRANDS 
          
            Altitude
            Birdi
            Chefworks            
            Drimac            
            Flexfit
            Lexor
            SA Rugby
            Underarmour
          
        
      

      
        
          CATEGORY 
          
            Activewear
            Hospitality
            Locally Produced
            Outdoor
            Supporters
            Team Wear
            Workplace
          
        
      

       
        CLEARANCE
        SPECIALS

megamenu dropdown bootstrap mobile collapse

Answers (1)

Related Questions