"Vertical menu with hightlight "
Bootstrap 3.1.0 Snippet by abahtin

<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="tc-menu-left column"> <ul class="nav"> <li class="active"><a href="#"> Полиграфия</a></li> <li><a href="/prints/businesscards" id="a-businesscards">Печать визиток</a></li> <li><a href="/prints/leaflets" id="a-leaflets">Печать листовок</a></li> <li><a href="/prints/flyers" id="a-flyers">Печать флаеров</a></li> <li><a href="/prints/postcards" id="a-postcards">Печать открыток и приглашений</a></li> <li><a href="/prints/diplomas" id="a-diplomas">Печать дипломов</a></li> <li><a href="/prints/forms" id="a-forms">Печать бланков</a></li> <!-- <li><a href="#" class="active2"> Option 2 (active)</a></li> --> </ul> <ul class="nav"> <li class="active"><a href="/calendars"> Печать календарей</a></li> <li><a href="/calendars/walls" id="a-walls">Календарь настенный перекидной</a></li> <li><a href="/calendars/desktops" id="a-desktops">Календарь настольный перекидной</a></li> <li><a href="/calendars/quarterlies" id="a-posters">Календарь квартальный</a></li> <li><a href="/calendars/pockets" id="a-pockets">Календарь карманный</a></li> </ul> <ul class="nav"> <li class="active"><a href="#"> Отраслевые решения</a></li> </ul> <ul class="nav"> <li class="active"><a href="https://xn--b1agjtqbo3e.xn--80afocalyedggt6a8le.xn--p1ai/"> Изготовление сувениров</a></li> </ul> <ul class="nav"> <li class="active"><a href="/banner"> Широкоформатная печать</a></li> <li><a href="/banner" id="a-banner">Печать баннеров</a></li> <li><a href="#" id="a-desktops">Печать на пленке</a></li> <li><a href="#" id="a-posters">Интерьерная печать</a></li> <li><a href="#" id="a-pockets">Печать на бумаге</a></li> </ul> <ul class="nav"> <li class="active"><a href="#"> Услуги</a></li> </ul> </div>
.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; } .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: