Bootstrap Snippet Navbar w/ hover activated tabs 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 ---------->
<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="http://static.wixstatic.com/media/3a6d42_34f11c8b4b094c61837864622010b438.png_srz_1525_901_85_22_0.50_1.20_0.00_png_srz"height="65"alt="Company Name"> </a> </nav>
  </div>
  <div class="container"> <span class="row pull-right charterTitle"> Sample Application Title </span> </div>
</header>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 col-lg-10" id="bodyText" style="padding: 0px 0px 0px 0px"> 
 
            <div clas="navbar navbar-inverse">
        <div class="container-fluid bg-teal">
          <ul class="nav nav-pills nav-justified col-md-12 col-lg-12">
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;
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
    $("#submit").click(function(){
        var email = 'test@yourdomain.com';
    var subject = 'Sample Subject';
    var emailBody = $("#emailMessage").val();
    window.location = 'mailto:' + email + '?subject=' + subject + '&body=' +   emailBody;
    location.reload();
    });
    
 $(document).ready(function(){
     $('body').keydown(function(e){
    if (e.which==27){
            $("#homefullspan").collapse('hide');
    $("#bodyText").show('fade');
        $("#mostpop").show('fade');
    }
});
     
     $(".nav-link").hover(function(e){
         //Check the div id
         
         
         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         
        {$("#bodyText").hide();$("#mostpop").hide('fade'); $("#homefullspan").collapse('show'); $(this).tab('show');}
});
     
$(".navbar-inverse").hover(function(){
            $("#homefullspan").collapse('hide');
    $("#bodyText").show('fade');
        $("#mostpop").show('fade');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Navbar w/ hover activated tabs"
Bootstrap 3.3.0 Snippet by thesmashcoder

Related: See More

Questions / Comments:

"Navbar w/ hover activated tabs" Bootstrap 3.3.0 Snippet by thesmashcoder

Related: See More

Questions / Comments:

"Navbar w/ hover activated tabs"
Bootstrap 3.3.0 Snippet by thesmashcoder