导航子菜单一页网站

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

现在可以使用。 当我单击菜单项时，子菜单将被消耗。 但是，当单击另一个菜单项时，如何让子菜单再次折叠？ 当单击菜单项时，默认情况下如何让页面自动转到第一个子菜单项？