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.

<ul class="nav navbar-nav">
                <li class="dropdown mega-dropdown" id="header1">    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Apparel</a>
                    <ul class="dropdown-menu mega-dropdown-menu row mega-dropdown-menu-1">
                    <div class="dropimg"><img class="img-responsive" src="images/dropdown.jpg"> </div>
                        <li class="col-sm-2">
                            <ul>
                                <li class="dropdown-header">APPAREL</li>
                                <li class="dropdown-header_a"><a href="#" class="dropdown-toggle" data-toggle="dropdown">ALL PRODUCTS</a>
                                <ul class="dropdown-menu">
                                    <li><a href="">Bottoms</a></li>
                                      <li><a href="">Formal Wear</a></li>
                                      <li><a href="">Golfers</a></li>
                                      <li><a href="">Jackets</a></li>
                                      <li><a href="">Knitwear</a></li>
                                      <li><a href="">Shirts</a></li>
                                      <li><a href="">Sweaters</a></li>
                                      <li><a href="">Tracksuits</a></li>
                                      <li><a href="">T-Shirts</a></li>
                                </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="col-sm-2">
                            <ul>
                                <li class="dropdown-header">&nbsp;</li>
                                <li class="dropdown-header_a">BRANDS</li>
                                 <li><a href="">Altitude</a></li>
                                  <li><a href="">Birdi</a></li>
                                  <li><a href="">Chefworks</a></li>
                                  <li><a href="">Drimac</a></li>
                                  <li><a href="">Flexfit</a></li>
                                  <li><a href="">Lexor</a></li>
                                  <li><a href="">SA Rugby</a></li>
                                  <li><a href="">Underarmour</a></li>
                            </ul>
                        </li>
                        <li class="col-sm-2">
                            <ul>
                               <li class="dropdown-header">&nbsp;</li>
                                <li class="dropdown-header_a">CATEGORY</li>
                               <li><a href="">Activewear</a></li>
                              <li><a href="">Hospitality</a></li>
                              <li><a href="">Locally Produced</a></li>
                              <li><a href="">Outdoor</a></li>
                              <li><a href="">Supporters</a></li>
                              <li><a href="">Team Wear</a></li>
                              <li><a href="">Workplace</a></li>
                            </ul>
                        </li>
                        <li class="col-sm-2">
                            <ul>
                               <li class="dropdown-header">&nbsp;</li>
                                <li class="dropdown-header_a">CLEARANCE</li>
                            </ul>
                        </li>
                        <li class="col-sm-1">
                            <ul>
                               <li class="dropdown-header">&nbsp;</li>
                                <li class="dropdown-header_a">SPECIALS</li>
                            </ul>
                        </li>

                    </ul>
                </li>
            </ul>

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?

I think you mean javascript not java. Two different programming languages. FYI. — dowomenfart, Mar 10 '15 at 13:02
Avada's menu is custom-made with media-queries and javascript. They're not using bootstrap for this. If you inspect the code, you'll notice that there is two separate menu 'UL' elements. When in mobile viewport, the main desktop menu will be 'display none' and the other one is activated. — IndieRok, Mar 10 '15 at 13:33

IndieRok · Accepted Answer · 2015-03-10T15:21:27.170

[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:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">APPAREL <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Bottoms</a></li>
            <li><a href="#">Formal Wear</a></li>
            <li><a href="#">Golfers</a></li>            
            <li><a href="#">Jackets</a></li>            
            <li><a href="#">Knitwear</a></li>
            <li><a href="#">Shirts</a></li>
            <li><a href="#">Sweaters</a></li>
            <li><a href="#">Tracksuits</a></li>
            <li><a href="#">T-Shirts</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav">        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">BRANDS <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Altitude</a></li>
            <li><a href="#">Birdi</a></li>
            <li><a href="#">Chefworks</a></li>            
            <li><a href="#">Drimac</a></li>            
            <li><a href="#">Flexfit</a></li>
            <li><a href="#">Lexor</a></li>
            <li><a href="#">SA Rugby</a></li>
            <li><a href="#">Underarmour</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">CATEGORY <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Activewear</a></li>
            <li><a href="#">Hospitality</a></li>
            <li><a href="#">Locally Produced</a></li>
            <li><a href="#">Outdoor</a></li>
            <li><a href="#">Supporters</a></li>
            <li><a href="#">Team Wear</a></li>
            <li><a href="#">Workplace</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav"> 
        <li><a href="#">CLEARANCE</a></li>
        <li><a href="#">SPECIALS</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

This seems almost want I was looking for is that the original needs to be a megamenu. only when viewed with a mobile does it do what you suggested. Thanks for the reply. — Reeze Cornelius, Mar 10 '15 at 15:08
I figured that would be the case. You can use javascript to detect the viewport and activate the events in that specific viewport. I'll update my post to show you how it's done — IndieRok, Mar 10 '15 at 15:13
@Reeze Cornelius Javascript code is edited. The accordion events will fire only on mobile viewport width. The normal behavior will stay intact on ipad and desktop views. Of course, feel free to change the viewport value to whatever you want — IndieRok, Mar 10 '15 at 15:23
Thanks. The javascript is kind of giving me a template to work from. I'll keep this post updated when i finish the code to what I'm working towards. — Reeze Cornelius, Mar 11 '15 at 13:14
Alright! Glad i was of help. I'll check back the result when you get it sorted out. Tag my username in a comment when it's done, in case I forget — IndieRok, Mar 11 '15 at 14:20

megamenu dropdown bootstrap mobile collapse

1 Answers1