재단 드롭 다운 메뉴
재단 드롭 다운 메뉴는 미리 정의의 드롭 다운 목록에서 값을 선택하도록 할 수 있습니다 :
예
href가 = "#" 데이터 -dropdown = "id01" 클래스 = "button dropdown"> 드롭 다운 버튼 </ A>
<! - 드롭 다운 내용 ->
<UL 아이디 = "id01"데이터 -dropdown 콘텐츠 클래스 = "F-드롭 다운">
<리> <a의 HREF = "#"> 링크 1 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 2 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 3 </ A> </ 리>
</ UL>
<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>
»시도
분석의 예
.dropdown 아래쪽 화살표 버튼과 클래스는 심볼 "아이콘을 추가 할 수 있습니다.
버튼을 사용하거나 링크 data-dropdown=" id " 드롭 다운 메뉴를 엽니 다 속성.
id 값은 내용 (id01) 풀다운 메뉴 일치해야합니다.
에서 <사업부>, <NAV>, <ul> 추가 .f-dropdown 클래스 및 data-dropdown-content 콘텐츠 드롭 다운 메뉴를 만드는 속성을.
마지막 초기화 재단 JS.
주 : 작은 화면에서 메뉴의 폭이 모두 100 %이다.
크기 드롭 다운 메뉴
사용 .tiny , .small , .medium , .large 또는 .mega 드롭 다운 메뉴의 폭을 수정할 수 있습니다.
주 : 작은 화면에서 메뉴의 폭이 모두 100 %이다.
예
<UL 아이디 = "id01"데이터 -dropdown 콘텐츠 클래스 = "F-드롭 다운 작은"> ..
<! - 작은 드롭 다운 : 된 Max 폭이 300 픽셀입니다 ->
<UL 아이디 = "id02"데이터 -dropdown 콘텐츠 클래스 = "F-드롭 다운 작은"> ..
<! - 중간의 드롭 다운 : 된 Max 폭이 500 픽셀입니다 ->
<UL 아이디 = "id03"데이터 -dropdown 콘텐츠 클래스 = "F-드롭 다운 매체">
<! - 대형 드롭 다운 : 된 Max 폭이 800 픽셀입니다 ->
<UL 아이디 = "id04"데이터 -dropdown 콘텐츠 클래스 = "F-드롭 다운 큰"> ..
<- 메가 드롭 다운 :! 100 % 폭 ->
<UL ID가 = "id04"데이터 -dropdown 콘텐츠 클래스 = "F-드롭 다운 메가"> ..
»시도
여백 드롭 다운 메뉴
당신은 사용할 수 있습니다 .content 드롭 다운 메뉴에 패딩을 추가하는 클래스를 :
예
<UL 아이디 = "id01"데이터 -dropdown 콘텐츠 클래스 = "F-드롭 다운"> ..
<! - 패딩 드롭 다운 ->
<UL 아이디 = "id02"데이터 -dropdown 콘텐츠 클래스 = "F-드롭 다운 콘텐츠"> ..
»시도
다른 예
<DIV> 드롭 다운 메뉴를 멀티미디어 요소를 추가 :
예
<사업부 ID는 = "id01"데이터 -dropdown 콘텐츠 클래스 = "F-드롭 다운 매체 콘텐츠">
<H4> 파리 제목 </ H4 >
<P> 일부 텍스트 .. 텍스트 .. </ P>
<IMG SRC = "paris.jpg"고도 = "파리"너비 = "400"높이 = "300">
<P> 파리, JE의 t'aime. </ P>
</ DIV>
»시도
풀다운 메뉴의 방향
기본적으로 하단의 드롭 다운 메뉴, 당신은 추가 할 수 있습니다 data-options="align:left|right|top" | 오른쪽 | 최고" 방향을 변경 :
예
href가 = "#" 데이터 -dropdown = "id02" data-options = "align: top" 클래스 = "button dropdown"> 최고 </ A>
href가 = "#" 데이터 -dropdown = "id03" data-options = "align: bottom" 클래스 = "button dropdown"> 하단 </ A>
href가 = "#" 데이터 -dropdown = "id04" data-options = "align: left" 클래스 = "button dropdown"> 왼쪽 </ A>
»시도
풀다운 메뉴는 조건을 트리거
버튼을 클릭에 기본적으로, 드롭 다운 메뉴가 표시됩니다. 마우스 업 디스플레이를 이동해야하는 경우 버튼을 사용할 수있는 data-options="is_hover:true" " 속성 :
예
<UL 아이디 = "id01"데이터 -dropdown 콘텐츠 클래스 = "F-드롭 다운">
<리> <a의 HREF = "#"> 링크 1 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 2 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 3 </ A> </ 리>
</ UL>
»시도
분할 버튼
우리는 버튼을 추가 할 수 있습니다 .split 의 <SPAN>에 아래 방향 아이콘 버튼을 생성하는 분할 효과 버튼을 설정하는 클래스를 세분화 요소 :
예
<스팬 데이터 드롭 = "id01 "> </ SPAN>
</ 버튼>
<UL 아이디 = "id01"데이터 -dropdown 콘텐츠 클래스 = "F-드롭 다운">
<리> <a의 HREF = "#"> 링크 1 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 2 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 3 </ A> </ 리>
</ UL>
<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>
»시도