"Sidebar menu"
Bootstrap 3.3.0 Snippet by botyk

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
<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 ---------->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="list-group">
<div class="list-group"><a href="#SoftPc" class="list-group-item" data-toggle="collapse" aria-expanded="false" aria-controls="collapseExample"><i class="fa fa-folder-o"></i> Программы для PC <div style="margin-top:-2px;" class="pull-right"><i class="fa fa-sort-desc"></i></div></a>
<div class="collapse" id="SoftPc">
<div class="woll">
<div class="list-group ssilka">
<a href="/soft/cd-dvd" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> CD/DVD диски</a>
<a href="/soft/audio-video" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Аудио/Видео</a>
<a href="/soft/security" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Безопасность</a>
<a href="/soft/internet" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Интернет</a>
<a href="/soft/system" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Система</a>
<a href="/soft/office" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Офис</a>
</div>
</div>
</div>
<a href="#SoftMobile" class="list-group-item" data-toggle="collapse" aria-expanded="false" aria-controls="collapseExample"><i class="fa fa-folder-o"></i> Приложения для Mobile <div style="margin-top:-2px;" class="pull-right"><i class="fa fa-sort-desc"></i></div></a>
<div class="collapse" id="SoftMobile">
<div class="woll">
<div class="list-group ssilka">
<a href="/mobile/smartfon" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Для smartfon</a>
<a href="/mobile/android" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Для android</a>
<a href="/mobile/ipod" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Для ipod</a>
<a href="/mobile/java" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Для java</a>
</div>
</div>
</div>
<a href="#WebDevelopment" class="list-group-item" data-toggle="collapse" aria-expanded="false" aria-controls="collapseExample"><i class="fa fa-folder-o"></i> Веб-разработка <div style="margin-top:-2px;" class="pull-right"><i class="fa fa-sort-desc"></i></div></a>
<div class="collapse" id="WebDevelopment">
<div class="woll">
<div class="list-group ssilka">
<a href="/web-development/joomla" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Joomla</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.woll {
margin-bottom: -21px;
}
.ssilka a{
color:#0080C0;
}
.ssilka a:hover{
color:#0080C0;
}
.list-group-item:last-child {
border-radius: 0;
}
.list-group-item:first-child{
border-radius: 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: