Css выпадающие (раскрывающиеся) списки

Адаптация выпадающего html меню под мобильные устройства

Для того чтобы данное меню стало адаптироваться под мобильные устройства нам нужно:

1. 1.Добавить дополнительный блок с кнопкой, которая будет вызывать выпадающее меню на мобильных устройствах. Для этого перед кодом вывода меню вставляем код:

   PHP

   <div class=»mobile-menu-button»> Меню </div>

   1	<div class=»mobile-menu-button»>Меню<div>

2. 2.Далее нам нужно убедиться что к сайту подключена библиотека jQuery.

   Более подробно о её подключении вы можете узнать в этой статье «Как подключить jQuery к сайту»

3. 3.Добавить небольшой скрипт, который отвечает за вызов выпадающего меню при нажатии на соответствующую кнопку на маленьких экранах. Данный скрипт вставляем перед закрытием тега </body>

   PHP

   <script>
   jQuery(document).ready(function($) {
   $(‘.mobile-menu-button’).click(function(e) {
   var $message = $(‘.new-mobile-menu’);
   if ($message.css(‘left’) != ‘0px’) {
   $message.css(‘left’,’0px’);
   var firstClick = true;
   $(document).bind(‘click.myEvent’, function(e) {
   if (!firstClick && $(e.target).closest(‘.new-mobile-menu’).length == 0) {
   $message.css(‘left’,’-1000px’);
   $(document).unbind(‘click.myEvent’);
   }
   firstClick = false;
   });
   }
   e.preventDefault();
   });
   });
   </script>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   <script> jQuery(document).ready(function($){ $(‘.mobile-menu-button’).click(function(e){ var$message=$(‘.new-mobile-menu’); if($message.css(‘left’)!=’0px’){ $message.css(‘left’,’0px’); varfirstClick=true; $(document).bind(‘click.myEvent’,function(e){ if(!firstClick&&$(e.target).closest(‘.new-mobile-menu’).length==){ $message.css(‘left’,’-1000px’); $(document).unbind(‘click.myEvent’); } firstClick=false; }); } e.preventDefault(); }); }); </script>

Вот, собственно говоря, и всё! Теперь осталось всё сохранить, проверить работоспособность и при необходимости внести свои правки в html и css код.
На первый взгляд кода много, но он не сложный и вы без труда сможете скорректировать его под свой сайт.

Надеюсь, что помогла вам с сознанием адаптивного выпадающего меню в html! Если статья была для вас полезной, то нажмите на кнопку одной из социальных сетей ниже чтобы поделиться ссылкой на неё. Так вы поможете мне в развитии моего проекта.

Так же заходите на мой канал YouTube, уверена, что вы найдёте там что то интересное для себя!

Успехов вам и вашим проектам! До скорых встреч в других моих статьях и видео!

С уважением Юлия Гусарь

Вертикальное выпадающее меню

Но наше замечательное меню выглядит плохо на маленьких экранах мобильных устройств. Добавим масштабирование в мобильных браузерах с помощью мета тега viewport.

<meta name="viewport" content="width=device-width, initial-scale=1">

Конечно, даже тепрь меню выглядит ужасно, хотя и помещается на экране. Нужно использовать медиа запрос для установки соответствующих стилей, чтобы выводить наш список вертикально после того, как размер экрана достигнет точки разрыва. Точка разрыва определяется значением ширины экрана, когда меню начинает выстраиваться в две строки, для нашего примера — 800px.

В точке разрыва удалим обтекание и установим для пунктов и списка свойство . Теперь, при наведении курсора на пункт меню, его выпадающий список выводится поверх остального содержания. Нам нужно, чтобы другие пункты родительского уровня смещались. Вместо изменения для неупорядоченного списка положения , установим для свойства значение .

@media screen and (max-width: 800px) {
    .nav > li {
        float: none;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
}

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности

Создадим-ка горизонтальную навигационную модель

Такой вид навигации наиболее популярен. При горизонтальном оформлении панели все пункты меню расположены в шапке страницы или в «подвале» (иногда навигационные элементы дублируются, отображаясь одновременно и сверху, и снизу).

В качестве примера мы создадим горизонтальную панель, пункты меню которого будут оформлены при помощи css (каскадных таблиц стилей), а точнее трансформированы. Так, каждый отдельный элемент будет находится в скошенном прямоугольнике. Заинтриговал?

К сожалению, каждый браузер работает с данным свойством по-своему, не смотря на прописанные стандарты. Поэтому для обозначения того или иного браузера были созданы специальные префиксы:

• -ms- (Internet Explorer)
• -o- (Opera)
• -webkit- (Chrome, Safari)
• -moz- (Firefox)

А теперь полученные знания применим к написанию примера.

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
38
39
40

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Горизонтальная панель</title>
  <style>
   li {
    display: inline-block; 
    margin-right: 6px;
    background: #FF8C00;  
    transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    -o-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg); 
    -moz-transform: skewX(-45deg);
   }
   a {
    display: block; 
    padding: 18px 35px;
    color: #fff;  
    transform: skewX(40deg);
    -webkit-transform: skewX(40deg); 
    -o-transform: skewX(40deg);
    -ms-transform: skewX(40deg); 
    -moz-transform: skewX(40deg); 
   }
   li:hover {
    background: #1C1C1C; 
   }
  </style>
 </head>
 <body>
  <menu>
    <li>Главная</li>
    <li>О компании</li>
    <li><a href="3.html">Продукция</a></li>
    <li><a href="4.html">Контакты</a></li>
  </menu>
 </body>
</html>

Пляски с бубном для Internet Explorer 6

Конечно же, IE 6 ломает стройность решения. В старых версиях IE псевдо-класс hover работает только для элементов ссылок. Поэтому придется использовать очень простую заплатку для этого корявого браузера. Воспользуемся условным комментарием IE для присоединения небольшого кода JavaScript, который будет приводить в порядок работу приложения. Хорошая новость — современные браузеры просто не увидят данный код JavaScript, который будет работать только для IE. Ниже приведенную строку надо разместить в конце страницы HTML:

<!--><script type="text/javascript" src="iehoverfix.js"></script><!-->

И собственно код JavaScript, который размещается в файле iehoverfix.js. Мы просто добавляем класс ‘hover’ элементам li в меню, когда курсор мыши проходит над ними. Класс CSS используется так же, как и псевдо-класс hover (смотри комментарии к коду CSS).

function addhover() {
	var navli,i;
	// Цикл по всем элементам навигации
	navli = document.getElementById('centeredmenu').getElementsByTagName('li')
	for(i=0;i<navli.length;i++) {
		// Добавляем обработчики событий onmouseover и onmouseout 
		navli.onmouseover=function(){hover(this,'hover');};
		navli.onmouseout=function(){hover(this,'');};
	}
}
function hover(o,sClass) {
	if (o) {
		o.className = sClass;
	}
}
addhover();

Конвертируем hover в click

Так как на сенсорных экранах событие hover недоступно (пока), создадим код для проверки ширины окна и установки событий и .

$(document).ready(function() {
    var ww = document.body.clientWidth;
    if (ww < 800) {
        $(".toggleMenu").css("display", "inline-block");
        $(".nav li a").click(function() {
            $(this).parent("li").toggleClass('hover');
        });
    } else {
        $(".toggleMenu").css("display", "none");
        $(".nav li").hover(function() {
            $(this).addClass('hover');
        }, function() {
            $(this).removeClass('hover');
        });
    }
});

Для событий нужно изменить целевой элемент с пункта списка на родительский пункт, так как нажатие на родительском пункте открывает вложенный список. Проблема заключается в том, что нажатие на ссылке приводит к перезагрузке страницы, но мы не можем предотвратить поведение по умолчанию для всех ссылок, так как вложенные пункты также содержат ссылки.

Для решения добавим короткий код jQuery, чтобы установить класс для любого пункта, у наследников которого есть сестринские элементы, и затем будем использовать только такие ссылки.

$(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })
    if (ww < 800) {
        $(".toggleMenu").css("display", "inline-block");
        $(".nav li a.parent").click(function(e) {
            e.preventDefault();
            $(this).parent("li").toggleClass('hover');
        });
    } else {
... }

CSS

#nav {
    border:3px solid #3e4547;

    box-shadow:2px 2px 8px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:200px;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;

    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
    background-color:#d4d5d8;
    color:#000;
    display:block;
    font-size:12px;
    font-weight:bold;
    line-height:28px;
    outline:0;
    padding-left:15px;
    text-decoration:none;
}
#nav li a.sub {
    background:#d4d5d8 url("../images/down.gif") no-repeat;
}
#nav li a + img {
    cursor:pointer;
    display:none;
    height:28px;
    left:0;
    position:absolute;
    top:0;
    width:200px;
}
#nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
}
#nav li a:hover {
    background-color:#bcbdc1;
}
#nav ul li a {
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:11px;
    line-height:22px;
}
#nav ul li a:hover {
    background-color:#ddd;
    color:#444;
}
#nav ul li a img {
    background: url("../images/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}
#nav ul li:nth-child(odd) a img {
    background:url("../images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
    background:#bcbdc1;
    outline:0;
}
#nav a:focus ~ ul li {
    margin-top:0;

    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
    display:block;
}
#nav a.sub:active {
    background:#bcbdc1;
    outline:0;
}
#nav a:active ~ ul li {
    margin-top:0;
}
#nav ul:hover {
    display:block;
}

Пример 4

Создаем список с другим типом. Ничего особенного, но отличается от предыдущих демо.

Разметка

<div id="dd" class="wrapper-dropdown-4">To do
    <ul class="dropdown">
        <li><input type="checkbox" id="el-1" name="el-1" value="donut"><label for="el-1">Eat a donut</label></li>
        <li><input type="checkbox" id="el-2" name="el-2" value="neighbour"><label for="el-2">Spy on my neighbours</label></li>
        <li><input type="checkbox" id="el-3" name="el-3" value="T-rex"><label for="el-3">Feed my T-Rex</label></li>
    </ul>
</div>

Теперь без ссылок и иконок. У наст просто есть checkbox. 

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Используя полученные знания составьте следующую форму размещения вакансии:

Практическое задание № 23.

Прежде чем преступить к выполнению задания откройте пример в новом окне и внимательно рассмотрите форму, чтобы повторить все её моменты. Для выполнения задания Вам потребуются знания из статьи «HTML формы». Если вы пропустили её, то вернитесь для её изучения.

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

Элементы формы,
добавленные в HTML5

HTML тег кнопка

Что это такое

Читайте также

Проверка вводимых значений для подкатегории в зависимом выпадающем списке

Как видите, весь трюк зависимого списка состоит в использовании функции СМЕЩ. Ну хорошо, почти весь. Помогают ей функции ПОИСКПОЗ и СЧЕТЕСЛИ. Функция СМЕЩ позволяет динамически определять диапазоны. Вначале мы определяем ячейку, от которой должен начинаться сдвиг диапазона, а в последующих аргументах определяем его размеры.

В нашем примере диапазон будет перемещаться по столбцу Подкатегория в рабочей таблице (G2:H15). Перемещение начнем от ячейки H2, которая также является первым аргументом нашей функции. В формуле ячейку H2 записали как абсолютную ссылку, потому что предполагаю, что мы будем использовать раскрывающийся список во многих ячейках.

Поскольку рабочая таблица отсортирована по Категории, то диапазон, который должен быть источником для раскрывающегося списка, будет начинаться там, где впервые встречается выбранная категория. Например, для категории Питание мы хотим отобразить диапазон H6:H11, для Транспорта — диапазон H12: H15 и т. д

Обратите внимание, что все время мы перемещаемся по столбцу H, а единственное, что изменяется, это начало диапазона и его высота (то есть количество элементов в списке)

Начало диапазона будет перемещено относительно ячейки H2 на такое количество ячеек вниз (по числу), сколько составляет номер позиции первой встречающейся категории в столбце Категория. Проще будет понять на примере: диапазон для категории Питание перемещен на 4 ячейки вниз относительно ячейки H2 (начинается с 4 ячейки от H2). В 4-ой ячейке столбца Подкатегория (не включая заголовок, так как речь идет о диапазоне с именем Рабочий_Список), есть слово Питание (его первое появление). Мы используем этот факт собственно для определения начала диапазона. Послужит нам для этого функция ПОИСКПОЗ (введенная в качестве второго аргумента функции СМЕЩ):

Высоту диапазона определяет функция СЧЕТЕСЛИ. Она считает все встречающиеся повторения в категории, то есть слово Питание. Сколько раз встречается это слово, сколько и будет позиций в нашем диапазоне. Количество позиций в диапазоне — это его высота. Вот функция:

Конечно же, обе функции уже включены в функцию СМЕЩ, которая описана выше

Кроме того, обратите внимание, что как в функции ПОИСКПОЗ, так и в СЧЕТЕСЛИ, есть ссылка на диапазон названный Рабочий_Список. Как я уже упоминал ранее, не обязательно использовать имена диапазонов, можно просто ввести $H3: $H15

Однако использование имен диапазонов в формуле делает ее проще и легко читаемой.

Вот и все:

Скачать пример зависимого выпадающего списка в Excel

Одна формула, ну не такая уж и простая, но облегчающая работу и защищает от ошибок при вводе данных!

Два варианта использования этого трюка я уже представил. Интересно, как вы его будете использовать?

Выпадающий список в Excel это, пожалуй, один из самых удобных способов работы с данными. Использовать их вы можете как при заполнении форм, так и создавая дашборды и объемные таблицы. Выпадающие списки часто используют в приложениях на смартфонах, веб-сайтах. Они интуитивно понятны рядовому пользователю.

Кликните по кнопке ниже для загрузки файла с примерами выпадающих списков в Excel:

Как сделать раскрывающийся список html

Для создания в html выпадающего списка существует тег <select>, который совместно с тегом <option>, позволяет создавать элементы интерфейса, содержащие перечень параметров в виде выпадающего списка с возможностью единичного или множественного выбора.

Перечень атрибутов для тега <select>:

autofocus – установка фокуса на элементе при загрузки страницыdisabled – отключение элементаmultiple – множественный выбор элементов раскрывающегося списка htmlrequired – делает обязательным для заполненияsize – определяет высоту в закрытом состоянии. Задается числовым значением.form – подключение к форме обратной связиname – имя, для получения выбранного значения и передачи его в скрипт для обработки

Для последних трёх значение указывается в кавычках, все остальные просто дописываются к тегу <select>

Атрибуты для тега <option>:

disabled – позволят заблокировать пункт для выбораlabel — дает возможность задать метку для элементаselected – устанавливает пункт выбранным по умолчаниюvalue – позволяет задать значение для пункта, которое будет передано в форму для отправки или в скрипта для обработки.

Ниже я приведу несколько примеров использования атрибутов для тегов <select> и <option>

Пример самого простого раскрывающегося списка html:

Код:

PHP

<select>
<option>Опция 1</option>
<option>Опция 2</option>
</select>

Размер выпадающего элемента, то есть, количество отображаемых элементов зависит от заданного параметра size. В случае, если он не задан, то в раскрывающемся списке html отображается по умолчанию 1 элемент.

Ширина элемента по умолчанию определяется исходя из ширины самой длинной записи. Так же ее можно изменять CSS-стилями.

HTML

Code

<div id=»m_body»>   <ul>   <li><a href=»//yraaa.ru/» onclick=»menuOpen(‘s_mn_1’);return(false)»>Пункт №1</a>   <ul id=»s_mn_1″>   <li><a href=»//yraaa.ru/»>Подпункт меню №1</a></li>   <li><a href=»//yraaa.ru/»>Подпункт меню №2</a></li>   </ul>   </li>   <li><a href=»//yraaa.ru/» onclick=»menuOpen(‘s_mn_2’);return(false)»>Пункт №2</a>   <ul id=»s_mn_2″>   <li><a href=»//yraaa.ru/»>Подпункт меню №1</a></li>   <li><a href=»//yraaa.ru/»>Подпункт меню №2</a></li>   </ul>   </li>   <li><a href=»//yraaa.ru/» onclick=»menuOpen(‘s_mn_3’);return(false)»>Пункт №3</a>   <ul id=»s_mn_3″>   <li><a href=»//yraaa.ru/»>Подпункт меню №1</a></li>   <li><a href=»//yraaa.ru/»>Подпункт меню №2</a></li>   <li><a href=»//yraaa.ru/»>Подпункт меню №3</a></li>   </ul>   </li>   </ul> </div>

Раскрытие пунктов вертикального выпадающего меню (выпадение по-другому) осуществляется при клике на пункт, т.е. используется событие onclick. В случае же если хотите осуществить раскрытие при наведении, используйте mouseover.

Как задать выбранный пункт по умолчанию

В случае если вам нужно задать в html выпадающем списке опцию, которая будет отображаться по умолчанию, используем атрибут selected. Например:

PHP

<select name=»country»>
<option disabled>Выберите страну</option>
<option selected>Россия</option>
<option >Белоруссия</option>
</select>

Обратите внимание. Если первый пункт раскрывающегося списка html задать с атрибутом disabled, то его можно использовать как подсказку или placeholder

JavaScript

Code

<script type=»text/javascript»> var m_id = new Array(‘s_mn_1′,’s_mn_2′,’s_mn_3’); listStart = function allclose() {   for (i=0; i < m_id.length; i++){   document.getElementById(m_id).style.display = «none»;   } } function menuOpen(id){   for (i=0; i < m_id.length; i++){   if (id != m_id){   document.getElementById(m_id).style.display = «none»;   }   }   if (document.getElementById(id).style.display == «block»){   document.getElementById(id).style.display = «none»;   }else{   document.getElementById(id).style.display = «block»;   } } window.onload=listStart; </script>

В строке

Code

var m_id = new Array(‘s_mn_1′,’s_mn_2′,’s_mn_3’);

указывайте ровно столько подпунктов, сколько хотите использовать. Если, например, Вы хотите использовать 6 подпунктов, указывайте их все:

Code

var m_id = new Array(‘s_mn_1′,’s_mn_2′,’s_mn_3’, ‘s_mn_4′,’s_mn_5′,’s_mn_6’);

Добавление выпадающего меню WordPress на сайт

После того как мы закончили настройку выпадающего меню WordPress, нам нужно его как-то добавить на сайт. В случае, если мы используем данное меню в качестве главного, то здесь все просто, ничего менять или добавлять не нужно, все настройки применяются по умолчанию.

Для добавления выпадающего меню WordPress в область виджетов нам нужно:

1. 1.Переходим в раздел «Внешний вид» => «Виджеты»

2. 2.Выбираем виджет «Max Mega Menu» и добавляем его в сайдбар. Это можно сделать или путем перетаскивания виджета в нужную область, или выбрав виджет и кликнув на кнопку «Добавить виджет».

3. 3.А дальше нам нужно стилями привести наше меню к нужному виду, так как по умолчанию оно отображается как горизонтальное.

Если же вам нужно сделать дублирующее выпадающее меню WordPress в футере сайта, то для этого нужно:

1.Переходим на вкладку «Локации меню» в настройках плагина и копируем php-функцию:

2.Далее, при помощи текстового редактора Notepad++ подключаемся к нашему сайту по FTP и открываем файл footer.php, который находится в корне темы оформления вашего сайта.

3.Далее, в соответствующем месте шаблона с новой строки вставляем скопированную функцию:

Обратите внимание! Так как вёрстка у разных шаблонов разная, то определить блок в который нужно вставить код меню вам нужно будет самостоятельно.
В этом вам может помочь следующая статья:«Изменение темы WordPress. Определение Class и ID»

4.После чего сохраняем файл и выгружаем его на хостинг, нажив на дискетку или сочетанием клавиш CTRL+S.. Вот что у нас получилось:

Вот что у нас получилось:

Теперь у нас главное меню сайта продублировано в футере. Осталось его немного подправить css-стилями.

Как я уже говорила, плагин Max Mega Menu дает огромные возможности, и с его помощью вы можете создать для WordPress выпадающее меню любой сложности, хоть горизонтально, хоть вертикальное, и вставить его в любом месте на своем сайте. Но, к сожалению, у этого плагина есть и недостатки, основным из которых является необходимость дописывать стили для нормального вывода в виджетах.

До встречи в следующих статьях!

С уважением Юлия Гусарь

Как перенести контакты c помощью Bluetooth

Вертикальное выпадающее меню вправо

Представляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.

Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.

Html для вертикального меню

Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:

Меню для сайта на списках: у некоторых пунктов есть выпадающие блоки, у некоторых нет. Все предельно просто, думаю никаких пояснений не нужно.

Вертикальное выпадающее меню CSS

Со стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.

Вот эта строчка CSS

Посмотреть что у нас получилось в этом примере можно на скине:

Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:

Скачать пример

Вот такой не сложный пример выпадающего меню у меня получился.

Это еще не конец, идем дальше.

Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.

Примеры

Переключение обернуть выпадающем (ваша кнопка или ссылка) и в выпадающем меню в , или другой элемент, который заявляет, . Раскрывающиеся списки могут быть вызваны из или элементы, чтобы лучше соответствовать вашим потенциальным потребностям.

Одиночная кнопка выпадающего меню

Ни один можно превратить в выпадающем тумблер с некоторыми изменениями разметки. Вот как вы можете положить их на работу с элементы:

Dropdown button

И с элементами:

Dropdown link

Самое приятное, что вы можете сделать это с любым вариантом кнопки:

Default

Primary

Success

Info

Warning

Danger

Split кнопка с выпадающим меню

Аналогичным образом создайте сплит кнопки раскрывающиеся списки с практически такой же разметки, как одной кнопки раскрывающиеся списки, но с добавлением для правильного шрифта выпадающего каре.

Мы используем эту экстра-класса, чтобы уменьшить горизонтальную по обе стороны от каретки на 25% и удалите , который добавляется для обычной кнопки выпадающих меню. Эти изменения держать курсор по центру кнопку разделить и обеспечить более точного размера нажмите рядом с основной кнопкой.

Default

Toggle Dropdown

Primary

Toggle Dropdown

Success

Toggle Dropdown

Info

Toggle Dropdown

Warning

Toggle Dropdown

Danger

Toggle Dropdown

JAVASCRIPT

Для выполнения работы нам нужно использовать JavaScript. Так как это основной JS  для всех следующих демо, давайте рассмотрим его сейчас. 

//...

obj.dd.on('click', function(event){
    $(this).toggleClass('active');
    return false;
});

//...

$(function() {

    var dd = new DropDown( $('#dd') );

    $(document).click(function() {
        // all dropdowns
        $('.wrapper-dropdown-1').removeClass('active');
    });
});

Что же именно делает этот скрипт? Во-первых, он переключает класс .active, при нажатии на элементе. Это означает, если оболочка не имеет этот  класс, он добавляет его и потом, если активным является другое меня — соответственно удаляет его. Во -вторых, он позволяет закрывать список при нажатии на любом другом месте на экране.

Теперь мы понимаем, как это работает, и  пришло время для создания некоторых раскрывающихся списков!

Вывод и скрытие

Проблему с исчезновением легко поправить: нужно добавить в условие «больше, чем точка излома». Такое решение работает, но у него есть один недостаток. Так как код выполняется каждый раз при изменении размеров окна браузера, то в таком случае открытое меню будет закрываться. На некоторых мобильных устройствах событие resize генерируется при прокрутке страницы по вертикали, что приводит к плохой реакции нашего меню.

Для решения нужно проверять состояние меню. Воспользуемся дополнительным классом для кнопки «меню», что также можно использовать для дополнительного визуального представления. Кнопка будет не только включать/выключать меню, но добавлять/убирать класс . В условии «уже, ч ем точка излома», добавим код, который будет скрывать меню, если кнопка имеет класс .

$(document).ready(function() {
    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
});
    if (ww < 800) {
        $(".toggleMenu").css("display", "inline-block");
        if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li a.parent").click(function(e) {
            e.preventDefault();
            $(this).parent("li").toggleClass('hover');
        });
    } ...