"Bootstrap Left Menu"
Bootstrap 3.2.0 Snippet by betdream

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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-12"> <div class="col-md-3 center-menu"> <ul> <li><a href=""><i class="glyphicon glyphicon-chevron-right"></i> MENU TITLE </a></li> <li><a href=""><i class="glyphicon glyphicon-chevron-right"></i> MENU TITLE </a></li> <li><a href=""><i class="glyphicon glyphicon-chevron-right"></i> MENU TITLE </a></li> <li><a href=""><i class="glyphicon glyphicon-chevron-right"></i> MENU TITLE </a></li> <li><a href=""><i class="glyphicon glyphicon-chevron-right"></i> MENU TITLE </a></li> <li><a href=""><i class="glyphicon glyphicon-chevron-right"></i> MENU TITLE </a></li> <li><a href=""><i class="glyphicon glyphicon-chevron-right"></i> MENU TITLE </a></li> <li><a href=""><i class="glyphicon glyphicon-chevron-right"></i> MENU TITLE </a></li> <li><a href=""><i class="glyphicon glyphicon-chevron-right"></i> MENU TITLE </a></li> <li><a href=""><i class="glyphicon glyphicon-chevron-right"></i> MENU TITLE </a></li> </ul> </div></div> <!-- @betdream -->
body{background:#444} .center-menu{margin:30px auto; float:none;} .center-menu ul{width:100%; padding-left:0;} .center-menu ul li{width:100%; min-height:30px; margin-bottom:2px; background:#f4f4f4; list-style:none; padding:10px; font-family:"open sans", serif ; font-size:12px;} .center-menu ul li i{font-size:10px; color:#ccc; padding-right:5px;} .center-menu ul li a{color:#4f4f4f; display:block; text-decoration:none; width:100%;} .center-menu ul li:nth-child(1){border-right: 5px solid #8d54a3} .center-menu ul li:nth-child(2){border-right: 5px solid #6CC437} .center-menu ul li:nth-child(3){border-right: 5px solid #f28c1d} .center-menu ul li:nth-child(4){border-right: 5px solid #e94979} .center-menu ul li:nth-child(5){border-right: 5px solid #00B0F0} .center-menu ul li:nth-child(6){border-right: 5px solid #cc3333} .center-menu ul li:nth-child(7){border-right: 5px solid #FABE09} .center-menu ul li:nth-child(8){border-right: 5px solid #e94979} .center-menu ul li:nth-child(9){border-right: 5px solid #8d54a3} .center-menu ul li:nth-child(10){border-right: 5px solid #6CC437} .center-menu ul li:nth-child(11){border-right: 5px solid #f28c1d} .center-menu ul li:nth-child(12){border-right: 5px solid #e94979} .center-menu ul li:nth-child(13){border-right: 5px solid #00B0F0} .center-menu ul li:nth-child(14){border-right: 5px solid #F46652} .center-menu ul li:nth-child(15){border-right: 5px solid #FABE09} .center-menu ul li:nth-child(16){border-right: 5px solid #6CC437} .center-menu ul li:nth-child(17){border-right: 5px solid #f28c1d} .center-menu ul li:nth-child(18){border-right: 5px solid #e94979} .center-menu ul li:nth-child(19){border-right: 5px solid #00B0F0} .center-menu ul li:nth-child(20){border-right: 5px solid #F46652} .center-menu ul li:nth-child(21){border-right: 5px solid #FABE09} .center-menu ul li:hover a{color:#fff; text-decoration:none;} .center-menu ul li:nth-child(1):hover{background-color:#8d54a3} .center-menu ul li:nth-child(2):hover{background-color:#6CC437} .center-menu ul li:nth-child(3):hover{background-color:#f28c1d} .center-menu ul li:nth-child(4):hover{background-color:#e94979} .center-menu ul li:nth-child(5):hover{background-color:#00B0F0} .center-menu ul li:nth-child(6):hover{background-color:#cc3333} .center-menu ul li:nth-child(7):hover{background-color:#FABE09} .center-menu ul li:nth-child(8):hover{background-color:#e94979} .center-menu ul li:nth-child(9):hover{background-color:#8d54a3} .center-menu ul li:nth-child(10):hover{background-color:#6CC437} .center-menu ul li:nth-child(11):hover{background-color:#f28c1d} .center-menu ul li:nth-child(12):hover{background-color:#e94979} .center-menu ul li:nth-child(13):hover{background-color:#00B0F0} .center-menu ul li:nth-child(14):hover{background-color:#F46652} .center-menu ul li:nth-child(15):hover{background-color:#FABE09} .center-menu ul li:nth-child(16):hover{background-color:#6CC437} .center-menu ul li:nth-child(17):hover{background-color:#f28c1d} .center-menu ul li:nth-child(18):hover{background-color:#e94979} .center-menu ul li:nth-child(19):hover{background-color:#00B0F0} .center-menu ul li:nth-child(20):hover{background-color:#F46652} .center-menu ul li:nth-child(21):hover{background-color:#FABE09}

Related: See More


Questions / Comments: