Bootstrap Snippet Header with background and side slide menu and tab slider 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 ---------->
        <header>
            <div class="container header inner">
            <nav class="navbar">
              <div class="container">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>                        
                  </button>
                  <a class="navbar-brand" href="#">Company</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                  <ul class="nav navbar-nav navbar-right masthead-nav">
                    <li><a href="#"> E-commerce Logistics</a></li>
                    <li><a href="#"> Contract Logistics</a></li>
                    <li><a href="#"> Courier</a></li>
                    <li><a href="#"> Transport</a></li>
                  </ul>
                </div>
              </div>
            </nav>
            </div>
        </header>
        <div id="mySidenav" class="sidenav">
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>
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
header {
  background: url(https://s29.postimg.org/501kwpx7r/334c68c298e6eb06bab3bf4876bea89c.jpg) repeat; 
  width: 100%;
  height: 500px;
  background-color: #060;
  color: #fff;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
 
}
.header {
  width: 100%;
  height: 100%; 
  min-height: 100%;
  background: rgba(0, 0, 0, 0.7) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAD0lEQVQIW2NkQABjRmQOAAM+AGkQsDBSAAAAAElFTkSuQmCC) repeat;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
  box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.navbar-brand{
    font-size: 24px;
  font-weight: bold;
  color: #fff;
  font-style: italic;
}
.inner {
  padding: 30px;
}
.masthead-nav > li {
  display: inline-block;
}
.masthead-nav > li + li {
  margin-left: 20px;
}
.masthead-nav > li > a {
  padding-right: 0;
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
    /* Side slide menu */
        function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
/* tab slider */
$(document).ready( function() {
    $('#myCarousel').carousel({
      
        interval:   4000
    });
    
    var clickEvent = false;
    $('#myCarousel').on('click', '.nav a', function() {
            clickEvent = true;
            $('.nav li').removeClass('active');
            $(this).parent().addClass('active');        
    }).on('slid.bs.carousel', function(e) {
        if(!clickEvent) {
            var count = $('.nav').children().length -1;
            var current = $('.nav li.active');
            current.removeClass('active').next().addClass('active');
            var id = parseInt(current.data('slide-to'));
            if(count == id) {
                $('.nav li').first().addClass('active');    
            }
        }
        clickEvent = false;
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Header with background and side slide menu and tab slider"
Bootstrap 3.3.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Header with background and side slide menu and tab slider" Bootstrap 3.3.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Header with background and side slide menu and tab slider"
Bootstrap 3.3.0 Snippet by ASDAFF