Bootstrap Snippet Colour Changing Bootstrap Menu 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
<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 ---------->
<div class="container">
    <div class="row">
            <div class="col-xs-12 col-lg-9">
        <div id="panelBox" class="panel panelBox panelFilter">
                <div class="panel-heading">
                        <ul class="nav panelbox nav-tabs">
                            <li class="active"><a href="#tabFilters" data-toggle="tab">Filters</a></li>
                            <li><a href="#tabResults" data-toggle="tab">Results</a></li>
                            <li><a href="#tabMetrics" data-toggle="tab">Metrics</a></li>                           
                        </ul>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="tabFilters">
                            <h1>Filter Tab</h1>
                        </div>
                        <div class="tab-pane fade" id="tabResults">
                            <h1>Results Tab</h1>
                        </div>
                        <div class="tab-pane fade" id="tabMetrics">
                            <h1>Metrics Tab</h1>
                        </div>
                    </div>
                </div>
          </div>    
    </div>
    </div>
</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
   .panelbox.nav-tabs  {
       border-color:transparent;
   }
   .panelbox.nav-tabs>.active>a 
    ,.panelbox.nav-tabs>.active:hover>a 
    ,.panelbox.nav-tabs a 
    ,.panelbox.nav-tabs a:hover{
       background-color:transparent!important;
       border-color:transparent!important;
       border-radius:0px!important;
       color:white!important;
       font-size:18px;
   }         
    .panelFilter {
        border-color: #3D9970;
        -webkit-transition: border-color 4s ease-out;
        -moz-transition: border-color 4s ease-out;
        -o-transition: border-color 4s ease-out;
        transition: border-color 4s ease-out;
    }
    .panelFilter > .panel-heading {
        color: #ffffff;
        background-color: #3D9970;
        border-color: #3D9970;
        -webkit-transition: background-color 4s ease-out;
        -moz-transition: background-color 4s ease-out;
        -o-transition: background-color 4s ease-out;
        transition: background-color 4s ease-out;
    }
        .panelResults {
        border-color: #FF4136;
        -webkit-transition: border-color 4s ease-out;
        -moz-transition: border-color 4s ease-out;
        -o-transition: border-color 4s ease-out;
        transition: border-color 4s ease-out;
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function() {
      $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            var target = $(e.target).attr("href")
            if (target == "#tabFilters")
            {
                $('#panelBox').removeClass();
                $('#panelBox').addClass('panel panelBox panelFilter');
            }
            if (target == "#tabResults") {
                $('#panelBox').removeClass();
                $('#panelBox').addClass('panel panelBox panelResults');
            }
            if (target == "#tabMetrics") {
                $('#panelBox').removeClass();
                $('#panelBox').addClass('panel panelBox panelMetrics');
            }
        });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Colour Changing Bootstrap Menu"
Bootstrap 3.0.0 Snippet by davidklk

Related: See More

Questions / Comments:

"Colour Changing Bootstrap Menu" Bootstrap 3.0.0 Snippet by davidklk

Related: See More

Questions / Comments:

"Colour Changing Bootstrap Menu"
Bootstrap 3.0.0 Snippet by davidklk