Mega Menu

Source from http://webthemex.com/webslidemenu/webslide/mobile-drawer-style-menu/dynamic-submenu-indicator-menu/index.html

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="wsmenucontainer clearfix">
  <div class="overlapblackbg"></div>
  <div class="wsmobileheader clearfix">
    <a id="wsnavtoggle" class="animated-arrow"><span></span></a>
    <a class="smallogo"><img src="images/logo.png" width="120" alt="" /></a>
    <a class="callusicon" href="tel:123456789"><span class="fa fa-phone"></span></a>
  </div>
  <div class="header">
    <div class="wrapper clearfix">
      <div class="logo clearfix">
        <a href="index.html" title="Responsive Slide Menus"><img src="images/logo.png" alt="" /></a>
      </div>
    </div>
    <!--Main Menu HTML Code-->
    <nav class="wsmenu clearfix">
      <ul class="mobile-sub wsmenu-list">
        <li><a href="#" class="active"><i class="fa fa-home"></i><span class="hometext">&nbsp;&nbsp;Home</span></a></li>
        <li><a href="#"><i class="fa fa-align-justify"></i>&nbsp;&nbsp;Dropdowns <span class="arrow"></span></a>
          <ul class="wsmenu-submenu">
            <li><a href="#"><i class="fa fa-angle-right"></i>Website Design </a></li>
            <li><a href="#"><i class="fa fa-angle-right"></i>Ecommerce Solutions</a></li>
            <li><a href="#"><i class="fa fa-angle-right"></i>Application Development</a></li>
            <li><a href="#"><i class="fa fa-angle-right"></i>Website Development</a></li>
            <li><a href="#"><i class="fa fa-angle-right"></i>Open Source Development</a>
              <ul class="wsmenu-submenu-sub">
                <li><a href="#"><i class="fa fa-angle-right"></i>Submenu item 1</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i>Submenu item 2</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i>Submenu...

CSS

html,
body,
iframe,
h1,
h2,
h3,
h4,
h5,
h6 {
  border: 0 none;
  font-family: Helvetica, Arial, sans-serif;
  font-feature-settings: inherit;
  font-kerning: inherit;
  font-language-override: inherit;
  font-size: 12px;
  font-size-adjust: inherit;
  font-stretch: inherit;
  font-style: inherit;
  font-synthesis: inherit;
  font-variant: inherit;
  font-weight: normal;
  line-height: 18px;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

.cl {
  clear: both;
}

ul,
ol {
  box-sizing: border-box;
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
}

textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  min-height: 60px;
  padding: 5px 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #b9b9b9;
  border-radius: 2px;
  color: #2c2c2c;
  display: block;
  outline: medium none;
  padding: 2px;
  text-indent: 4px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  cursor: pointer;
  padding: 0;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0 none;
  padding: 0;
}

img,
object,
embed,
video {
  border: 0 none;
  max-width: 100%;
}

a:focus {
  outline: medium none !important;
}

.wsmobileheader {
  display: none;
}

.overlapblackbg {
  display: none;
}

.wsmenu {
  background-color: #ffffff;
  border-radius: 4px 4px 0 0;
  color: #fff;
  font-family: Helvetica, sans-serif;
  font-size: 15px;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0;
  position: relative;
  width: 100%;
}

.wsmenu-list {
  display: table;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  width: 100%;
}

.wsmenu-list > li {
  display: table-cell;
  text-align: center;
}

.wsmenu-list li:first-child a {
  border-radius: 4px 0...

JavaScript

var _0x284b = [
  'wsoffcanvasopener', 'toggleClass', '.wsmenucontainer', 'click',
  '#wsnavtoggle', 'removeClass', '.overlapblackbg',
  '<span class="wsmenu-click"><i class="wsmenu-arrow fa fa-angle-down"></i></span>', 'prepend', '.wsmenu-submenu', 'has', '.wsmenu-list> li',
  '.megamenu', '.wsmenu-list > li', 'ws-activearrow', 'children',
  'siblings', 'parent', 'slow', 'slideUp', '.wsmenu-submenu, .megamenu',
  'not', 'slideToggle', '.wsmenu-click',
  '<span class="wsmenu-click02"><i class="wsmenu-arrow fa fa-angle-down"></i></span>',
  '.wsmenu-submenu-sub', '.wsmenu-list > li > ul > li',
  '.wsmenu-submenu-sub-sub', '.wsmenu-list > li > ul > li > ul > li',
  'wsmenu-rotate', '.wsmenu-arrow', '.wsmenu-click02'
];
arrow = '<span class="wsmenu-click"><i class="wsmenu-arrow fa fa-angle-down"></i></span>';

$(function() {
  $('#wsnavtoggle')['click'](function() {
    $('.wsmenucontainer')['toggleClass']('wsoffcanvasopener')
  });
  $('.overlapblackbg')['click'](function() {
    $('.wsmenucontainer')['removeClass']('wsoffcanvasopener')
  });
  $('.wsmenu-list> li')['has']('.wsmenu-submenu')['prepend'](arrow);
  $('.wsmenu-list > li')['has']('.megamenu')['prepend'](arrow);
  $('.wsmenu-click')['click'](function() {
    $(this)['toggleClass']('ws-activearrow')['parent']()['siblings']()['children']()['removeClass']('ws-activearrow');
    $('.wsmenu-submenu, .megamenu')['not']($(this)['siblings']('.wsmenu-submenu, .megamenu'))['slideUp']('slow');
    $(this)['siblings']('.wsmenu-submenu')['slideToggle']('slow');
    $(this)['siblings']('.megamenu')['slideToggle']('slow')
  });
  $('.wsmenu-list > li > ul > li')['has']('.wsmenu-submenu-sub')['prepend']('<span class="wsmenu-click02"><i class="wsmenu-arrow fa fa-angle-down"></i></span>');
  $('.wsmenu-list > li > ul > li > ul > li')['has']('.wsmenu-submenu-sub-sub')['prepend']('<span class="wsmenu-click02"><i class="wsmenu-arrow fa fa-angle-down"></i></span>');
  $('.wsmenu-click02')['click'](function() {
   ...