JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<div id="navigation">
    <a id="logo" href="">
        <img src="http://denison.edu/sites/all/themes/denison/images/denison-logo.svg" width="280" height="89" >
    </a>
    <svg width="30" height="30" id="menu-icon">
    	<path d="M0,2 30,2" stroke="#fff" stroke-width="4"/>
   		<path d="M0,10 30,10" stroke="#fff" stroke-width="4"/>
    	<path d="M0,18 30,18" stroke="#fff" stroke-width="4"/>
  	</svg>
  	</div>
    <nav id="main-menu" role="navigation">
        <ul class="links inline clearfix">
            <li class="menu-798 first"><a href="" target="_self">Admissions</a></li>
            <li class="menu-970"><a href="">Academics</a></li>
            <li class="menu-800"><a href="">Campus Life</a></li>
            <li class="menu-801"><a href="">News & Events</a></li>
            <li class="menu-802 last active"><a href="">Denison A-Z</a></li>
        </ul>
    </nav>
</div>
<div id="sub-nav">
    <nav id="secondary-menu" role="navigation">
        <ul class="links inline clearfix">
            <li class="menu-775 first"><a href="">Alumni</a></li>
            <li class="menu-776"><a href="">Athletics</a></li>
            <li class="menu-1040"><a href="">Library</a></li>
            <li class="menu-778"><a href="">MyDenison</a></li>
            <li class="menu-779 last"><a href="">Support Denison</a></li>
        </ul>
    </nav>
</div>

CSS

body {
    background: #fff;
}

#navigation {
    display: block;
    width: 100%;
    min-height: 89px;
    background: #000;
}

#logo {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  height: 89px;
  width: 280px;
  background: #b8252b;
  z-index: 2;
}

#menu-icon {
    float: left;
    height: 20px;
    width: 30px;
    margin: 15px;
    padding: 10px 8px;
    background: #555;
    border-radius: 2px;
    cursor: pointer;  
}

    #menu-icon:hover {
        background: #666;
    }

#main-menu {
    display: none;
    clear:both;
}

#main-menu ul { 
    margin: 0;
    padding: 0;
    clear: both;
}

#main-menu li { 
    list-style-type: none;
    width: 90%; 
    padding: 14px 5%; 
    background: #000;
    font-family: sans-serif;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
}

#main-menu li a {
    color: #fff;
    text-decoration: none;
} 

#sub-nav {
    display: none;
}

#secondary-menu ul {
    margin: 0;
    padding: 0;
    clear: both;
}

#secondary-menu li { 
    list-style-type: none;
    width: 90%; 
    padding: 14px 5%; 
    background: #ddd;
    font-family: sans-serif;
    font-size: .9em;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

#secondary-menu li a {
    color: #666;
    text-decoration: none;
} 

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

JavaScript

$(document).ready( function() {	
    
	$('#menu-icon').click(function(){
    	$('#navigation #main-menu').slideToggle('400', 'swing');
        $('#sub-nav').slideToggle('400', 'swing');
	});
	
	if ($("#menu-icon").css("display") == "block" ){
        
        $('#main-menu ul li a, #secondary-menu ul li a').click(function(){
    	    $('#main-menu ul, #sub-nav').slideToggle('400', 'swing');
		});
        
	}	
    
});