Last active
December 2, 2015 20:02
-
-
Save robinwo/9584212 to your computer and use it in GitHub Desktop.
Bootstrap Panels Nav
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .nav-sidebar { | |
| margin-right: -21px; /* 20px padding + 1px border */ | |
| margin-bottom: 20px; | |
| margin-left: -20px; | |
| } | |
| .nav-sidebar > li > a { | |
| padding-right: 20px; | |
| padding-left: 20px; | |
| } | |
| .nav-sidebar > .active > a { | |
| color: #fff; | |
| background-color: #428bca; | |
| } | |
| .navbar-sidebar li { | |
| padding:0; | |
| border-bottom:1px solid #ddd; | |
| } | |
| .navbar-sidebar li h4 { | |
| margin:0; | |
| } | |
| .navbar-sidebar li a { | |
| display:inline-block; | |
| padding:10px 15px; | |
| color:#333; | |
| text-decoration:none; | |
| width:100%; | |
| } | |
| .navbar-sidebar li a:hover { | |
| background:#eee; | |
| } | |
| /* Panels */ | |
| .panel { | |
| border-radius:0; | |
| border:0; | |
| box-shadow:0; | |
| } | |
| .panel-group .panel+.panel { | |
| margin-top:0; | |
| } | |
| .panel-group .panel { | |
| border-bottom:1px solid #ddd; | |
| box-shadow:none; | |
| } | |
| .panel-title .toggle-icon { | |
| display:inline-block; | |
| -webkit-transition: 0.1s; /* For Safari 3.1 to 6.0 */ | |
| transition: 0.1s; | |
| } | |
| .panel-title .toggle-icon.in { | |
| transform:rotate(90deg); | |
| -ms-transform:rotate(90deg); /* IE 9 */ | |
| -webkit-transform:rotate(90deg); | |
| } | |
| .panel-heading { | |
| padding:0; | |
| border-radius:0; | |
| } | |
| .panel-title a { | |
| display:inline-block; | |
| width:100%; | |
| padding:10px 15px; | |
| font-size:18px; | |
| text-decoration:none; | |
| } | |
| .panel-title a:hover { | |
| background:#eee; | |
| } | |
| .panel-body { | |
| padding:0; | |
| } | |
| .panel-body ul li { | |
| border-radius:0; | |
| border-left:0; | |
| border-right:0; | |
| cursor:pointer; | |
| } | |
| .panel-body ul li:hover { | |
| background:#f9f9f9; | |
| color:#000; | |
| } | |
| .panel-body ul li:first-child { | |
| border-top:0; | |
| } | |
| .panel-body ul li:last-child { | |
| border-bottom:0; | |
| } | |
| .panel-body .list-group { | |
| margin:0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <ul class="nav navbar-sidebar"> | |
| <li><h4><a href="#"><span class="toggle-icon">»</span> Hello World</a></h4></li> | |
| </ul> | |
| <div class="panel-group" id="accordion"> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" href="#togglepanel1"><span class="toggle-icon in">»</span> Toggle Panel 1</a> | |
| </h4> | |
| </div> | |
| <div id="togglepanel1" class="panel-collapse collapse in"> | |
| <div class="panel-body"> | |
| <ul class="list-group"> | |
| <li class="list-group-item">List item 1</li> | |
| <li class="list-group-item">List item 2</li> | |
| <li class="list-group-item">List item 3</li> | |
| <li class="list-group-item">List item..</li> | |
| <li class="list-group-item">List item..</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" href="#togglepanel2"><span class="toggle-icon">»</span> Toggle Panel 2</a> | |
| </h4> | |
| </div> | |
| <div id="togglepanel2" class="panel-collapse collapse in"> | |
| <div class="panel-body"> | |
| <ul class="list-group"> | |
| <li class="list-group-item">List item 1</li> | |
| <li class="list-group-item">List item 2</li> | |
| <li class="list-group-item">List item 3</li> | |
| <li class="list-group-item">List item..</li> | |
| <li class="list-group-item">List item..</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| $('.sidebar .panel-collapse').on('hide.bs.collapse', function () { | |
| $(this).parent().find('.toggle-icon').removeClass('in'); | |
| }); | |
| $('.sidebar .panel-collapse').on('show.bs.collapse', function () { | |
| $(this).parent().find('.toggle-icon').addClass('in'); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment