JSFiddle - React, Tailwind, and code Playground

Push Menu

by Jennifer Perrin

HTML

<!-- start main-nav-wrap -->
  <div class="main-nav-wrap">
  <!-- start main-nav : top level menu links -->
  <div class="container main-nav">
    <ul>

      <li id="home" class="nav-links"><a  href="#"><span></span>HOME</a></li>
      <li id="products" class="nav-links"><a  href="#"><span></span>PRODUCTS</a></li>
      <li id="contact" class="nav-links"><a  href="#"><span></span>CONTACT</a></li>
      <li id="media" class="nav-links"><a  href="#"><span></span>EMBED MEDIA</a></li>
      <li id="search" class="nav-links"><a  href="#"><span></span>SEARCH</a></li>

    </ul>
  </div>
  <!-- start sub-menu container -->
  <div class="main-subnav">
    <div class="container">

   <!-- start sub-menu 1 -->
      <div class="sub-menu">
        <h2>PUSH<sup>&reg;</sup> Menu:</h2>
        <div class="sub-container">
          <ul class="grid_3 alpha">
            <li><a  href="#">jQuery 1.7.2 compliant</a></li>
            <li><a href="#">Adjustable Easing and Speeds.</a></li>
             <li><a href="#">Simple and Lightweight.</a></li>
          </ul>
          <ul class="grid_3">
            <li><a  href="/why-dish/#unbeatable">Customizable.</a></li>
            <li><a href="/why-dish/#movies">Add any contnt to sub menus.</a></li>
          </ul>
          <ul class="grid_3">
            <li><a href="/why-dish/#service">Premium Menu.</a></li>
            <li><a  href="/why-dish/#stack">Works in all browsers.</a></li>
          </ul>
          <ul class="grid_3 omega">
            <li><a  href="/why-dish/#carousel-four">Uses pure css styling.</a></li>
            <li><a  href="/why-dish/#history">Add your own graphics and icons.</a></li>
          </ul>
        </div>
      </div>
   <!-- end sub-menu 1 -->

   <!-- start sub-menu 2 -->
     <div  class="sub-menu">
        <div class="sub-container">

          <ul >
              <li class="grid_2 alpha subnav-icon" id="television"><a  href="#"><span></span>Televisions</a></li>
            <li class="grid_2...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
ol, ul {
    list-style: none outside none;
}

.header{
  width:100%;
  height:400px;

}


.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
}

h1, h3 {
    text-transform: uppercase;
}
p {
    font-size: 14px;
    line-height: 24px;
}
a {
    color: .ED1420;
    outline: medium none;
    text-decoration: none;
}
a.alt {
    color: #333333;
}
a:hover {
    text-decoration: underline;
}
.container {
    margin: 0 auto;
    position: relative;
    width: 960px;
    overflow:hidden;
}
strong {
    font-weight: bold;
}


.main-nav-wrap {
   color: #454545;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    line-height: 1;
   background: rgb(255,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:...

JavaScript

//PushMenu - 2012 - A jQuery Plugin. NuvuThemes.com - http://nuvuthemes.com/shop/pushmenu written by: Nolan R Campbell - [email protected]
(function($) {
    $.fn.pushmenu = function(options) {
        //default options
        options = $.extend({
            open_easing: 'easeOutCirc',
            open_height: 250,
            open_speed: 500,
            close_speed: 500,
            close_easing: 'easeOutCirc',
            slide_speed: 700,
            slide_easing: 'swing'

        }, options);
        //return each targeted div
        return this.each(function() {
            var $this = $(this);
            var o = $.metadata ? $.extend({}, options, $this.metadata()) : options;
            var wraph = $(this).height();


            $this.find('.main-nav ul').find('li').bind('mouseover', function() {
                // $this.animate({'height' : o.open_height+'px'},{duration:o.open_speed, easing: o.open_easing});

            });


            $this.find('.nav-links').each(function(i) {
                var $thiseach = $(this);
                var $subi = $this.find('.main-subnav').find(".container").find('.sub-menu:nth-child(' + (i + 1) + ')').has('.sub-container');

                $thiseach.bind('mouseover', function() {

                    var subheight = $subi.outerHeight();
                    if ($subi.length) {
                        $this.animate({
                            'height': (subheight + 50) + 'px'
                        }, {
                            duration: o.open_speed,
                            easing: o.open_easing
                        });


                        $this.find('.main-subnav').find(".container").find('.sub-menu').not('.sub-menu:nth-child(' + (i + 1) + ')').stop(true, false).animate({
                            'left': '-1000px'
                        }, {
                            duration: o.slide_speed,
                            easing: o.slide_easing,
                            complete:...