Introduction

First of all, let me say thanks you for choosing my product! Feel free to ask any question you might have regarding MDF-MegaMenu.

MDF Megamenu is a Bootstrap responsive megamenu. It is easy to implement, specially if you use the MDF Wizard the intuitive megamenu builder that comes with the product.

In the package you have downloaded you will find:

  • The megamu with scripts and styles (except the pictures)
  • The MDF Wizard - megamenu builder visual aid for building the menu.

MDF Megamenu v1.0 is fully compatible with Chrome, Safari, Firefox, IE8+ and iOS latest versions..

HTML Markup

Basic Guidliness

There are two things here that separete MDF MegaMenu from standard Bootstrap navigation:

  • You need to assign id="mdf_menu" attribute to the nav element
  • And every (list element) li must have menu-el class.

Megamenu

It is actually quite simple to construct MDF Megamenu, once you familiarize yourself with the basics. Let's start from the basic Bootstrap navigation:

<nav id="mdf_menu" class="navbar navbar-default">
   <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <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="#">Project name</a>
         </div>
         <div id="navbar" class="collapse navbar-collapse">

        <ul class="nav navbar-nav">

          <li class="menu-el">
            <a><i class="icon-class"></i>Menu Element</a>
          </li>

          <li class="menu-el">
            <a><i class="icon-class"></i>Menu Element</a>
          </li>

          <li class="menu-el">
            <a><i class="icon-class"></i>Menu Element</a>
          </li>

          <li class="menu-el">
            <a><i class="icon-class"></i>Menu Element</a>
          </li>

          <li class="menu-el">
            <a><i class="icon-classt"></i>Menu Element</a>
          </li>

        </ul>

        <ul class="right-nav">
          <li>
            <div class="search-box">
                <input type="text" placeholder="Find Stuff">
                <a href="#" class="search-button"></a>
            </div>
          </li>
        </ul> 

    </div>
   </div>   
</nav>

To create a Megamenu you need to add following markup to the selected main li element:

<div class="mdf_sub_wrap mdf_flip row">
  <div class="col-sm-4 col-xs-12">
    <---- Some Content ------->
  </div>
  <div class="col-sm-4 col-xs-12">
    <---- Some Content ------->
  </div>
  <div class="col-sm-4 col-xs-12">
    <---- Some Content ------->
  </div>
</div> 

<div class="mdf_sub_wrap mdf_flip row"> is the parent element, the megamenu holder that will contains all other elements you want to include. .mdf_flip class represents the menu reveal animation. You can use .mdf_flip, .mdf_fade or .mdf_fall class. And row class stands for the bootstrap .row class.


If you want more rows, just add them as usual:

<div class="mdf_sub_wrap .mdf_flip row">
  <div class="col-sm-4 col-xs-12">
    <---- Some Content ------->
  </div>
  <div class="col-sm-4 col-xs-12">
    <---- Some Content ------->
  </div>
  <div class="col-sm-4 col-xs-12">
    <---- Some Content ------->
  </div>

  <div class="row">
    <div class="col-sm-8 col-xs-12">
      <---- Some Content ------->
    </div>
    <div class="col-sm-4 col-xs-12">
      <---- Some Content ------->
    </div>
  </div>

</div> 

Inside this container you will use Bootstrap standard grid columns. In this example I used 4-4-4 (4+4+4) column order, so there are three div's with col-sm-4 class. I also want them to has the full width on smaller devices, so I had to include col-xs-12 class also.


So final markup would look like this:

