"Vertical menu with hightlight"
Bootstrap 3.1.0 Snippet by joshuaedwardk

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="col-md-3 column margintop20"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Home</a></li> <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Option 1</a></li> <li><a href="#" class="active2"><span class="glyphicon glyphicon-chevron-right"></span> Option 2 (active)</a></li> <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Option 3</a></li> <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Option 4</a></li> <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Option 5</a></li> </ul> </div> <div class="panel-group" id="accordion"> <div class="panel panel-default panel-danger"> <div class="panel-heading"> <h4 class="panel-title"> <a href="http://nstp.org/member/login_success.php"> <h4><i class="fa fa-users"></i> Member Section </h4> </a> </h4> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-primary"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><b class="caret"></b> Contact Information </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> <table class="table table-hover table-striped"> <tr> <td> <span class="fa fa-key"></span><a href="/Account/ChangePassword"> Password Management</a> </td> </tr> <tr> <td> <span class="fa fa-globe "></span><a href="//nstp.org/forms/contact_wufoo.php"> Contact Information Update</a> </td> </tr> <tr> <td> <span class="fa fa-user "></span><a href="/whyjoin.php"> Membership Renewal</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-primary"> <a href="//nstp.org/Account/Rewards"><span class="fa fa-money"></span> Dividend Rewards</a> </h4> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-primary"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><b class="caret"></b> Newsletters </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <table class="table table-hover table-striped"> <tr> <td> <span class="fa fa-flash "></span><a href="/member/tax_alert.php"> Federal Tax Alert</a> </td> </tr> <tr> <td> <span class="fa fa-file-text-o "></span><a href="/member/client_newsletters.php"> Client Newsletter</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title text-primary"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><b class="caret"></b> Resources </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <table class="table table-hover table-striped"> <tr> <td> <span class="fa fa-bell-o"></span><a href="//nstp.org/member/charitable_resources.php"> Charitable Contributions</a> </td> </tr> <tr> <td> <span class="fa fa-trophy"></span><a href="http://nstp.org/member/award.php"> Awards</a> </td> </tr> <tr> <td> <span class="fa fa-info-circle"></span><a href="//nstp.org/irs_tax_forum.php"> IRS Forums</a> </td> </tr> <tr> <td> <span class="fa fa-bookmark-o"></span><a href="/member/client_contracts.php"> Sample Client Contracts</a> </td> </tr> <tr> <td> <span class="fa fa-flag"></span><a href="http://nstp.org/member/state_resources.php"> State Tax Links</a> </td> </tr> <tr> <td> <span class="fa fa-certificate "></span><a href="http://nstp.org/member/enrolled_agent_exam.php"> Enrolled Agent Information</a> </td> </tr> <tr> <td> <span class="fa fa-rocket "></span><a href="http://nstp.org/member/resources.php"> NSTP Resources</a> </td> </tr> <tr> <td> <span class="fa fa-cloud-download "></span><a href="http://nstp.org/member/media_kit.php"> NSTP Media Kit</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="/member/hotline.php"><span class="fa fa-phone"></span> Tax Hotline</a> </h4> </div> </div> </div>
.panel-title>li.active>a, .panel-title>li.active>a:hover, .panel-title>li.active>a:focus { color: #fff; background-color: #428bca; } .margintop20 { margin-top:20px; } .nav-pills>li>a { border-radius: 0px; } a { color: #000; text-decoration: none; } a:hover { color: #000; text-decoration: none; } .nav-stacked>li+li { margin-top: 0px; margin-left: 0; border-bottom:1px solid #dadada; border-left:1px solid #dadada; border-right:1px solid #dadada; } .active2 { border-right:4px solid #428bca; }

Related: See More


Questions / Comments: