Выпадающее меню Foundation
Выпадающие меню Foundation позволяют пользователям выбирать значение из предопределённого выпадающего списка:
Пример
<a href="#" data-dropdown="id01" class="button dropdown">Кнопка выпадающего меню</a>
<!-- Содержимое выпадающего меню -->
<ul id="id01" data-dropdown-content class="f-dropdown">
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
</ul>
<!-- Инициализировать Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Попробуйте сами »
Анализ примера
.dropdownЭтот класс добавляет к кнопке значок стрелки вниз.
Использование кнопки или ссылкиdata-dropdown="id"атрибут для открытия выпадающего меню.
idЗначение должно совпадать с содержимым выпадающего меню (id01).
В <div>, <nav>,<ul>Добавить в.f-dropdownкласс иdata-dropdown-contentатрибут для создания содержимого выпадающего меню.
Наконец, инициализируйте Foundation JS.
Примечание:На маленьких экранах все выпадающие меню имеют ширину 100%.
Размер выпадающего меню
Использование.tiny, .small, .medium, .largeили.megaчтобы изменить ширину выпадающего меню.
Примечание:На маленьких экранах все выпадающие меню имеют ширину 100%.
Пример
<ul id="id01" data-dropdown-content class="f-dropdown tiny">..
<!-- Маленькое выпадающее меню: max-width составляет 300px -->
<ul id="id02" data-dropdown-content class="f-dropdown small">..
<!-- Среднее выпадающее меню: max-width составляет 500px -->
<ul id="id03" data-dropdown-content class="f-dropdown medium">
<!-- Большое выпадающее меню: max-width составляет 800px -->
<ul id="id04" data-dropdown-content class="f-dropdown large">..
<!-- Мега-выпадающее меню: ширина 100% -->
<ul id="id04" data-dropdown-content class="f-dropdown mega">..
Попробуйте сами »
Внешний отступ выпадающего меню
Вы можете использовать.contentкласс для добавления внутреннего отступа к выпадающему меню:
Пример
<ul id="id01" data-dropdown-content class="f-dropdown">..
<!-- Выпадающее меню с внутренним отступом -->
<ul id="id02" data-dropdown-content class="f-dropdown content">..
Попробуйте сами »
Больше примеров
Добавьте мультимедийные элементы в выпадающее меню <div>:
Пример
<div id="id01" data-dropdown-content class="f-dropdown medium content">
<h4>Заголовок Парижа</h4>
<p>Какой-то текст.. какой-то текст..</p>
<img src="paris.jpg" alt="Париж" width="400" height="300">
<p>Париж, я тебя люблю.</p>
</div>
Попробуйте сами »
Направление выпадающего меню
По умолчанию выпадающее меню появляется внизу; вы можете изменить это, добавивdata-options="align:left|right|top"чтобы изменить его направление:
Пример
<a href="#" data-dropdown="id02" data-options="align:top" class="button dropdown">Вверх</a>
<a href="#" data-dropdown="id03" data-options="align:bottom" class="button dropdown">Вниз</a>
<a href="#" data-dropdown="id04" data-options="align:left" class="button dropdown">Влево</a>
Попробуйте сами »
Условия срабатывания выпадающего меню
По умолчанию раскрывающееся меню отображается после нажатия кнопки. Если нужно, чтобы оно отображалось при наведении, можно применить его к кнопке.data-options="is_hover:true"Свойство:
Пример
<ul id="id01" data-dropdown-content class="f-dropdown">
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
</ul>
Попробуйте сами »
Кнопка разделения
Мы можем добавить к кнопке.splitИспользуйте класс, чтобы создать разделённую кнопку; после разделения на элементе <span> создаётся кнопка со значком, указывающим вниз.
Пример
<span data-dropdown="id01"></span>
</button>
<ul id="id01" data-dropdown-content class="f-dropdown">
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
</ul>
<!-- Инициализировать Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Попробуйте сами »