css - 带有 anchor 链接的简单 CSS 响应式触摸菜单问题

Question

基于本网站给出的代码http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly创建响应迅速且适用于触摸设备的简单 CSS 下拉菜单很容易。

然而，该代码包含指向导航的 anchor 链接，因此如果导航不在页面顶部(我的不在 - 上面有一个 Logo )，浏览器将向下滚动到导航。这令人不安，而不是我想要的。必须有一种方法可以在浏览器不向下滚动的情况下让它工作吗？

我已将代码放在 JSF Fiddle 上 http://jsfiddle.net/Ltebg0ah/及以下。

问题与此有关(来自 Osvaldas 网站的文本):CSS 伪选择器 :target 使得切换菜单变得容易，因为 anchor 的 href 属性与 CSS ID 选择器名称一致。因此，正如您可能已经理解的那样，#nav > a 的第一个 anchor 负责显示菜单，第二个 anchor 用于隐藏菜单。

<div class="header"></div>  

<nav id="nav">
<a href="#nav" title="Show navigation">Menu</a>
<a href="#" title="Hide navigation">Close Menu</a>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="workshops.html">Workshops</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

<div class="content">



 .header {
 height:200px;
background-color:brown;
 }

.content {
height:1000px;
background-color:green;
 }


#nav > a
{
    display: none;
}


#nav
{
    position: relative;
}
    #nav > a
    {
    }
    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type
    {
        display: block;
    }

/* first level */

#nav > ul
{
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
}
    #nav:target > ul
    {
        display: block;
    }
    #nav > ul > li
    {
        width: 100%;
        float: none;
    }

Answer 1

浏览器向下移动的原因是因为您已经为下拉菜单指定了一个 anchor ，其 ID 为 #nav。单击后，浏览器假定它应该关注 ID 为 #nav 的部分。使其向下滚动到该 div。

您需要使用 JavaScript 才能获得所需的功能。您还可以使用名为 Bootstrap 的出色 HTML 框架它具有该功能以及更多功能，可以使您的开发体验更加轻松。它重量轻，功能众多。

您可以查看我的JSFIddle使用 Bootstrap 查看此功能

希望对您有所帮助。