导航子菜单单页网站

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();}); 
    } 
); 

这就是现在的工作。当我点击菜单项时，子菜单会被消耗。但是，如何在另一个菜单项被点击时让子菜单再次崩溃？当菜单项被点击时，我怎么让页面默认自动进入第一个子菜单项？