fullPage.js로 반응 형 드롭 다운 탐색 플러그인을 사용하는 방법은 무엇입니까?

Question

내가 FullPage.js와 반응 드롭 다운 메뉴를 추가 할 수 있지만, 마크 업이 나를 혼란 ...

현재 나는 메뉴

<ul id="menu"> 
    <li id="contact" data-menuanchor="thirdPage"><a href="#thirdPage">contact</a></li> 
    <li data-menuanchor="secondPage"><a href="#secondPage">II</a></li> 
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">I</a></li> 
    </ul> 

slimmenu에 대한 플러그인 내 HTML이 있습니다. JS는 다음과 같이이다 :

<ul class="slimmenu"> 
<li> 
    <a href="#">Slim Menu 1</a> 
    <ul> 
     <li> 
      <a href="#">Slim Menu 1.1</a> 
      <ul> 
       <li><a href="#">Slim Menu 1.1.1</a></li> 
       <li> 
        <a href="#">Slim Menu 1.1.2</a> 
        <ul> 
         <li><a href="#">Slim Menu 1.1.2.1</a></li> 
         <li><a href="#">Slim Menu 1.1.2.2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Slim Menu 1.2</a></li> 
    </ul> 
</li> 
<li><a href="#">Slim Menu 2</a></li> 
<li> 
    <a href="#">Slim Menu 3</a> 
    <ul> 
     <li> 
      <a href="#">Slim Menu 3.1</a> 
      <ul> 
       <li><a href="#">Slim Menu 3.1.1</a></li> 
       <li><a href="#">Slim Menu 3.1.2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Slim Menu 3.2</a></li> 
    </ul> 
</li> 
<li><a href="#">Slim Menu 4</a></li> 

가 어떻게 그것을 Fullpage.js와 함께 작동하도록 두 개의 결합합니까?

감사합니다. fullPage.js docs에서

Answer 1

:

메뉴 : (기본 false)를 셀렉터는 부분과 연결하는 메뉴를 지정할 수 있습니다. 이 방법으로 섹션을 스크롤하면 활성 클래스를 사용하여 메뉴의 해당 요소가 활성화됩니다. 이렇게하면 메뉴가 생성되지 않고 해당 앵커 링크가있는 메뉴의 요소에 활성 클래스가 추가됩니다. 메뉴의 요소를 섹션과 연결하려면 HTML 5 데이터 태그 (data-menuanchor)가 섹션 내에서 사용되는 것과 동일한 앵커 링크와 함께 사용해야합니다. 예 : 귀하의 경우

, 당신은 단지 fullPage.js에 menu 옵션 .slimmenu을 추가해야합니다 :

$('#fullpage').fullpage({ 
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 
    menu: '.slimmenu' 
}); 

그리고 active 클래스를 추가 할 위치를 플러그인에게, 당신은 필요 클래스를 추가하려는 요소에 data-menuanchor 속성을 추가하십시오.

메뉴에서 원하는 위치에 따라 다릅니다.

메뉴가 sections (세로)에만 작동하고, 가로가 slides이 아닌 것을 고려하십시오. 그들이 어떻게 메뉴 작품을 이해하는 데 도움이 될 수 있습니다,

<ul class="slimmenu"> 
<li data-menuanchor="firstPage"> 
    <a href="#">Slim Menu 1</a> 
    <ul> 
     <li> 
      <a href="#">Slim Menu 1.1</a> 
      <ul> 
       <li><a href="#">Slim Menu 1.1.1</a></li> 
       <li> 
        <a href="#">Slim Menu 1.1.2</a> 
        <ul> 
         <li><a href="#">Slim Menu 1.1.2.1</a></li> 
         <li><a href="#">Slim Menu 1.1.2.2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Slim Menu 1.2</a></li> 
    </ul> 
</li> 
<li data-menuanchor="secondPage"><a href="#">Slim Menu 2</a></li> 
<li data-menuanchor="thirdPage"> 
    <a href="#">Slim Menu 3</a> 
    <ul> 
     <li> 
      <a href="#">Slim Menu 3.1</a> 
      <ul> 
       <li><a href="#">Slim Menu 3.1.1</a></li> 
       <li><a href="#">Slim Menu 3.1.2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Slim Menu 3.2</a></li> 
    </ul> 
</li> 
<li data-menuanchor="fourthPage"><a href="#">Slim Menu 4</a></li> 
<ul> 

을 그리고 available examples을 확인하는 것을 잊지 마세요 :

나는이 같은 속성 data-menuanchor를 추가 할 수 있습니다 같아요.