<nav id="mdf_menu" class="navbar navbar-default">
   <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <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="#">Project name</a>
         </div>
         <div id="navbar" class="collapse navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="menu-el">
          <a><i class="icon-class"></i>Menu Element</a>
          <!-- Here is our megamenu -->
          <div class="mdf_sub_wrap mdf_flip row">
            <div class="col-sm-4 col-xs-12">
              <---- Some Content ------->
            </div>
            <div class="col-sm-4 col-xs-12">
              <---- Some Content ------->
            </div>
            <div class="col-sm-4 col-xs-12">
              <---- Some Content ------->
            </div>
          </div>   
          <!-- Megamenu ends -->
        </li>

        <li class="menu-el">
          <a><i class="icon-class"></i>Menu Element</a>
        </li>

        <li class="menu-el">
          <a><i class="icon-class"></i>Menu Element</a>
        </li>

        <li class="menu-el">
          <a><i class="icon-class"></i>Menu Element</a>
        </li>

        <li class="menu-el">
          <a><i class="icon-classt"></i>Menu Element</a>
        </li>

      </ul>

      <ul class="right-nav">
        <li>
          <div class="search-box">
                  <input type="text" placeholder="Find Stuff">
                  <a href="#" class="search-button"></a>
          </div>
        </li>
     </ul> 

    </div>
   </div>   
</nav> 
Titles should be wraped with .cl-title class ( div element ).
<div class="cl-title">
     <h4>Your Title</h4>
</div> 
For left alignment add text-left class to the containing div

Creating a dropdown is similar like constructing a list. You need to create ul element and assign it a standard mdf_child_menu class (like for list), and a .dropdown class that will mark it as dropdown. Then using data-width attribute, set the width of the dropdown. It can be in px, em, or %.

<ul class="mdf_child_menu dropdown" data-width="200px">
      <li> --- List Element --- </li>
      <li> --- List Element --- </li>
      ...
</ul>

That was the first level of dropdown, or the container, now to nest more dropdowns, all you need to do is add regular ul element with mdf_child_menu class, and javascript will do the rest. If child .mdf_child_menu or .dropdown element does not have data-width set, it will automatically adapt to the parent element width.


So final markup of the few dropdowns will look like this:

<ul class="mdf_child_menu dropdown" data-width="200px">

    <li>
      <a><i class="glyphicon glyphicon-circle-arrow-down"></i>Sub-Item</a>
      <ul class="mdf_child_menu">
        <li><a><i class="icon-wallet"></i>Sub-menu list item</a></li>
        <li><a><i class="icon-circle-compass"></i>Sub-menu list item</a></li>
        <li><a><i class="icon-profile-female"></i>Sub-menu list item</a></li>
        <li><a><i class="icon-aperture"></i>Sub-menu list item</a></li>
        <li><a><i class="icon-pricetags"></i>Sub-menu list item</a></li>
      </ul> 
    </li>

    <li><a>Sub-Item</a></li>

    <li>
      <a><i class="glyphicon glyphicon-circle-arrow-down"></i>Sub-Item</a>

      <ul class="mdf_child_menu"  data-width="270px">
        <li><a><i class="icon-wallet"></i>Sub-menu list item</a></li>

        <li>
          <a><i class="icon-circle-compass"></i>Sub-menu list item</a>
          <ul class="mdf_child_menu">
            <li><a><i class="icon-wallet"></i>Sub-menu list item</a></li>
            <li><a><i class="icon-circle-compass"></i>Sub-menu list item</a></li>
            <li><a><i class="icon-profile-female"></i>Sub-menu list item</a></li>
            <li><a><i class="icon-aperture"></i>Sub-menu list item</a></li>
            <li><a><i class="icon-pricetags"></i>Sub-menu list item</a></li>
          </ul> 
        </li>

        <li><a><i class="icon-profile-female"></i>Sub-menu list item</a></li>
        <li><a><i class="icon-aperture"></i>Sub-menu list item</a></li>
        <li><a><i class="icon-pricetags"></i>Sub-menu list item</a></li>
      </ul> 

    </li>

</ul>
Do not forget to wrap your main .menu-el text with empty a element.
 <li class="menu-el">
     <a>Menu Element</a>
</li>

CSS Classes

To style main navigation (background, color, font, etc.) apply your custom style to #mdf_menu{}. To affect navigation elements (list elements) apply your CSS to .navbar-default .navbar-nav > li > a{}. For hover effects use #mdf_menu .menu-el > a:hover, #mdf_menu .menu-el:hover > a{}. To change styling to mega menu apply your style to #mdf_menu ul li .mdf_sub_wrap{} and for megamenu in :hover mode - #mdf_menu ul li:hover .mdf_sub_wrap{}.

Anything tha falls in the mega menu section is accesed by #mdf_menu ul li .mdf_sub_wrap -child element-.

To style dropdowns, up to 3 levels use following classes:

#mdf_menu .mdf_child_menu.sub-0,
#mdf_menu .mdf_child_menu.sub-1,
#mdf_menu .mdf_child_menu.sub-2,
.dropdown{ 
 /* your style here */
}

Shortcodes

You can add any custom html you want to megamenu. For refference, I will separate the examples used in demo:

List Megamenu

To include another list into megamenu you need to assign it a mdf_child_menu class.


So to construct it just follow simple guidlines:

<ul class="mdf_child_menu">
    <li> --- List Element --- </li>
    <li> --- List Element --- </li>
    ...
</ul>

Demo example:

<div class="mdf_sub_wrap mdf_flip row">
  <div class="col-sm-3 col-xs-12">
    <div class="cl-title">
      <h4>Column Heading</h4>
    </div>  
    <ul class="mdf_child_menu">
      <li><a><i class="glyphicon glyphicon-th-large"></i>Sub-menu list item</a></li>
      <li><a><i class="glyphicon glyphicon-road"></i>Sub-menu list item</a></li>
      <li><a><i class="glyphicon glyphicon-refresh"></i>Sub-menu list item</a></li>
      <li><a><i class="glyphicon glyphicon-list"></i>Sub-menu list item</a></li>
      <li><a><i class="glyphicon glyphicon-tint"></i>Sub-menu list item</a></li>
    </ul> 
  </div>
  <div class="col-sm-3 col-xs-12">
    <div class="cl-title">
      <h4>Column Heading</h4>
    </div>
    <ul class="mdf_child_menu">
      <li><a><i class="icon-paperclip"></i>Sub-menu list item</a></li>
      <li><a><i class="icon-linegraph"></i>Sub-menu list item</a></li>
      <li><a><i class="icon-upload"></i>Sub-menu list item</a></li>
      <li><a><i class="icon-piechart"></i>Sub-menu list item</a></li>
      <li><a><i class="icon-pricetags"></i>Sub-menu list item</a></li>
    </ul> 
  </div>
  <div class="col-sm-3 col-xs-12">
    <div class="cl-title">
      <h4>Column Heading</h4>
    </div>
    <ul class="mdf_child_menu">
      <li><a><i class="glyphicon glyphicon-book"></i>Sub-menu list item</a></li>
      <li><a><i class="glyphicon glyphicon-tags"></i>Sub-menu list item</a></li>
      <li><a><i class="glyphicon glyphicon-edit"></i>Sub-menu list item</a></li>
      <li><a><i class="glyphicon glyphicon-leaf"></i>Sub-menu list item</a></li>
      <li><a><i class="glyphicon glyphicon-wrench"></i>Sub-menu list item</a></li>
    </ul> 
  </div>
  <div class="col-sm-3 col-xs-12">
    <div class="cl-title">
      <h4>Column Heading</h4>
    </div>
    <ul class="mdf_child_menu">
      <li><a><i class="icon-paperclip"></i>Sub-menu list item</a></li>
      <li><a><i class="icon-linegraph"></i>Sub-menu list item</a></li>
      <li><a><i class="icon-upload"></i>Sub-menu list item</a></li>
      <li><a><i class="icon-piechart"></i>Sub-menu list item</a></li>
      <li><a><i class="icon-pricetags"></i>Sub-menu list item</a></li>
    </ul> 
  </div>
</div>  

Products

Products example is built using mdf_child_menu list, Bootstrap media component and Bootstrap Carousel component. You also need to assign .mdf_products class to the containing mdf_sub_wrap element

Media markup:

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="assets/images/135.jpg" alt="alt text">
    </a>
  </div>
  <div class="media-body">
    <h5 class="media-heading">Woman Bag ar1345</h5>
    <small>Great item that combines both the lorem ipsum and doloret something.</small>
  </div>
</div>
...
<!-- Same markup for following .media elements -->

For carousel markup you can find more information here


Final markup:

<div class="mdf_sub_wrap mdf_flip row mdf_products">
  <div class="col-sm-3 col-xs-12">
    <div class="cl-title">
      <h4>Categories</h4>
    </div>
    <ul class="mdf_child_menu">
      <li><a><i class="icon-wallet"></i>Sub-menu list item</a></li>
      <li><a><i class="icon-circle-compass"></i>Sub-menu list item</a></li>
      <li><a><i class="icon-profile-female"></i>Sub-menu list item</a></li>
      <li><a><i class="icon-aperture"></i>Sub-menu list item</a></li>
      <li><a><i class="icon-pricetags"></i>Sub-menu list item</a></li>
    </ul> 
  </div>
  <div class="col-sm-4 col-xs-12">
    <div class="cl-title">
      <h4>Latest Added</h4>
    </div>
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img class="media-object" src="assets/images/135.jpg" alt="alt text">
        </a>
      </div>
      <div class="media-body">
        <h5 class="media-heading">Woman Bag ar1345</h5>
        <small>Great item that combines both the lorem ipsum and doloret something.</small>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img class="media-object" src="assets/images/146.jpg" alt="alt text">
        </a>
      </div>
      <div class="media-body">
        <h5 class="media-heading">Woman Thing ar1345</h5>
        <small>Great item that combines both the lorem ipsum and doloret something.</small>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img class="media-object" src="assets/images/155.jpg" alt="alt text">
        </a>
      </div>
      <div class="media-body">
        <h5 class="media-heading">Woman Shoes ar1345</h5>
        <small>Great item that combines both the lorem ipsum and doloret something.</small>
      </div>
    </div>
  </div>
  <div class="col-sm-5 col-xs-12">
    <div class="cl-title">
      <h4>Hot This Month</h4>
    </div>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <h5>Woman Accesories</h5> 
          <div class="hot-sell-item">
            <img src="assets/images/138.jpg" width="130" height="130" alt="alt text"/>
            <p>
              <span>Price: $137</span>
              <small>This product is labeled as lorem ipsum</small>
            </p>
          </div>
          <div class="hot-sell-item">
            <img src="assets/images/139.jpg" width="130" height="130" alt="alt text"/>
            <p>
              <span>Price: $139</span>
              <small>This product is labeled as lorem ipsum</small>
            </p>
          </div>
          <div class="hot-sell-item">
            <img src="assets/images/141.jpg" width="130" height="130" alt="alt text"/>
            <p>
              <span>Price: $141</span>
              <small>This product is labeled as lorem ipsum</small>
            </p>
          </div>
        </div>
        <div class="item">
          <h5>Woman Bags</h5> 
          <div class="hot-sell-item">
            <img src="assets/images/131.jpg" width="130" height="130" alt="alt text"/>
            <p>
              <span>Price: $137</span>
              <small>This product is labeled as lorem ipsum</small>
            </p>
          </div>
          <div class="hot-sell-item">
            <img src="assets/images/134.jpg" width="130" height="130" alt="alt text"/>
            <p>
              <span>Price: $139</span>
              <small>This product is labeled as lorem ipsum</small>
            </p>
          </div>
          <div class="hot-sell-item">
            <img src="assets/images/135.jpg" width="130" height="130" alt="alt text"/>
            <p>
              <span>Price: $141</span>
              <small>This product is labeled as lorem ipsum</small>
            </p>
          </div>
        </div>
        <div class="item">
          <h5>Woman Shoes</h5>  
          <div class="hot-sell-item">
            <img src="assets/images/155.jpg" width="130" height="130" alt="alt text"/>
            <p>
              <span>Price: $137</span>
              <small>This product is labeled as lorem ipsum</small>
            </p>
          </div>
          <div class="hot-sell-item">
            <img src="assets/images/159.jpg" width="130" height="130" alt="alt text"/>
            <p>
              <span>Price: $139</span>
              <small>This product is labeled as lorem ipsum</small>
            </p>
          </div>
          <div class="hot-sell-item">
            <img src="assets/images/162.jpg" width="130" height="130" alt="alt text"/>
            <p>
              <span>Price: $141</span>
              <small>This product is labeled as lorem ipsum</small>
            </p>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>  

Contact

Contact is constructed from 3 parts:

  • An image wrapped with col-sm-4 col-md-3 col-xs-12 column classes
  • Bootstrap form fields wrapped with col-sm-4 col-md-3 col-xs-12 column classes
  • and google map, created with gmap3 jQuery plugin, wrapped with col-sm-4 col-md-6 col-xs-12 column

<div class="mdf_sub_wrap row mdf_flip mdf_contact">
  <h3>Get in Touch</h3>

  <div class="col-sm-4 col-md-3 col-xs-12">
    <img class="img-responsive support" src="assets/images/support.jpg" width="100%"  alt="alt text" />
  </div>

  <div class="col-sm-4 col-md-3 col-xs-12">
    <form id="contact-form" class="form-horizontal">
      <div class="form-group">
        <div class="col-sm-12">
          <input type="text" class="form-control" name="name" placeholder="your name">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-12">
          <input type="text" class="form-control" name="email" placeholder="your email">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-12">
          <input type="text" class="form-control" name="subject" placeholder="subject">
        </div>
      </div>
      <div class="form-group">
      <div class="col-sm-12">
        <textarea name="message" class="form-control" rows="3" placeholder="Type your message"></textarea>
      </div>
      </div>    
      <div class="form-group">
        <div class="col-sm-12">
          <a type="submit" class="btn btn-default" id="send" >Send Message</a>
        </div>
      </div>
      <div id="success"></div>

    </form>
  </div>

  <div class="col-sm-4 col-md-6 col-xs-12">
    <div id="location" class="gmap3"></div> 
  </div>
</div>

Initializing the gmap3:

$(document).ready(function() {

  function loadMap(){
    var address = "place de l'toile, paris";   
        $('#location').gmap3({ 
          map:{
              address:address,
              options:{
                zoom: 14,
                opts:{
                  scrollwheel:true
                }
              }
            },
            infowindow:{
              address:address,
              options:{
                size: new google.maps.Size(50,50),
                content: 'Lorem Ipsum Company'
              },
              events:{
                closeclick: function(infowindow){
                  alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());
                }
              }
            }
          }
        );
  }

  // check for the current width of the screen
    var width = $(window).outerWidth(); 
    if( width < 770 ){ 
      $('#location').closest('.menu-el').find('a').click(function(){
          loadMap();
      });
    } else {
      loadMap();
    }

    // fires when browser is resized
    $(window).resize(function(){
      // if it is below 770px hide the map
      if( $(window).outerWidth() < 770 ){
        $('#location').closest('div[class*="col"]').hide().addClass('hidden');
      } else { 
        // otherwise show the map, but first run quick check 
        // to make sure that this is done only once, by checking
        // for existence of .hidden class
        if( $('#location').closest('div[class*="col"]').hasClass('hidden') ){
           $('#location').closest('div[class*="col"]').show().removeClass('hidden')
        }
      }
    });

});//document.ready

There are three moments here:

  • loadMap() function that deals with classical initialization of plugin.
  • then custom check that uses width variable to check window width, so if page is opened on smaller device, it will wait until the menu element that holds the map is clicked to initialize the map. This will prevent some issues with map. And if page is opened on desktop, or large device gmap3 will be initialized when document is loaded.
  • And third moment is custom on $(window).resize() function that checks if window is resized to smaller screen. If that is true, hide the google map, otherwise - show it. This is done because of map being really messy when resized from wider screen to smaller.

About Us

This megamenu consists of 3 parts:

<div class="mdf_sub_wrap row mdf_flip">
      <h3>Who Are We</h3>

      <div class="col-sm-4 col-xs-12 mdf_team">
        <div class="cl-title">
          <h4>Behind this thing</h4>
        </div>
        <div class="row">
          <div class="col-xs-12 col-md-6">
            <a class="thumbnail">
              <img src="assets/images/mb2.jpg" width="100%" height="114" alt="alt text">
            </a>
            <div class="caption">
                <h5>Mirko Stankovic</h5>
                <p>Lorem ipsum doloret si ipsum</p>
            </div>
          </div>
          <div class="col-xs-12 col-md-6">
            <a class="thumbnail">
              <img src="assets/images/mb1.jpg" width="100%" height="114" alt="alt text">
            </a>
            <div class="caption">
                <h5>Zoran Vulovic</h5>
                <p>Lorem ipsum doloret si ipsum</p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-sm-4 col-xs-12 mdf_team">
        <div class="cl-title">
          <h4>We Got Skills</h4>
        </div>
        <div class="progress">
         <label>Javascript</label>
          <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            60%
          </div>
        </div>
        <div class="progress">
          <label>CSS</label>  
          <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
            80%
          </div>
        </div>
        <div class="progress">
          <label>PHP</label>
          <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;">
            72%
          </div>
        </div>
        <div class="progress">
          <label>HTML</label>  
          <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
            80%
          </div>
        </div>
      </div>

      <div class="col-sm-4 col-xs-12 mdf_team">
        <div class="cl-title">
          <h4>Contact</h4>
        </div>
        <ul class="list-group cont-list">
          <li class="list-group-item"><i class="icon-phone"></i>Tel/Fax: +23823726532</li>
          <li class="list-group-item"><i class="icon-envelope"></i>eMail: lorem@ipsum.com</li>
          <li class="list-group-item"><i class="icon-map"></i>Location: Harbidl e Street, PM</li>
          <li>
            <span id="socials">
             <i class="icon-facebook"></i> 
             <i class="icon-twitter"></i> 
             <i class="icon-googleplus"></i> 
             <i class="icon-linkedin"></i> 
             <em>We are social</em> 
            </span>
          </li>
        </ul>
      </div>

    </div> 

Tabbed

Tabbed megamenu is built from:

Tabs navigation (Nav Tabs) are separated into col-sm-3 col-xs-12 column and tabbed content into col-sm-9 col-xs-12 column. Each tab-pane holds mul;tiple items on which owl carousel is initialized.

<div class="mdf_sub_wrap row mdf_flip">

    <div class="col-sm-3 col-xs-12">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs tabs-left"><!-- 'tabs-right' for right tabs -->
        <li class="active"><a href="#bags" data-toggle="tab">Bags</a></li>
        <li><a href="#accessories" data-toggle="tab">Accessories</a></li>
        <li><a href="#shoes" data-toggle="tab">Shoes</a></li>
        <li><a href="#dresses" data-toggle="tab">Dresses</a></li>
      </ul>
    </div>

    <div class="col-sm-9 col-xs-12">
        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane active" id="bags">
          <div class="tabs-demo owl-carousel owl-theme">

            <div class="item">
            <img src="assets/images/bags/131.jpg" width="150"  alt="alt text"/>
            <span class="capt">
              <span class="prod-title">Woman Bag</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
              <img src="assets/images/bags/137.jpg" width="150"  alt="alt text"/>
              <span class="capt">
              <span class="prod-title">Woman Bag</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
              <img src="assets/images/bags/132.jpg" width="150"  alt="alt text"/>
              <span class="capt">
              <span class="prod-title">Woman Bag</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
              <img src="assets/images/bags/133.jpg" width="150"  alt="alt text"/>
              <span class="capt">
              <span class="prod-title">Woman Bag</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
              <img src="assets/images/bags/136.jpg" width="150"  alt="alt text"/>
              <span class="capt">
              <span class="prod-title">Woman Bag</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
              <img src="assets/images/bags/137.jpg" width="150"  alt="alt text"/>
              <span class="capt">
              <span class="prod-title">Woman Bag</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

          </div>
          </div>

          <div class="tab-pane" id="accessories">
            <div class="tabs-demo owl-carousel owl-theme">

            <div class="item">
              <img src="assets/images/accessories/142.jpg" width="150"  alt="alt text"/>
              <span class="capt">
              <span class="prod-title">Woman Accessory</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
              <img src="assets/images/accessories/143.jpg" width="150"  alt="alt text"/>
              <span class="capt">
              <span class="prod-title">Woman Accessories</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
              <img src="assets/images/accessories/145.jpg" width="150"  alt="alt text"/>
              <span class="capt">
              <span class="prod-title">Woman Accessories</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
              <img src="assets/images/accessories/147.jpg" width="150"  alt="alt text"/>
              <span class="capt">
              <span class="prod-title">Woman Accessories</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
              <img src="assets/images/accessories/148.jpg" width="150"  alt="alt text"/>
              <span class="capt">
              <span class="prod-title">Woman Accessories</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
              <img src="assets/images/accessories/145.jpg" width="150"  alt="alt text"/>
              <span class="capt">
              <span class="prod-title">Woman Accessories</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
              <img src="assets/images/accessories/147.jpg" width="150"  alt="alt text"/>
              <span class="capt">
              <span class="prod-title">Woman Accessories</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

          </div>
          </div>

          <div class="tab-pane" id="shoes">
            <div class="tabs-demo owl-carousel owl-theme">

            <div class="item">
               <img src="assets/images/shoes/153.jpg" width="150"  alt="alt text"/>
               <span class="capt">
              <span class="prod-title">Woman Shoes</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
               <img src="assets/images/shoes/155.jpg" width="150"  alt="alt text"/>
               <span class="capt">
              <span class="prod-title">Woman Shoes</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
               <img src="assets/images/shoes/160.jpg" width="150"  alt="alt text"/>
               <span class="capt">
              <span class="prod-title">Woman Shoes</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>
            <div class="item">
               <img src="assets/images/shoes/162.jpg" width="150"  alt="alt text"/>
               <span class="capt">
              <span class="prod-title">Woman Shoes</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
               <img src="assets/images/shoes/163.jpg" width="150"  alt="alt text"/>
               <span class="capt">
              <span class="prod-title">Woman Shoes</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
               <img src="assets/images/shoes/160.jpg" width="150"  alt="alt text"/>
               <span class="capt">
              <span class="prod-title">Woman Shoes</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
               <img src="assets/images/shoes/162.jpg" width="150"  alt="alt text"/>
               <span class="capt">
              <span class="prod-title">Woman Shoes</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

          </div>
          </div>

          <div class="tab-pane" id="dresses">
            <div class="tabs-demo owl-carousel owl-theme">

            <div class="item">
               <img src="assets/images/dresses/20.jpg" width="150"  alt="alt text"/>
               <span class="capt">
              <span class="prod-title">Woman Dresses</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
               <img src="assets/images/dresses/21.jpg" width="150"  alt="alt text"/>
               <span class="capt">
              <span class="prod-title">Woman Dresses</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
               <img src="assets/images/dresses/22.jpg" width="150"  alt="alt text"/>
               <span class="capt">
              <span class="prod-title">Woman Dresses</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
               <img src="assets/images/dresses/23.jpg" width="150"  alt="alt text"/>
               <span class="capt">
              <span class="prod-title">Woman Dresses</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
               <img src="assets/images/dresses/24.jpg" width="150"  alt="alt text"/>
               <span class="capt">
              <span class="prod-title">Woman Dresses</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

            <div class="item">
               <img src="assets/images/dresses/26.jpg" width="150"  alt="alt text"/>
               <span class="capt">
              <span class="prod-title">Woman Dresses</span>
              <span class="price">$39</span>
              <a href="">View Details</a>
            </span>
            </div>

          </div>
          </div>

        </div>
    </div>

  </div>

