Выпадающее меню на Bootstrap

Давайте сначала посмотрим, что мы имеем (демо). Как видно, у нас просто выпадающее меню, которое сейчас не выпадает. Ни стилей - ничего. А ниже код этого безобразия

<ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
        <ul>
        	<li><a href="#">Dr. Winthrop</a></li>
            <li><a href="#">Dr. Chase</a></li>
            <li><a href="#">Dr. Sanders</a></li>
        </ul>                    
    </li>
    <li class="active"><a href="#">Services</a></li>
    <li><a href="#">Photo Gallery</a></li>
    <li><a href="#">Contact</a></li>  
</ul> 

Давайте видоизменим код и разберем его

<ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li class="dropdown"><a href="#" data-toggle="dropdown">About <span class="caret"></span></a>
        <ul class="dropdown-menu">
        	<li><a href="#">Dr. Winthrop</a></li>
            <li><a href="#">Dr. Chase</a></li>
            <li><a href="#">Dr. Sanders</a></li>
        </ul>                    
    </li>
    <li class="active"><a href="#">Services</a></li>
    <li><a href="#">Photo Gallery</a></li>
    <li><a href="#">Contact</a></li>  
</ul> 
  1. Первым делом обязательно задаем класс .dropdown у нашего тега <li>
  2. Тегу <a> добавим data-toggle="dropdown", это означает, что при клике будет открываться нашем меню
  3. <span class="caret"></span> - это просто стрелочка
  4. И последнее, это добавим класс .dropdown-menu нашему новоме меню.

Вот и все, теперь у нас симпотичное выпадающее меню.

Хочу заметить, что выпадающее меню на Bootstrap открывается при клике, а не при наведении. Это связано с мобильными устройствами, т.к. там открывать меню можно только кликом по нему. 

Смотреть демо скачать урок

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Scroll Up
Adblock detector