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＆gt;的第一个锚点。 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即可轻松完成此操作。只需使用一个复选框，并通过id附加2个标签。这样你就可以使用：checked伪选择器在纯css中完成它。

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

＆＃13;

 .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;
        }

＆＃13;

<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>

＆＃13;

简单的CSS响应触摸菜单问题与锚链接

2 个答案: