Bootstrap Snippet Left Navigation using HTML CSS Bootstrap jQuery

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!DOCTYPE html>
<html>
  <head>
<meta charset="UTF-8">
<title>Talent Aquisition Portal</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-Frame-Options"  content="DENY" />
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<!--
<meta http-equiv="X-UA-Compatible" content="IE=10" />
-->
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/styles.css" rel="stylesheet"/>
</head>
<body>
<header class="bg-deepblue" id="headerArea" role="navigation">
  <div class="container-fluid">
    <nav class="navbar-header"> <a class="navbar-brand"> <img src="assets/charter_white_logo.png"alt="Charter Communications"> </a> </nav>
  </div>
  <div class="container"> <span class="row pull-right charterTitle"> Acquisition Business Rules & Recruiting Services Playbook </span> </div>
</header>
<div class="container-fluid">
    <div class="row">
                        <div class="col-lg-3">
                            <div class="row">
                                                                            <div clas="col-lg-10">
                                                    <nav clas="navbar navbar-inverse">
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
/* CSS Document */
p{color:#005F9B;
}
p,small{color:#005F9B;
}
.groupHeader {color:black;
}
a {
    color: #FFFFFF;
    text-decoration: none;
}
/* Navbar Header */
.navbar-inverse{  background-color: #003057;
}
.bg-deepblue {
  background-color: #003057;
}
.bg-teal {
  background-color: #009E8C;
}
.bg-lightgrey{background-color: #D3D3D3;
}
.bg-info {
  background-color: #0077BB;
}
.navbar {
    margin-bottom: 0px;
    border:none;
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
    $("#submit").click(function(){
        var email = 'krista.davis@charter.com';
    var subject = 'Talent Acquisition Portal Recommendations';
    var emailBody = $("#emailMessage").val();
    window.location = 'mailto:' + email + '?subject=' + subject + '&body=' +   emailBody;
location.reload();
});
    $(".nav-link").click(function(){
         //Check the div id
        $('.tab-content').slideDown();
        $("#home").slideUp();
    
});
    
 $(document).ready(function(){
     
     $(".nav-link").hover(function(e){
         if(this.id=="1"){e.preventDefault();}
              else if(this.id=="2"){e.preventDefault();}
              else if(this.id=="3"){e.preventDefault();}
              else if(this.id=="4"){e.preventDefault();}
              else if(this.id=="5"){e.preventDefault();}
        else         
        {
        $("#home").slideUp();
         $(this).tab('show');}
});
      $('body').keydown(function(e){
    if (e.which==27){location.reload();}
});
    
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Left Navigation"
Bootstrap 3.3.0 Snippet by thesmashcoder

Related: See More

Questions / Comments:

"Left Navigation" Bootstrap 3.3.0 Snippet by thesmashcoder

Related: See More

Questions / Comments:

"Left Navigation"
Bootstrap 3.3.0 Snippet by thesmashcoder