"Vertical menu with hightlight"
Bootstrap 3.1.0 Snippet by alsidig

<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 ----------> <table> <tr> <div class="col-md-3 column margintop20"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a width="30" href="#"><span class="glyphicon glyphicon-chevron-right"></span>Prise en charge</a></li> <li class="wdth"><a href="#" class="active2"><span class="glyphicon glyphicon-chevron-right"></span>Ajouter</a></li> <li><a href="#" ><span class="glyphicon glyphicon-chevron-right"></span>Consulter</a></li> <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span>Editer</a></li> </ul> </div> </tr> <tr> <div class="col-md-3 column margintop20"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a width="30" href="#"><span class="glyphicon glyphicon-chevron-right"></span>Prise en charge</a></li> <li class="wdth"><a href="#" class="active2"><span class="glyphicon glyphicon-chevron-right"></span>Ajouter</a></li> <li><a href="#" ><span class="glyphicon glyphicon-chevron-right"></span>Consulter</a></li> <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span>Editer</a></li> </ul> </div> </tr> <tr> <div class="col-md-3 column margintop20"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a width="30" href="#"><span class="glyphicon glyphicon-chevron-right"></span>Prise en charge</a></li> <li class="wdth"><a href="#" class="active2"><span class="glyphicon glyphicon-chevron-right"></span>Ajouter</a></li> <li><a href="#" ><span class="glyphicon glyphicon-chevron-right"></span>Consulter</a></li> <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span>Editer</a></li> </ul> </div> </tr> </table>
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { color: #fff; background-color: #428bca; } .margintop20 { margin-top:20px; } li{ width:150px; } .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:4px solid #428bca; color:red; }

Related: See More


Questions / Comments: