<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css">
<nav>
<div class="main-nav-bg">
<div class="left-bg"></div>
<div class="right-bg"></div>
</div>
<div class="main-nav">
<div class="logo">
<a href="#">CompanyLogo</a>
</div>
<div id="vertical-menu">
<a href="#">Category</a>
</div>
<div id="company-menu">
<h2>Post Title</h2>
<p>Subtitle for post</p>
</div>
</div>
<div class="fixed-width">
<div id="drop-vertical-menu">
<div class="menu-left">
<h3 id="category1-link" class="focus">Category1</h3>
<h3 id="category2-link">Category2</h3>
<h3 id="category3-link">Category3</h3>
<h3 id="category4-link">Category4</h3>
</div>
<div class="menu-right">
<div id="category1-menu" class="menu-container focus">
<ul>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
</ul>
</div>
<div id="category2-menu" class="menu-container">
<ul>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
</ul>
</div>
<div id="category3-menu" class="menu-container">
<ul>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
</ul>
</div>
<div id="category4-menu" class="menu-container">
<ul>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
</ul>
</div>
</div>
</div>
<div id="drop-company-menu">
<ul>
<li><a href="#">#1 Post 1</a></li>
<li><a href="#">#2 Post 2</a></li>
<li><a href="#">#3 Post 3</a></li>
<li><a href="#">#4 Post 4</a></li>
<li><a href="#">#5 Post 5</a></li>
<li><a href="#">#6 Post 6</a></li>
<li><a href="#">#7 Post 7</a></li>
<li><a href="#">#8 Post 8</a></li>
<li><a href="#">#9 Post 9</a></li>
<li><a href="#">#10 Post 10</a></li>
<li><a href="#">#11 Post 11</a></li>
<li><a href="#">#12 Post 12</a></li>
<li><a href="#">#13 Post 13</a></li>
<li><a href="#">#14 Post 14</a></li>
<li><a href="#">#15 Post 15</a></li>
<li><a href="#">#16 Post 16</a></li>
<li><a href="#">#17 Post 17</a></li>
<li><a href="#">#18 Post 18</a></li>
<li><a href="#">#19 Post 19</a></li>
<li><a href="#">#20 Post 20</a></li>
</ul>
<div class="bottom-link">
<a href="#">See All ></a>
</div>
</div>
</div>
</nav>
*, *:before, *:after {
box-sizing: border-box;
font-family: lato;
}
body {
background: linear-gradient(white, #bfbfbf);
height: 1000px;
}
nav {
color: white;
width: 100%;
}
nav .main-nav-bg {
width: 100%;
position: absolute;
top: 0;
-webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8);
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8);
}
nav .main-nav-bg div:first-child {
float: left;
width: 50%;
height: 70px;
background-color: #4c7f7f;
}
nav .main-nav-bg div:last-child {
float: left;
width: 50%;
height: 70px;
background-color: darkslategray;
}
nav .main-nav {
width: 100%;
max-width: 1000px;
height: 70px;
background-color: darkslategray;
margin: 0 auto;
position: relative;
}
nav .main-nav a {
color: white;
text-decoration: none;
}
nav .main-nav .logo {
font-size: 28px;
font-weight: bold;
padding: 0 35px 0 15px;
background-color: #4c7f7f;
float: left;
line-height: 70px;
}
nav .main-nav #vertical-menu {
background-color: #3c6565;
padding: 0 3px 0 0;
position: relative;
font-size: 15px;
float: left;
line-height: 70px;
}
nav .main-nav #vertical-menu:before {
content: '';
width: 0;
height: 0;
position: absolute;
right: 100%;
top: 0;
line-height: 0;
border-top: 70px solid transparent;
border-right: 35px solid #3c6565;
}
nav .main-nav #vertical-menu:after {
content: '';
width: 0;
height: 0;
position: absolute;
top: 0;
left: 100%;
line-height: 0;
border-top: 70px solid #3c6565;
border-right: 35px solid transparent;
}
nav .main-nav #vertical-menu a:after {
content: '';
width: 0;
height: 0;
position: relative;
top: 10px;
left: 3px;
border-top: 4px solid white;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
nav .main-nav #company-menu {
float: left;
margin: 0 0 0 45px;
}
nav .main-nav #company-menu h2 {
text-transform: uppercase;
margin: 13px 0 0;
font-weight: 900;
font-size: 24px;
}
nav .main-nav #company-menu h2:after {
content: '';
width: 0;
height: 0;
position: relative;
top: 10px;
left: 2px;
border-top: 4px solid white;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
nav .main-nav #company-menu p {
margin: 0;
font-size: 13px;
padding-bottom: 3px;
}
nav .fixed-width {
width: 1000px;
margin: 0 auto;
}
nav .fixed-width #drop-vertical-menu {
background-color: darkslategray;
padding: 15px 15px 10px 0;
width: 810px;
margin: 0 0 0 195px;
position: relative;
overflow: hidden;
display: none;
-webkit-box-shadow: 0px 2px 4px 0 gray;
-moz-box-shadow: 0px 2px 4px 0 gray;
box-shadow: 0px 2px 4px 0 gray;
overflow: hidden;
}
nav .fixed-width #drop-vertical-menu:before {
content: "";
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.6);
}
nav .fixed-width #drop-vertical-menu.focus {
display: block;
}
nav .fixed-width #drop-vertical-menu .menu-left {
float: left;
width: 100px;
font-size: 18px;
}
nav .fixed-width #drop-vertical-menu .menu-left h3 {
font-weight: normal;
font-size: 14px;
text-transform: uppercase;
margin: 0;
width: 180px;
padding: 6px 0 6px 10px;
}
nav .fixed-width #drop-vertical-menu .menu-left h3.focus {
background-color: #4c7f7f;
}
nav .fixed-width #drop-vertical-menu .menu-right {
float: right;
width: 685px;
padding: 0 0 35px 0;
background-color: #4c7f7f;
}
nav .fixed-width #drop-vertical-menu .menu-right .menu-container {
display: none;
}
nav .fixed-width #drop-vertical-menu .menu-right .menu-container.focus {
display: block;
}
nav .fixed-width #drop-vertical-menu .menu-right .menu-container ul {
margin: 0;
padding: 5px 0 0 40px;
}
nav .fixed-width #drop-vertical-menu .menu-right .menu-container ul li {
float: left;
list-style: none;
width: 30%;
padding: 4px 10px 6px;
}
nav .fixed-width #drop-vertical-menu .menu-right .menu-container ul li:hover {
background-color: #558f8f;
}
nav .fixed-width #drop-vertical-menu .menu-right .menu-container ul li a {
color: white;
text-decoration: none;
font-size: 16px;
}
nav .fixed-width #drop-company-menu {
background-color: darkslategray;
width: 300px;
background-color: darkslategray;
padding: 10px 0 0;
margin: 0 0 0 340px;
position: relative;
overflow: hidden;
-webkit-box-shadow: 0px 2px 4px 0 gray;
-moz-box-shadow: 0px 2px 4px 0 gray;
box-shadow: 0px 2px 4px 0 gray;
overflow: hidden;
display: none;
}
nav .fixed-width #drop-company-menu:before {
content: "";
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.6);
}
nav .fixed-width #drop-company-menu.focus {
display: block;
}
nav .fixed-width #drop-company-menu ul {
margin: 0;
max-height: 200px;
overflow-y: scroll;
padding: 0;
}
nav .fixed-width #drop-company-menu ul li {
padding: 3px 0 3px 45px;
list-style: none;
}
nav .fixed-width #drop-company-menu ul li:hover {
background-color: #395f5f;
}
nav .fixed-width #drop-company-menu ul li a {
text-decoration: none;
color: white;
}
nav .fixed-width #drop-company-menu .bottom-link {
margin-top: 15px;
}
nav .fixed-width #drop-company-menu .bottom-link a {
text-align: center;
background-color: DimGray;
color: white;
text-decoration: none;
width: 100%;
display: block;
padding: 0 0 3px;
}
nav .fixed-width #drop-company-menu .bottom-link a:hover {
background-color: #767676;
}
(function($){
var displayDropMenu = function(dropMenu){
$('#drop-vertical-menu').removeClass('focus');
$('#drop-company-menu').removeClass('focus');
$(dropMenu).addClass('focus');
$(document).click(function (e) {
if (!$(dropMenu).is(e.target) && !$(dropMenu).has(e.target).length) {
$(dropMenu).removeClass('focus');
}
});
$('nav').mouseleave(function(){
$(dropMenu).removeClass('focus');
});
}
$('.menu-left h3').mouseover(function(){
$('h3').removeClass('focus');
$('.menu-right>div').removeClass('focus');
var categoryId = '#'+$(this).text().toLowerCase()+'-menu';
$(this).addClass('focus');
$(categoryId).addClass('focus');
});
$('#vertical-menu').mouseover(function(){
var dropMenu = '#drop-' + $(this).attr('id');
displayDropMenu(dropMenu);
});
$('#company-menu').mouseover(function(){
var leftMargin = $('#vertical-menu').outerWidth() + $('.main-nav .logo').outerWidth();
var dropMenu = '#drop-' + $(this).attr('id');
$(dropMenu).css('margin', '0 0 0 '+leftMargin+'px');
displayDropMenu(dropMenu);
});
})(jQuery);
