<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="nav-side-menu pf-menu-sb">
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li data-toggle="collapse" data-target="#products" class="collapsed">
<a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="products">
<li><a href="#">CSS3 Animation</a></li>
<li><a href="#">General</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Tabs & Accordions</a></li>
<li><a href="#">Typography</a></li>
<li><a href="#">FontAwesome</a></li>
<li><a href="#">Slider</a></li>
<li><a href="#">Panels</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Bootstrap Model</a></li>
</ul>
<li data-toggle="collapse" data-target="#products2" class="collapsed">
<a style="" class="link" href="#"><img src="http://magosha.ru/img/menu/menu_comicses.jpg">КОМИКСЫ</a>
<span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="products2">
<li><a href="#">CSS3 Animation</a></li>
<li><a href="#">General</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Tabs & Accordions</a></li>
<li><a href="#">Typography</a></li>
<li><a href="#">FontAwesome</a></li>
<li><a href="#">Slider</a></li>
<li><a href="#">Panels</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Bootstrap Model</a></li>
</ul>
<li data-toggle="collapse" data-target="#products3" class="collapsed">
<a style="" class="link" href="#"><img src="http://magosha.ru/img/menu/menu_common.jpg">Места</a>
<span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="products3">
<li><a href="#">CSS3 Animation</a></li>
<li><a href="#">General</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Tabs & Accordions</a></li>
<li><a href="#">Typography</a></li>
<li><a href="#">FontAwesome</a></li>
<li><a href="#">Slider</a></li>
<li><a href="#">Panels</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Bootstrap Model</a></li>
</ul>
</ul>
</div>
</div>
@font-face {
font-family: ObelixProBroken;
src: local(ObelixProBroken), url(http://magosha.ru/fonts/obelixprobroken.ttf);
}
/************************************************************************************/
.nav-side-menu {
overflow: auto;
font-family: ObelixProBroken, verdana;
font-size: 14px;
font-weight: 200;
background-color: white;
top: 0px;
width: 100%;
max-width: 300px;
height: 100%;
color: gray;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: white;
border: none;
line-height: 28px;
border-bottom: 1px solid rgba(128, 128, 128, 0.17);;
margin-left: 0px;
font-family: verdana;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: rgba(79, 91, 105, 0.1);
border-left: 3px solid #ff9547;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid rgba(128, 128, 128, 0.17);;
}
.nav-side-menu li a {
text-decoration: none;
color: gray;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: rgba(79, 91, 105, 0.1);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
@media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
}
@media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
.pf-menu-sb img {
padding-right: 5px;
vertical-align: bottom;
height: 35px;
width: 45px;
}