owl carousel parameters for the example:

$(document).ready(function() {
     
  //Sort random function
  function random(owlSelector){
    owlSelector.children().sort(function(){
        return Math.round(Math.random()) - 0.5;
    }).each(function(){
      $(this).appendTo(owlSelector);
    });
  }
 
  $(".tabs-demo").owlCarousel({
    navigation: true,
    navigationText: [
      "",
      ""
      ],
    beforeInit : function(elem){
      //Parameter elem pointing to $("#owl-demo")
      random(elem);
    }
 
  });
 
});

Contact Form

Contact section is used for sending emails throught integrated PHP script.

You can use contact form provided in the shortcode or create you own.

Note

If creating your own form, you should keep few things intact, unless you change it in javascraipt, the <div id="success"></div> is used to display success/error message on the form submisson. Add it somewhere in the form. And second thing is to add send id attribute to your send button element - it can be <a id="send">, <input id="send">, or whatever element you like, as long as you assign it send id attribute. Then your form need to keep id="contact-form", and your name, email, subject and message fields, must have name attributes with same value, <input type="text" name="name">, <input type="text" name="email">, etc. These 4 inputs are accepted, unless you change it in contact.php to accesp more, or just edit them.

Setting it up


In order to be able to receive the emails you need to set your email in contact.php that came with this product.

Open the contact.php file located into the contact folder. Edit this line: $to = 'xxxx@xxxx.com'; replacing xxxx@xxxx.com with your e-mail address.

In this file it is also possible to change other parameters, including error messages or confirmation messages, email header, etc.

Don't forget

Many email receiving servers will simply ignore the incoming message if it does not meet certain criteria. This script has been tested with Gmail and Yahoo but it may not work well with Hotmail.

One More Thing

As mentioned, this form is executed by the contact.php located into the contact folder. So, if it happens that you move this file (contact.php), it will be necessary to update the path in the mdf_js.js script located in he assets/js folder. Just edit this line: $.post('contact/contact.php'. But it is best to leave it where it is.

Icons

MDF Megamenu comes with 3 web fonts: fontAwesome, elgant icons and glyphicons. You can use any other third-party web font you like, just include it in head. For full list of classes for 3 included fonts, check the credits section for the links.

Fixed & Sticky

If you want to include sticky or fixed behaviour all you need to do is to add sticky or fixed class to the menu.

Example:

<nav id="mdf_menu" class="navbar navbar-default sticky">

Layouts

MDF Megamenu comes with 4 pre-defined layouts:

  • Default

    Fixed Width Navigation

  • Traditional

    Full Width Navigation

  • Wireframed

    Full Width Transparent Navigation

  • Clean

    Full Width Transparent Navigation

To apply any of it, just add it as a class to the main nav element:

<nav id="mdf_menu" class="navbar navbar-default traditional">

Or


<nav id="mdf_menu" class="navbar navbar-default wireframed">

Skins

To change skin, just include it in the head of the page after the main mdf_megamenu.css stylesheet.
Example:

<link rel="stylesheet" type="text/css" href="path/to/blue.css">


For default layout, you do not need to add any class, just leave it as it is.

Submenu hover effects

Hover effects are included in demo files. Go to demo/assets/css/demos and open one of the demo stylesheets, near the end of the file you will see

/* Hover Effect */
  {-- code --}
code for that specific effect that is applied in that demo. Just copy it into your custom stylesheet

Credits

List of the resources used in the demo

Themes used for the demo are from: