재단 슬라이딩 탐색 (오프 캔버스)
사이드 바 탐색
오프 캔버스 슬라이드 탐색은 이제 점점 더 인기가 모바일 페이지에서 (메뉴가 왼쪽에서 밖으로 슬라이드에있는 메뉴 버튼을 클릭)
슬라이딩 탐색을 만들려면
예는 다음과 같습니다 슬라이딩 탐색을 만들려면 :
예
<- 바깥 쪽 사업부 :! 페이지 레이아웃 ->
<사업부 클래스 = "오프 캔버스 -wrap"데이터 offcanvas>
<- 내부 요소 :! "도구 모음"컨텐츠 (아이콘, 링크, 설명 등) ->
<사업부 클래스 = "내부 랩 ">
<탐색 클래스 = "탭 바 ">
<제 클래스 = "왼쪽 작은 ">
<A 클래스 = "left-off -canvas-toggle menu-icon" HREF = "#"> <SPAN> </ SPAN> </ A>
</ 섹션>
<제 클래스 = "중간 탭 -의 바 부분">
<H1 클래스 = "제목"> 오프 캔버스 예 </ H1>
</ 섹션>
</ 탐색>
<! - 메뉴를 슬라이딩 ->
<제외하고 클래스 = "왼쪽 오프 -canvas 메뉴">
<! - 링크 나 다른 물건을 추가 여기에 ->
<UL 클래스 = "오프 캔버스 -list 테스트">
<리> <레이블> 제목 < / 라벨> </ 리>
<리> <a의 HREF = "#"> 링크 1 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 2 </ A> </ 리>
...
</ UL>
</ 제외>
<! - 주요 내용 ->
<제 클래스 = "메인 섹션 ">
<H3> 로렘 입숨 </ H3 >
<P> .... </ P>
</ 섹션>
<! - 메뉴를 닫습니다 ->
<A 클래스 = "exit-off -canvas"> </ A>
</ DIV> <! - 내부 콘텐츠를 끝 ->
</ DIV> <! - 엔드 슬라이딩 메뉴 ->
<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>
<사업부 클래스 = "오프 캔버스 -wrap"데이터 offcanvas>
<- 내부 요소 :! "도구 모음"컨텐츠 (아이콘, 링크, 설명 등) ->
<사업부 클래스 = "내부 랩 ">
<탐색 클래스 = "탭 바 ">
<제 클래스 = "왼쪽 작은 ">
<A 클래스 = "left-off -canvas-toggle menu-icon" HREF = "#"> <SPAN> </ SPAN> </ A>
</ 섹션>
<제 클래스 = "중간 탭 -의 바 부분">
<H1 클래스 = "제목"> 오프 캔버스 예 </ H1>
</ 섹션>
</ 탐색>
<! - 메뉴를 슬라이딩 ->
<제외하고 클래스 = "왼쪽 오프 -canvas 메뉴">
<! - 링크 나 다른 물건을 추가 여기에 ->
<UL 클래스 = "오프 캔버스 -list 테스트">
<리> <레이블> 제목 < / 라벨> </ 리>
<리> <a의 HREF = "#"> 링크 1 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 2 </ A> </ 리>
...
</ UL>
</ 제외>
<! - 주요 내용 ->
<제 클래스 = "메인 섹션 ">
<H3> 로렘 입숨 </ H3 >
<P> .... </ P>
</ 섹션>
<! - 메뉴를 닫습니다 ->
<A 클래스 = "exit-off -canvas"> </ A>
</ DIV> <! - 내부 콘텐츠를 끝 ->
</ DIV> <! - 엔드 슬라이딩 메뉴 ->
<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>
»시도