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

Question

根据本网站http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly 上给出的代码，很容易创建一个简单的 CSS 下拉菜单，它具有响应性并且适用于触摸设备。

但是，代码包含指向导航的锚链接，因此如果导航不在页面顶部（而我的不在 - 上面有一个徽标），浏览器会向下滚动到导航。这令人不安，而不是我想要的。必须有一种方法可以在不向下滚动浏览器的情况下使其工作？

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

问题与此有关（来自 Osvaldas 网站的文本）： CSS 伪选择器 :target 可以轻松切换菜单，因为锚点的 href 属性与 CSS ID 选择器名称一致。因此，您可能已经理解，#nav > a 的第一个锚点负责显示，第二个锚点负责隐藏菜单。

<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

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

您需要使用 JavaScript 来获得您想要的功能。您还可以使用名为 Bootstrap 的出色 HTML 框架，它具有该功能以及更多功能，可以让您的开发体验更加轻松。它很轻巧，并具有大量功能。

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

我希望这会有所帮助。

Answer 2

您可以在没有 Javascript 的情况下轻松完成此操作。只需使用一个复选框和 2 个通过 id 附加到它的标签。这样你就可以使用 :checked 伪选择器在纯 css 中完成。

http://jsfiddle.net/Ltebg0ah/3/

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

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


#nav
    {
        display: none;
    }
        #nav ~ label
        {
            display: none;
        }
        #nav:not( :checked ) ~ label:first-of-type,
        #nav:checked ~ label:last-of-type
        {
            display: block;
        }
 
    /* first level */
 
    #nav ~ ul
    {
        opacity: 0;
        position: absolute;
        left: 0;
        right: 0;
        transition-duration: 0.4s;
    }
        #nav:checked ~ ul
        {
            opacity: 1;
        }
        #nav ~ ul > li
        {
            width: 100%;
            float: none;
        }

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

<nav>
    
    <input type="checkbox" id="nav" />
    <label for="nav">Show nav</label>
    <label for="nav">Hide nav</label>
		<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"></div>