"Sidebar menu"
Bootstrap 3.3.0 Snippet by rafael12

<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> <a href="/web-development/wordpress" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Wordpress</a> <a href="/web-development/dle" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> DataLife Engine</a> <a href="/web-development/torrentpier" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> TorrentPier</a> <a href="/web-development/other_cms" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Другие CMS</a> </div> </div> </div> <a href="#ArchiveBooks" 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="ArchiveBooks"> <div class="woll"> <div class="list-group ssilka"> <a href="/books/books_akida" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Акида (книга)</a> <a href="/books/books_manhaj" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Манхадж (книга)</a> <a href="/books/books_fiqh" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Фикх (книга)</a> <a href="/books/books_hadith" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Хадисы (книга)</a> <a href="/books/books_koran" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Коран (книга)</a> <a href="/books/books_arabic" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Арабский язык (книга)</a> <a href="/books/books_beginner" 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="#ArchiveAudio" 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="ArchiveAudio"> <div class="woll"> <div class="list-group ssilka"> <a href="/audio/audio_koran" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Коран (аудио)</a> <a href="/audio/audio_akida" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Акида (аудио)</a> <a href="/audio/audio_manhaj" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Манхадж (аудио)</a> <a href="/audio/audio_fiqh" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Фикх (аудио)</a> <a href="/audio/audio_hadith" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Хадисы (аудио)</a> <a href="/audio/audio_arabic" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Арабский язык (аудио)</a> <a href="/audio/audio_beginner" 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="#ArchiveVideo" 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="ArchiveVideo"> <div class="woll"> <div class="list-group ssilka"> <a href="/video/islamic_video" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Исламский видео</a> <a href="/video/other_videos" 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="#paid_section" 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="paid_section"> <div class="woll" style="margin-bottom:15px;"> <div class="list-group ssilka"> <a href="/paid_section/site_development" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Создание сайта</a> <a href="/paid_section/pc_repair" class="list-group-item"><i class="fa fa-long-arrow-right"></i> <i class="fa fa-folder-open-o"></i> Ремонт Пк (онлайн)</a> </div> </div> </div> </div>
.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; }

Related: See More


Questions / Comments: