Всем привет. Подскажите пожалуйста.
Я еще только в начале своего творческого пути. Хотел бы узнать, как сделать левый сайдбар как на тостере например?
Что-то делаю не правильно...
Вот код что у меня есть.
<div class="row">
<!--Услуги -->
<div class="col-md-2" id="left-sidebar">
<h3>Специализация</h3>
<ul class="tt-menu">
<li class="level-item">
<a href="#">Аэросъемка</a>
<ul style="display: none;">
<li class=""><a href="#">Проф.съемка</a></li>
<li class="level-item">
<a href="#">Репортажная съемка</a></li>
<li class=""><a href="#">Презентационная</a>
</li>
</ul>
</li>
<li class="level-item">
<a href="#">Инспектирование</a>
<ul style="display: none;">
<li class=""><a href="#">Высотных зданий</a></li>
<li class="level-item">
<a href="#">Линейных объектов</a></li>
<li class=""><a href="#">Площадных объектов</a>
</li>
</ul>
</li>
<li class="level-item">
<a href="#">Мониторинг</a>
<ul style="display: none;">
<li class=""><a href="#">Охрана природы</a></li>
<li class="level-item">
<a href="#">Строительства, водных сетей</a></li>
<li class=""><a href="#">Протяженных объектов</a>
</li>
</ul>
</li>
<li class="level-item">
</li><li class="level-item active"><a href="#">Безопасность</a>
<ul style="display: block; opacity: 0;">
<li class="level-item">
</li><li><a href="#">Охрана территорий/режимных объектов</a></li>
<li><a href="#">Визуальное наблюдение<br>лесных угодий,заповедников</a></li>
</ul>
</li>
<li class="level-item">
</li><li class="level-item"><a href="#">Тепловизионное обеспечение</a>
<ul style="display: none;">
<li class="level-item">
</li><li><a href="#">Промышленных объектов, высотных сооружений<br>ЛЭП, кровля и фасады</a></li>
</ul>
</li>
<li class="level-item">
</li><li class="level-item"><a href="#">Промышленные решения</a>
<ul style="display: none;">
<li class="level-item">
</li><li><a href="#">Аэрофотосъемка территорий и объектов</a></li>
<li><a href="#">Сельскохозяйственное инфраструктурирование</a></li>
<li><a href="#">Кадастровое межевание</a></li>
<li><a href="#">Ортофотопланы, 3D-моделирование</a></li>
</ul>
</li>
<li class="level-item">
</li><li class="level-item"><a href="#">Содействие</a>
<ul style="display: none;">
<li class="level-item">
</li><li><a href="#">Полиция,МЧС,ГИБДД, спец.службы</a>
</li>
</ul>
</li>
<li class="level-item">
</li><li class=""><a href="#">Сотрудничество</a>
</li>
<li class="level-item">
</li><li class=""><a href="#">Авиационные работы с оборудованием заказчика</a>
</li>
<li class="level-item">
</li><li class="level-item"><a href="#">Территориальные работы</a>
<ul style="display: none;">
<li class="level-item">
</li><li><a href="#">Выезд к заказчику по всей России</a></li>
<li><a href="#">Выезд к заказчику за территорию России</a></li>
</ul>
</li>
<li class="level-item">
</li><li class="level-item"><a href="#">Ваше оборудование. КИП в воздухе</a>
<ul style="display: none;">
<li class="level-item">
</li><li><a href="#">Радиационный контроль</a></li>
<li><a href="#">Авиационные Ультрафиолетовые Камеры</a></li>
</ul>
</li>
</ul></div>
<div class="col-md-10">
<h3 class="sev">Элементы для услуг</h3>
</div>
<!--Конец Услуги -->
<div class="row">
<div class="col-md-12" id="reccomend">
<h3 class="recomend">Нам доверяют</h3>
</div>
</div>
<div class="row">
<div class="col-md-12" id="otziv">
<h3 class="sev2">Отзывы</h3>
</div>
</div>
Вот такая кака...
Помогите пожалуйста сделать правильно :-)
А в этом меню при наведении выпадают списки. Кстати почему-то неадаптивно получается( пользуюсь js скриптом, чтобы выпадало меню и css.
Если кто подскажет по первому или второму вопросу, буду признателен.
Простой
Простой
