/ Mega Menu

A mega menu groups navigation options to eliminate scrolling

A mega menu groups navigation options to eliminate scrolling

MEGA MENU DROPDOWNS WITH FOUNDATION 5

A mega menu (a big, 2-dimensional drop-down panel) groups navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users’ choices.

Made with

Html
Css/SCSS
Javascript

Html

<div class="contain-to-grid">
  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">Logo</a></h1>
      </li>
      <li class="toggle-topbar menu-icon">
        <a href="#"><span>Menu</span></a>
      </li>
    </ul>
    <section class="top-bar-section">
      <ul class="left">
        <li class="divider"></li>
        <li>
          <a href="#">University</a>
        </li>
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Programs</a>
          <ul class="dropdown m-menu">
            <li>
              <div class="row">
                <div class="medium-4 column">
                  <h3>Undergraduate</h3>
                  <ul>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Admissions</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Academics</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fields of Study</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Useful Contacts</a>
                    </li>
                  </ul>
                </div><!--end of .column-->
                <div class="medium-4 column">
                  <h3>Graduate</h3>
                  <ul>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Admissions</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Academics</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fields of Study</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
                    </li>
                  </ul>
                </div><!--end of .column-->
                <div class="medium-4 column">
                  <h3>Online Learning</h3>
                  <ul>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Why e-learning?</a
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Studies</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Date & Deadlines</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Contact</a>
                    </li>
                  </ul>
                </div><!--end of .column-->
              </div><!--end of .row-->
              <div class="row">
                <div class="medium-4 column">
                  <h3>Read</h3>
                  <a href="#" class="intro">
                    <i class="icon-play"></i>
                    <img src="https://unsplash.it/400/280?image=532" />
                  </a>
                </div><!--end of .column-->
                <div class="medium-4 column">
                  <h3>Build</h3>
                  <a href="#" class="intro">
                    <i class="icon-play"></i>
                    <img src="https://unsplash.it/400/280?image=534" />
                  </a>
                </div><!--end of .column-->
                <div class="medium-4 column">
                  <h3>Enjoy</h3>
                  <a href="#" class="intro">
                    <i class="icon-play"></i>
                    <img src="https://unsplash.it/400/280?image=452" />
                  </a>
                </div><!--end of .column-->
              </div><!--end of .row-->
            </li>
          </ul>
        </li>
        <li class="divider"></li>
        <li>
          <a href="#">Research</a>
        </li>
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Studies</a>
          <ul class="dropdown m-menu">
            <li>
              <div class="row">
                <div class="medium-6 column show-for-medium-up">
                  <img src="https://unsplash.it/380/220?image=668" />
                  <div class="info-wrap">
                    <div class="info info-visible">
                      <h3>Select your program...</h3>
                      <p>More info...</p>
                    </div>
                    <div class="info">
                      <h3>Undergraduate Studies</h3>
                      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
                    </div>
                    <div class="info">
                      <h3>Graduate Studies</h3>
                      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.</p>
                    </div>
                    <div class="info">
                      <h3>Internships</h3>
                      <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae adipisci velit, sed quia non numquam eius.</p>
                    </div>
                    <div class="info">
                      <h3>Other Studies</h3>
                      <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
                    </div>
                    <div class="info">
                      <h3>Useful Contacts</h3>
                      <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat adipisci velit, sed quia non numquam eius.</p>
                    </div>
                  </div><!-- .info-wrap -->

                </div><!--end of .column-->
                <div class="medium-6 column">
                  <h3>Programs</h3>
                  <ul class="is-hover">
                    <li><a href="#"><i class="icon-circle-right"></i>Undergraduate</a></li>
                    <li><a href="#"><i class="icon-circle-right"></i>Graduate</a></li>
                    <li><a href="#"><i class="icon-circle-right"></i>Internships</a></li>
                    <li><a href="#"><i class="icon-circle-right"></i>Other</a></li>
                    <li><a href="#"><i class="icon-circle-right"></i>Contact</a></li>
                  </ul>
                </div><!--end of .column-->
              </div><!--end of .row-->
            </li>
          </ul>
        </li>
        <li class="divider"></li>
        <li>
          <a href="#">Student Life</a>
        </li>
        <li class="divider"></li>
      </ul>
    </section>
  </nav>
</div><!--end .contain-to-grid-->

<h2 class="dt">Responsive Mega Menus with Foundation 5</h2>

<p class="p">Demo by George Martsoukos. <a href="http://www.sitepoint.com/building-responsive-mega-menu-foundation" target="_blank">See article</a>.</p>

Css

/* ICOMOON STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  font-family: 'icomoon';
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon_copy.eot");
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon_copy.eot") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon_copy.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon_copy.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icomoon_copy.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: absolute;
  top: 50%;
  transition: all .3s ease;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:not(.icon-play), 
[class*=" icon-"]:not(.icon-play) {
  margin-top: -6.5px;
  right: 0;
}

.icon-play:before {
  content: "\ea15";
}

.icon-circle-right:before {
  content: "\ea42";
}

/* GENERAL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
  background: lightgray;
}

body, h3 {
  color: white;
}

p {
  font-size: .9em;
}

h3 {
  text-transform: uppercase;
  font-size: 1em;
  padding: .5em 0;
  margin: .5em 0;
}

img {
  margin-bottom: 20px;
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

/* MEGA MENU POSITIONING STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.top-bar-section .has-dropdown {
  position: static;
  a {
   position: relative;
   }
}
.top-bar-section .has-dropdown.moved {
  position: static;
  > a {
    &:after {
      display: block;
    }
  }
}



  /* DROPDOWN GENERAL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.m-menu {
  border-top: 1px solid #4E4E4E;
  a {
    display: block;
    opacity: .5;
    transition: opacity .3s ease;
    &:hover {
      opacity: 1;
    }
  }
}



  /* TOP LINKS INSIDE DROPDOWN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.column li {
  &:not(:first-child) a {
    border-top: 1px solid #262626;
  }
  &:not(:last-child) a {
    border-bottom: 1px solid #4E4E4E;
  }
  a {
    &:hover {
      i {
         right: 3px;
      }
    }
  }
}



  /* BOTTOM LINKS INSIDE FIRST DROPDOWN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.intro {
  .icon-play {
    position: absolute;
    color: rgba(0, 0, 0, 0.4);
    font-size: 2.5em;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: color .3s ease;
  }
  &:hover {
    .icon-play {
      color: rgba(0, 0, 0, 0.7);
    }
  }
}



  /* TARGET DIV INSIDE SECOND DROPDOWN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.column > img { 
  margin: 1em 0;
}

.info-wrap {
  h3 {
    width: 50%;
    padding-bottom: 5px;
    border-bottom: 1px solid #4E4E4E;  
  }
}

.info {
  display: none;
}

.info-visible {
  display: block;
}

.dt {
  margin-top: 50px;
  text-align: center;
  font-size: 2em;
  padding: 0 20px;
}

.p {
  color: black;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}

Javascript

$(document).foundation();

// below does the "Programs" info switch
$('.is-hover a').on('mouseover', function () {
  var idx = $(this).parent().index() + 2;
  $('.info:nth-child(' + idx + ')').addClass('info-visible');
  $('.info:nth-child(' + idx + ')').siblings().removeClass('info-visible');
});

$('.dropdown').on('mouseout', function () {
  $('.info:nth-child(1)').addClass('info-visible').siblings().removeClass('info-visible');
});

Author

SitePoint

Demo

See the Pen Mega Menu Dropdowns with Foundation 5 by SitePoint (@SitePoint) on CodePen.