Фонд раскрывающемся меню
Фонд выпадающее меню позволяет пользователю выбрать значение из раскрывающегося списка предопределены-х:
примеров
<A HREF = "#" данные -dropdown = "id01" класс = "button dropdown"> Выпадающее Кнопка </ а>
<! - Содержание Дропдаун ->
<Ul ID = данные "id01" -dropdown-классовое содержание = "F-выпадающий">
<Li> <a HREF = "#"> Ссылка 1 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 2 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 3 </ а> </ li>
</ UL>
<! - Initialize Foundation JS ->
<Script>
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
Попробуйте »
Примеры аналитических
.dropdown класс как кнопка с стрелкой вниз , чтобы добавить значок символа ".
Используйте кнопки или ссылки data-dropdown=" id " атрибут , чтобы открыть выпадающее меню.
значение ID должно соответствовать содержанию (id01) выпадающее меню.
В <Служители DIV>, <NAV>, <ul> добавить .f-dropdown классы и data-dropdown-content атрибут для создания раскрывающегося меню содержимого.
Последний фонд инициализации JS.
Примечание: На маленьком экране, все ширины в раскрывающемся меню на 100%.
Размер раскрывающемся меню
Используйте .tiny , .small , .medium , .large или .mega изменить ширину в раскрывающемся меню.
Примечание: На маленьком экране, все ширины в раскрывающемся меню на 100%.
примеров
<ID = данные "id01" Ul -dropdown-классовое содержание = "F-выпадающий крошечные"> ..
<! - Малый Дропдаун: max- ширина 300px ->
<ID = данные "id02" Ul -dropdown-классовое содержание = "F-выпадающий маленький"> ..
<! - Medium Дропдаун: max- ширина 500px ->
<Ul ID = данные "id03" -dropdown-контента класс = "F-выпадающий среда">
<! - Большой Дропдаун: max- ширина 800px ->
<ID = данные "id04" Ul -dropdown-классовое содержание = "F-выпадающий большой"> ..
<- Мега DropDown :! 100% ширина ->
<Ul ID = данные "id04" -dropdown-классовое содержание = "F-выпадающий мега"> ..
Попробуйте »
Поля раскрывающемся меню
Вы можете использовать .content класс , чтобы добавить отступы в раскрывающемся меню:
примеров
<UL ID = "id01" данные -dropdown-контента класс = "F-выпадающие"> ..
<! - Раскрывающийся с дополнением ->
<UL ID = "id02" данные -dropdown-контента класс = "F-выпадающий содержание"> ..
Попробуйте »
Другие примеры
<Div> в раскрывающемся меню, чтобы добавить мультимедийные элементы:
примеров
<Div ID = данные "id01" -dropdown-контента класса = "F-выпадающий среднее содержание">
<H4> Париж Название </ h4 >
<P> Какой - то текст .. некоторый текст .. </ p>
<Img SRC = "paris.jpg" Alt = "Париж" ширина = "400" высота = "300">
<P> Париж, я люблю тебя. </ P>
</ Div>
Попробуйте »
Направление выпадающего меню
По умолчанию, в раскрывающемся меню в нижней части , вы можете добавить data-options="align:left|right|top" | правый | верх" , чтобы изменить свое направление:
примеров
<A HREF = "#" данные -dropdown = "id02" data-options = "align: top" класс = "button dropdown"> Top </ а>
<A HREF = "#" данные -dropdown = "id03" data-options = "align: bottom" класс = "button dropdown"> Снизу </ а>
<A HREF = "#" данные -dropdown = "id04" data-options = "align: left" класс = "button dropdown"> левый </ а>
Попробуйте »
Выпадающие меню запуска условия
По умолчанию в раскрывающемся меню отображается на кнопка нажата. Если вам нужно переместить мышь вверх дисплей, вы можете использовать кнопки data-options="is_hover:true" " атрибут:
примеров
<Ul ID = данные "id01" -dropdown-классовое содержание = "F-выпадающий">
<Li> <a HREF = "#"> Ссылка 1 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 2 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 3 </ а> </ li>
</ UL>
Попробуйте »
кнопка Split
Мы можем добавить кнопку .split класс , чтобы установить кнопку Раскол эффект будет генерировать вниз значок кнопки направление на <SPAN> элемент сегментации:
примеров
<SPAN данных выпадающий = "id01 "> </ SPAN>
</ Button>
<Ul ID = данные "id01" -dropdown-классовое содержание = "F-выпадающий">
<Li> <a HREF = "#"> Ссылка 1 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 2 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 3 </ а> </ li>
</ UL>
<! - Initialize Foundation JS ->
<Script>
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
Попробуйте »