"Bootstrap Left Menu"
Bootstrap 3.2.0 Snippet by betdream

Post to Facebook Tweet this

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
<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 -->
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
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}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template
Bootstrap Images to Left and Right with Text and Heading
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu

Questions / Comments: