Bootstrap Snippet Nav-tabs dropdown2 using HTML CSS Bootstrap Javascript

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 ---------->
<div class="container">
    <h2>Nav-tabs Dropdown <small>Vertical</small></h2>
    <p class="lead">Dropdown appears at width less than or equal to 768px</p>
    <div class="row">
        <div class="col-sm-3">
            <a href="#" class="nav-tabs-dropdown btn btn-block btn-primary">Tabs</a>
            <ul id="nav-tabs-wrapper" class="nav nav-tabs nav-pills nav-stacked well">
              <li class="active"><a href="#vtab1" data-toggle="tab">Tab 1</a></li>
              <li><a href="#vtab2" data-toggle="tab">Tab 2</a></li>
              <li><a href="#vtab3" data-toggle="tab">Tab 3</a></li>
            </ul>
        </div>
        <div class="col-sm-9">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="vtab1">
<div class="col-sm-12 div-shadow">
          
            <a href="#" class="nav-tabs-dropdown btn btn-block btn-primary">Tabs</a>
            <ul id="nav-tabs-wrapper" class="nav nav-tabs nav-tabs-horizontal">
              <li class="active"><a href="#htab1" data-toggle="tab">Tab 1</a></li>
              <li><a href="#htab2" data-toggle="tab">Tab 2</a></li>
              <li><a href="#htab3" data-toggle="tab">Tab 3</a></li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="htab1">
                    <h3>Tab 1</h3>
                    <p>Add the class <code>.nav-tabs-horizontal</code> to the tabs list for the dropdown to work with horizontal tabs.
                    <pre>
                        <code class="language-html" data-lang="html">
                           <p><span><</span>a <span style="color: #4f9fcf">href=</span><span style="color: #d44950;">"#"</span> <span style="color: #4f9fcf">class=</span><span style="color: #d44950;">"nav-tabs-dropdown btn btn-block btn-primary"</span><span>></span>Tabs<span><span><</span>/<span>a></span></span><br /><span><span><</span>ul</span> <span style="color: #4f9fcf">id=</span><span style="color: #d44950;">"nav-tabs-wrapper"</span> <span style="color: #4f9fcf">class=</span><span style="color: #d44950;">"nav nav-tabs nav-tabs-horizontal"</span><span>></span></p>
                        </code>  
                    </pre>
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
.div-shadow {
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
        padding: 10px;
}
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: white;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
    color: black;
    background-color: white;
}
/* add bold font style and border bottom to active li elements */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid #e9a39c;
    font-weight: bold;
}
/* remove the "grey" border when hovering the li elements */
.nav-tabs>li>a:hover{
    border: 1px solid transparent;
}
/* remove the "grey" background colour when hovering the li elements */
.nav>li>a:focus, .nav>li>a:hover{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('.nav-tabs-dropdown').each(function(i, elm) {
    
    $(elm).text($(elm).next('ul').find('li.active a').text());
    
});
  
$('.nav-tabs-dropdown').on('click', function(e) {
    e.preventDefault();
    
    $(e.target).toggleClass('open').next('ul').slideToggle();
    
});
$('#nav-tabs-wrapper a[data-toggle="tab"]').on('click', function(e) {
    e.preventDefault();
    
    $(e.target).closest('ul').hide().prev('a').removeClass('open').text($(this).text());
      
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Nav-tabs dropdown2"
Bootstrap 3.3.0 Snippet by adrnzhrf

Related: See More

Questions / Comments:

"Nav-tabs dropdown2" Bootstrap 3.3.0 Snippet by adrnzhrf

Related: See More

Questions / Comments:

"Nav-tabs dropdown2"
Bootstrap 3.3.0 Snippet by adrnzhrf