Full width mega menus

by Florian Gropp

HTML

<link rel="stylesheet" href="https://vadikom.github.io/smartmenus/src/css/sm-core-css.css">
<link rel="stylesheet" href="https://codepen.io/vadikom/pen/rLdJAK.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://vadikom.github.io/smartmenus/src/jquery.smartmenus.js"></script>
<nav class="main-nav" role="navigation">

  <!-- Mobile menu toggle button (hamburger/x icon) -->
  <input id="main-menu-state" type="checkbox" />
  <label class="main-menu-btn" for="main-menu-state">
    <span class="main-menu-btn-icon"></span> Toggle main menu visibility
  </label>

  <h2 class="nav-brand"><a href="#">Brand</a></h2>

  <!-- Sample menu definition -->
  <ul id="main-menu" class="sm sm-blue">
    <li class="has-mega-menu"><a href="#">Mega 1</a>
      <ul class="mega-menu">
        <li>
          <div class="column-1-3">
            <h2>Heading 1</h2>
            <div class="mega-menu-sample-image">Image</div>
            <ul>
              <li><a href="#">Regular link</a></li>
              <li><a href="#">Regular link</a></li>
              <li><a href="#">Regular link</a></li>
              <li><a href="#">Regular link</a></li>
            </ul>
          </div>
          <div class="column-1-3">
            <h2>Heading 2</h2>
            <ul>
              <li><a href="#">Regular link</a></li>
              <li><a href="#">Regular link</a></li>
              <li><a href="#">Regular link</a></li>
            </ul>
            <h2>Heading 3</h2>
            <ul>
              <li><a href="#">Regular link</a></li>
              <li><a href="#">Regular link</a></li>
            </ul>
          </div>
          <div class="column-1-3">
            <h2>Heading 4</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elit velit, ultricies eget porta ac.</p>
            <ul>
              <li><a href="#">Regular link</a></li>
              <li><a href="#">Regular link</a></li>
            </ul>
         ...

CSS

.main-nav {
  position: relative;
  background: #3092c0;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4f4e79), color-stop(100%, #4b4a73));
  background-image: -webkit-linear-gradient(top, #4f4e79, #4b4a73);
  background-image: -moz-linear-gradient(to bottom, #4f4e79, #4b4a73);
  background-image: -o-linear-gradient(to bottom, #4f4e79, #4b4a73);
  background-image: linear-gradient(to bottom, #4f4e79, #4b4a73);
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.main-nav:after {
  clear: both;
  content: "\00a0";
  display: block;
  height: 0;
  font: 0px/0 serif;
  overflow: hidden;
}

.nav-brand {
  float: left;
  margin: 0;
}

.nav-brand a {
  display: block;
  padding: 10px 10px 10px 20px;
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: normal;
  line-height: 29px;
  text-decoration: none;
}

#main-menu {
  clear: both;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

@media (min-width: 768px) {
  #main-menu {
    float: right;
    clear: none;
  }
}


/* Mega menus */


/* make mega menus take the full width of .main-nav */

#main-menu,
#main-menu > .has-mega-menu {
  position: static !important;
}

#main-menu .mega-menu {
  margin-left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
}

#main-menu > .has-mega-menu .scroll-up,
#main-menu > .has-mega-menu .scroll-down {
  margin-left: 0 !important;
}


/* clear any floats inside the mega menus */

#main-menu .mega-menu > li {
  overflow: auto;
}


/* reset mega menu list/link styles (which are inherited from the SmartMenus core/theme styles) */

#main-menu .mega-menu {
  color: #353451;
}

#main-menu .mega-menu ul {
  position: static;
  display: block;
  margin: 0.83em 0;
  border: 0;
  padding: 0 0 0 20px;
  width: auto;
  background:...

JavaScript

// SmartMenus init
$(function() {
  $('#main-menu').smartmenus({
    subMenusSubOffsetX: 1,
    subMenusSubOffsetY: -8
  });
});

// SmartMenus mobile menu toggle button
$(function() {
  var $mainMenuState = $('#main-menu-state');
  if ($mainMenuState.length) {
    // animate mobile menu
    $mainMenuState.change(function(e) {
      var $menu = $('#main-menu');
      if (this.checked) {
        $menu.hide().slideDown(250, function() { $menu.css('display', ''); });
      } else {
        $menu.show().slideUp(250, function() { $menu.css('display', ''); });
      }
    });
    // hide mobile menu beforeunload
    $(window).bind('beforeunload unload', function() {
      if ($mainMenuState[0].checked) {
        $mainMenuState[0].click();
      }
    });
  }
});