<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container"> <div class="row"> <h1>Categori/subCategory Menu</h1> <p>Forked from "<a href="http://bootsnipp.com/snippets/featured/status-bar" target="_blank">Status bar</a>". Thanks <a href="http://bootsnipp.com/nexxoz" target="_blank">@nexxoz</a>!</p> <!-- Code start --> <div class="msk-catDiv"> <a class="msk-catBar msk-catDefault" href="#"> <div class="msk-catSplit"><i class="glyphicon glyphicon-globe"></i></div> <div class="msk-catText">First category</div> </a> </div> <div class="msk-catDiv"> <div class="msk-catSubBar"> <a class="msk-catBar msk-catInfo" href="#"> <div class="msk-catSplit"><i class="glyphicon glyphicon-folder-open"></i></div> <div class="msk-catText">Second category has subcategory</div> </a> </div> <div class="msk-catSub"> <a class="msk-catBar msk-catInfo" href="#"> <div class="msk-catText">First subcategory</div> </a> </div> </div> <div class="msk-catDiv"> <div class="msk-catSubBar"> <a class="msk-catBar msk-catSuccess" href="#"> <div class="msk-catSplit"><i class="glyphicon glyphicon-leaf"></i></div> <div class="msk-catText">Third category has subcategories</div> </a> </div> <div> <a class="msk-catBar msk-catSuccess" href="#"> <div class="msk-catText">First subcategory</div> </a> </div> <div> <a class="msk-catBar msk-catSuccess" href="#"> <div class="msk-catText">Second subcategory</div> </a> </div> </div> <div class="msk-catDiv"> <a class="msk-catBar msk-catDanger" href="#"> <div class="msk-catSplit"><i class="glyphicon glyphicon-envelope"></i></div> <div class="msk-catText">Fourth category</div> </a> </div> <!-- Code end --> <br> <p>You can use this colors:</p> <div class="msk-catSplit" style="background: #d9534f none repeat scroll 0 0;"></div> <div class="msk-catSplit" style="background: #e54e7e none repeat scroll 0 0;"></div> <div class="msk-catSplit" style="background: #61c436 none repeat scroll 0 0;"></div> <div class="msk-catSplit" style="background: #f4b23f none repeat scroll 0 0;"></div> <div class="msk-catSplit" style="background: #d96459 none repeat scroll 0 0;"></div> <div class="msk-catSplit" style="background: #074c85 none repeat scroll 0 0;"></div> <div class="msk-catSplit" style="background: #3b97d3 none repeat scroll 0 0;"></div> <div class="msk-catSplit" style="background: #c91b25 none repeat scroll 0 0;"></div> <div class="msk-catSplit" style="background: #f2671f none repeat scroll 0 0;"></div> <div class="msk-catSplit" style="background: #3b97d3 none repeat scroll 0 0;"></div> <div class="msk-catSplit" style="background: #46c49c none repeat scroll 0 0;"></div> <div class="msk-catSplit" style="background: #60047a none repeat scroll 0 0;"></div> <div class="msk-catSplit" style="background: #cc181e none repeat scroll 0 0;"></div> <br><br> </div> </div> </div>

body{ margin-top:10px; background: #e0e0e0; } /* Just use the lower part */ .msk-catDiv { margin-bottom: 5px; } .msk-catBar { display: inline-block; font-size: 14px; text-align: left; height: 40px; } a.msk-catBar:hover { text-decoration: none; } .msk-catText { background-color: #fff; border-bottom: 2px solid #fff; margin-left: 40px; padding: 10px 15px 8px; } .msk-catBar, .msk-catSubBar { margin-bottom: 2px; } .msk-catSplit { color: #fff !important; float: left; height: 40px; text-align: center; width: 40px; } .msk-catSplit > .glyphicon{ position:relative; top: calc(50% - 9px)!important; /* 50% - 3/4 of icon height */ } .msk-catBar.msk-catDefault > .msk-catSplit { background: #337ab7 none repeat scroll 0 0; } .msk-catBar.msk-catDefault > .msk-catText:hover { border-bottom: 2px solid #337ab7; } .msk-catInfo > .msk-catSplit { background: #5bc0de none repeat scroll 0 0; } .msk-catInfo > .msk-catText:hover { border-bottom: 2px solid #5bc0de; } .msk-catBar.msk-catSuccess > .msk-catSplit { background: #5cb85c none repeat scroll 0 0; } .msk-catBar.msk-catSuccess > .msk-catText:hover { border-bottom: 2px solid #5cb85c; } .msk-catBar.msk-catDanger > .msk-catSplit { background: #d9534f none repeat scroll 0 0; } .msk-catBar.msk-catDanger > .msk-catText:hover { border-bottom: 2px solid #d9534f; }