탐색 하위 메뉴 한 페이지 웹 사이트

Question

나는 모든 코딩 용어에 익숙하지 않아서 내 문제에 대한 답변을 찾는 데 어려움을 겪고 있습니다. 보통 나는 기존 코드를 복사하여 복사하여 원하는 부분을 조정하려고합니다. 어쨌든 한 페이지 웹 사이트에서 탐색 메뉴를 작업하고 있습니다. 지금까지는 그렇게 작동합니다. 그러나 하위 메뉴를 갖고 싶습니다. 나는 어떤 것을 시도했지만, 내가 원하는 것을 실제로 얻을 수는 없습니다. 내가 원하는 것은 메뉴 항목을 클릭하면 하위 메뉴가 열리고 첫 번째 하위 메뉴 항목이 활성화됩니다. http://inthe7heaven.com/fb-john-doe/dark/

사진 섹션 :

나는 예를 발견했다. 나는 그것을 복제하려고했지만 하위 메뉴가 photogallery의 필터링 기능에 연결되어 있다고 생각합니다.

아무에게도 이것에 대한 지침을 줄 수 있습니까?

HTML

<nav class="on_caption"> 
    <ul class="pagination"> 
     <li class="home current"><a href="#0">Home</a></li> 
     <li class=""><a href="#1">About EJ</a></li> 
     <li class=""><a href="#2">Services</a></li> 
     <li class="photos"> 
      <a href="#3">Photos</a> 
     <div id="filter" class="category_filter_list"> 
      <span class="active_link" id="all">All</span> 
      <span id="cookies">Cookies</span> 
      <span id="bread">Bread</span> 
      <span id="baking">Baking</span> 
     </div> 
     </li> 
     <li class=""><a href="#4">Classes</a></li> 
     <!--<li class=""><a href="#5">Testimonials</a></li>--> 
     <li class=""><a href="#6">Contact</a></li> 
    </ul> 
</nav> 

CSS

nav { 
     position: absolute; 
     z-index: 999; 
     right: 0; 
     top: 0; 
     width: 158px; 
     height: 600px; 
     display: block; 
     overflow: hidden; 
     behavior: url(js/PIE.htc); 
    } 

    nav.on_caption { 
     background: rgba(20,11,19,.6); 
     -pie-background: rgba(20,11,19,.6); 
    } 

nav.on_caption a { 
     color: #d0ced0; 
    } 

    nav.off_caption { 
     background: rgba(20,11,19,.08); 
     -pie-background: rgba(20,11,19,.08); 
    } 

    nav.off_caption a { 
     color: #524b51; 
    } 

    nav a { 
     font-size: 1.143em; 
     text-transform: uppercase; 
    } 

nav > a { 
     padding-left: 24px; 
    } 

    ul.pagination { 
     margin: 0; 
     padding: 0; 
     padding-bottom: 8px; 
     list-style:none; 
    } 

    ul.pagination li { 
     margin: 0px 0px 0px 0px; 
     clear: both; 
     padding: 8px 10px 0px 24px; 
     list-style: none; 
    } 

ul.pagination li:first-child { 
     padding-top: 25px; 
    } 

    nav > a:hover, 
    nav ul.pagination li a:hover, 
    nav ul.pagination li.current a { 
     color: #90705B; 
    } 

그래서 내가 위에서 제공하는 웹 사이트를 기반으로이 코드를 얻었다. 필터에 연결되어 있지 않은 일반 메뉴 항목의 경우에만 사진 섹션과 동일한 효과를 원합니다. 즉, 메뉴 항목을 클릭하면 메뉴가 하위 메뉴로 확장되고 페이지는 하위 메뉴의 첫 번째 항목으로 이동합니다. 또한 하위 메뉴 항목이 활성화됩니다.

Answer 1

구글 여기 "scrollto jquery"

내가 하위 메뉴가 확장 jsfiddle의 붕괴 트리 메뉴를 사용하여 얻을 관리하는 간단한

http://flesler.blogspot.in/2007/10/jqueryscrollto.html

Answer 2

입니다. 나는 그것을 jsfiddle에서 시험해 보았다. 그러나, 그것은 내 웹 사이트에서 작동하지 않습니다. 메뉴가 확장되지 않습니다. 내가 사용하고있는 웹 사이트는 단일 페이지 웹 사이트입니다. 따라서 메뉴 항목은 페이지의 섹션을 가리 킵니다. 그래서, 내 href = "sub-1"은 페이지의 세 번째 섹션을 가리키고 있기 때문에 작동하지 않는다고 생각합니다.

간단한 해결 방법이 있습니까? 멋진 jquery 효과는 필요 없으며 열면됩니다.

또한 상위 항목을 클릭하면 하위 메뉴가 확장되어 첫 번째 하위 항목을 활성화해야합니다. 어떻게해야합니까?

HTML

<nav class="on_caption"> 
    <ul class="pagination"> 
     <li class="home current"><a href="#0">Home</a></li> 
     <li class=""><a href="#1">About EJ</a></li> 
     <li class=""><a href="#sub-1">Services</a> 
      <ul id="sub-1"> 
       <li class=""><a href="#">Test</a></li> 
       <li class=""><a href="#">Test</a></li> 
      </ul> 
     </li> 
     <li class=""><a href="#3">Photos</a></li> 
     <li class=""><a href="#4">Classes</a></li> 
     <li class=""><a href="#6">Contact</a></li> 
    </ul>     
</nav> 

일부 진전을 CSS

.pagination > li ul { 
    display: none; 
} 

.pagination > li ul:target { 
    display: block; 
} 

Answer 3

.

HTML

<nav class="on_caption"> 
    <ul class="pagination"> 
     <li class="home current"><a href="#0">Home</a></li> 
     <li class=""><a href="#1">About EJ</a></li> 
     <li class=""><a href="#sub-1">Services</a> 
      <ul id="sub-1"> 
       <li class=""><a href="#">Test</a></li> 
       <li class=""><a href="#">Test</a></li> 
      </ul> 
     </li> 
     <li class=""><a href="#3">Photos</a></li> 
     <li class=""><a href="#4">Classes</a></li> 
     <li class=""><a href="#6">Contact</a></li> 
    </ul>     
</nav> 

CSS는

.pagination > li ul { 
    display: none; 
} 

jQuery를

jQuery(
    function($) 
    { 
    $('.pagination a').click(function(){$(this).next('ul').toggle();}); 
    } 
); 

이것은 작동합니다. 메뉴 항목을 클릭하면 하위 메뉴가 소모됩니다.그러나 다른 메뉴 항목을 클릭 할 때 하위 메뉴가 다시 접히게하려면 어떻게해야합니까? 그리고 메뉴 항목을 클릭 할 때 페이지가 자동으로 첫 번째 하위 메뉴 항목으로 이동하도록하려면 어떻게해야합니까?