Mega menu

      No Comments on Mega menu

Mega menu using bootstrap drop-down. A mega-menu is a typically defined drop-down interface triggered when link or button is hovered. It usually displays many options in one main panel.

Mega menu -desktop view

Mega menu

Mega menu

You should use mega menus when:

  • If a website contains / manages large number of products.
  • A website contains vast content.
  • Website is primarily information-oriented, with diverse long-form content.
  • Contains to much linking content.

HTML markup

To create a mega-menu, you need to place bootstrap drop-down in a container that has width set to 100%. Add a class to bootstrap dropdown that is mega-dropdown which uses the complete width of container and is displayed in mega-menu style. The menu can be divided into parts using col-md classes.

<div class="mega-menu-container">
  <div class="dropdown mega-dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Mega-Menu
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
     <div class="col-md-3">
        <img class="img-responsive" src="scanfcode.jpg" alt="Scanfcode"> 
     </div>
     <div class="col-md-3">
       <h5>Categories</h5>
       <ul>
         <li>C</li>
         <li>C++</li>
         <li>HTML</li>
         <li>CSS</li>
         <li>Java</li>
         <li>JavaScript</li>
         <li>PHP</li>
         <li>Android</li>
         <li>Templates</li>
       </ul>
     </div>
     <div class="col-md-3">
       <h5>Quick links</h5>
       <ul>
         <li>About Us</li>
         <li>Contact Us</li>
         <li>Privacy Policy</li>
         <li>Sitemaps</li>
       </ul>
      </div>
     <div class="col-md-3">
       <h5>Subscribe to our Newsletter</h5>
       <br>
       <form>
       <input class="form-control" placeholder="Subscribe"/><br>
       <input class="btn btn-primary form-control" type="submit" value="Submit" />
       </form>
     </div>
    </ul>
  </div>
</div>
</div>

CS:

@import url('https://fonts.googleapis.com/css?family=Raleway');
body
{
    font-family: 'Raleway', sans-serif;
}
.mega-menu-container
{
   width:100%;
   padding:1% 4%;
}
.mega-dropdown .dropdown-menu
{
   width:100%;padding:20px;
}
.mega-dropdown h5
{
  font-size:20px;color:#337ab7;
}
.mega-dropdown li
{
  list-style-type:none;
  border-bottom:solid 1px #ccc;
  padding:4px 0px;
  color:#666;
}

See the Pen Mega-menu in bootstrap by scanfcode (@scanfcode) on CodePen.

Summary
Mega menu
Article Name
Mega menu
Description
Mega menu using bootstrap drop-down. A mega-menu is a typically defined drop-down interface triggered when link or button is hovered.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *