Latest web development tutorials

재단 마젤란 (마젤란) 탐색

마젤란 네비게이션을 만드는 방법

마젤란 탐색은 다음과 같이 탐색 인덱스가 생성된다 :

예

<사업부의 데이터 마젤란-탐험 = "고정">
<DL 클래스 = "하위 탐색 ">
<DD의 데이터 마젤란 도착 = "PAGE1"> <a의 HREF = "# page1"> 페이지 1 </ A> </ DD>
<DD의 데이터 마젤란 도착 = "페이지 2"> <a의 HREF = "# page2"> 페이지 2 </ A> </ DD>
</ DL>
</ DIV>

<H3 데이터 마젤란-대상 = "PAGE1"> 페이지 1 </ H3>
<A 이름 = "page1"> </ A>
...

<H3 데이터 마젤란-대상 = "페이지 2"> 페이지 2 </ H3>
<A 이름 = "page2"> </ A>
...

<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>

»시도

분석의 예

의 <DIV> 요소에 추가 data-magellan-expedition="fixed" " 마젤란 탐색을 만들 수있는 속성입니다.

그런 다음 <dd> 또는 <li> 추가 data-magellan-arrival=" value " " 속성 및 속성 값 (PAGE1)로 다시 링크를 추가 할 수 있습니다.

사용 data-magellan-destination="value" " 에 의해 다음에 마젤란 탐색 대상, 제어하는 속성을 <a> 추가 요소 name=" value " 속성을. 속성의 두 값이 있어야 data-magellan-arrival 일관된 값 (PAGE1).

마지막으로, 페이지를 스크롤하는 것은 자동으로 콘텐츠에 따라 스위치 반면 초기화 재단 JS, 사용자는 현재 표시된 네비게이션.

마젤란 탐색 도구 모음 헤드

예를 사용하여 마젤란 탐색 도구 모음 헤드 :

예

<사업부의 데이터 마젤란-탐험 = "고정">
<운항 클래스 = "상단 바 "데이터 topbar>
...

<제 클래스 = "상단 바 -section">
<UL 클래스 = "왼쪽">
<리 데이터 마젤란 도착 = "PAGE1"> <a의 HREF = "# page1"> 페이지 1 </ A> </ 리>
<리 데이터 마젤란 도착 = "페이지 2"> <a의 HREF = "# page2"> 페이지 2 </ A> </ 리>
</ UL>
</ 섹션>

</ 탐색>
</ DIV>

<H3 데이터 마젤란-대상 = "PAGE1"> 페이지 1 </ H3>
<A 이름 = "page1"> </ A>
...

<H3 데이터 마젤란-대상 = "페이지 2"> 페이지 2 </ H3>
<A 이름 = "page2"> </ A>
...

»시도

마젤란 탐색 패딩

기본적으로 마젤란 탐색 <div> 요소는 10px의 패딩을 보유하고 있습니다. CSS는 제거하는데 사용될 수있다 :

예

[데이터 마젤란 - 탐험], [데이터 마젤란 - 탐험 - 클론] {
패딩 : 0;
}

»시도

마젤란 탐색 옵션

같은 마젤란 탐색 설정의 속성 수정 데이터 옵션을 사용하여 <div data-magellan-expedition="fixed" data-options="destination_threshold:60"> :

이름 유형 디폴트 값 기술 예
active_class 현 활동적인 클래스는 활성화 링크를 지정 시험
임계 값 수 0 탐색은 고정 된 위치를 필요로 어떤 시간에 지정합니다. 스크롤 막대에 따라 계산되며, 기본값은 0 (자동)입니다. 시험
destination_threshold 수 (20) 설정 값이 목록의 상단에서 탐색 할 수있는 탐색 링크의 값을 표시하도록 설정되어 때 활성화 (파란색 배경)입니다. 시험
fixed_top 수 0 탐색 모음의 머리에서 픽셀 값을 지정합니다 시험