"Меню боковое раскрывающееся (Химзавод№5)"
Bootstrap 3.3.0 Snippet by ASDAFF

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>Меню</title> <link href="styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript" src="js/jquery.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.search-form input').click( function(){ $(this).val($(this).val()=='Поиск по сайту'?'':$(this).val()); } ); $("#firstpane p.menu_head").click(function() { $(this).css({backgroundImage:"url(images/arrow_down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(images/arrow_small.png)"}); }); $("#secondpane p.menu_head").mouseover(function() { $(this).css({backgroundImage:"url(images/arrow_down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(images/arrow_small.png)"}); }); $('#firstpane a').each(function (){ var ch=$(this).attr('href'); //if(window.location.pathname.indexOf(ch)>-1) if(window.location.pathname==ch) { $(this).css('color','#076e43'); $(this).parent().parent().find('.menu_head').click(); } }); }); </script> </head> <body> <div class="left-menu"> <div id="firstpane" class="menu_list"> <!--Code for menu starts here--> <div> <p class="menu_head">Краски</p> <div class="menu_body"> <a href="#">Краски масляные</a> <a href="#">Краски УФ-отверждения</a> <a href="#">Краски метализированные и флюорисцентные</a> <a href="#">Краски защитные и специальные</a> </div> </div> <div> <p class="menu_head">Лаки и грунты</p> <div class="menu_body"> <a href="#">Лаки масляные</a> <a href="#">Лаки и грунты воднодисперсионные</a> <a href="#">Лаки и грунты УФ-отверждения</a> <a href="#">Лаки и грунты на основе органический растворителей</a> </div> </div> <div> <p class="menu_head">Вспомогательная химия</p> <div class="menu_body"> <a href="#">Смывки</a> <a href="#">Растворители</a> <a href="#">Обезжириватели</a> </div> </div> <div><p class="menu_head">Клеи</p> <div class="menu_body"> <a href="#">Водные эмульсии</a> <a href="#">Клеи-расплавы</a> <a href="#">Клеи УФ-отверждения для ламинации и холодного тиснения</a> </div> </div> <div><p class="menu_head">Комплексные решения для полиграфии</p> <div class="menu_body"> <a href="#">Комплексное решение для печати пищевой упаковки</a> <a href="#">Комплексное решение для УФ-флексографской печати</a> </div> </div> <div> <p class="menu_head"><a href="#">Литография-печать по жести</a></p> </div> <div> <p class="menu_head">Защитные промышленные покрытия</p> <div class="menu_body"> <a href="#">Покрытия для ПВХ</a> <a href="#">Покрытия для дерева</a> </div> </div> </div> <!--Code for menu ends here--> </div> </body> </html>
body { background-color: #FFFFFF; margin: 0; padding: 0; font-family: Verdana, Geneva, sans-serif; font-size: 12px; } a:link{ color: #076e43; } a:hover{ text-decoration: none; } a:visited { color: #076e43; } a img { border: none; } .menu_list { width: 257px; margin-left:10px; } .menu_head { padding: 1px 10px; cursor: pointer; position: relative; color: #4b4c4c; margin: 1px; text-transform: uppercase; background-image: url(images/arrow_small.png); background-repeat: no-repeat; background-position: 0px 5px; font-weight: bold; } .menu_head:hover{ color: #076e43; } .menu_body { display:none; } .menu_body a{ display:block; color:#4b4c4c; background-color:#fff; padding-left:30px; text-transform: uppercase; text-decoration:none; } .menu_body a:hover{ color: #076e43; text-decoration:none; } .menu_head a{ color: #4b4c4c; text-decoration:none; } .menu_head a:hover{ color: #076e43; text-decoration:none; }

Related: See More

Light Bootstrap Dashboard Angular

Questions / Comments: