導航子菜單單頁網站

Question

我並不是真正涉及所有這些編碼術語，所以我有一些困難找到我的問題的答案。通常我只是複製粘貼現有的代碼，並嘗試對我想要的進行一些調整。無論如何，我正在一個單頁網站上的導航菜單上工作。所以到現在爲止，這工作。但是，我想要一個子菜單。我嘗試了一些東西，但我無法得到我想要的東西。我想要的是當我點擊一個菜單項時，子菜單打開並激活第一個子菜單項。

我發現了一個例子：http://inthe7heaven.com/fb-john-doe/dark/

的照片部分。我試圖複製，但我認爲子菜單已連接到相冊的過濾功能。

有人能給我一些指導嗎？

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"

這裏是一個簡單的

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

Answer 2

我設法子菜單擴展和使用樹形菜單的jsfiddle崩潰。我在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();}); 
    } 
); 

這就是現在的工作。當我點擊菜單項時，子菜單會被消耗。但是，如何在另一個菜單項被點擊時讓子菜單再次崩潰？當菜單項被點擊時，我怎麼讓頁面默認自動進入第一個子菜單項？