"nav"
Bootstrap 3.0.0 Snippet by okrish

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
*, *: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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2 Angular

Questions / Comments: