Question

我试图制作我的第一个移动第一个网站，即使你点击菜单，我的onclick也有轻微问题。当您单击菜单图标并发生下拉菜单时，屏幕会略微显示一部分标题。你如何做到这一点，所以当你点击菜单时，屏幕不会掉落或向下滚动一点。你可以在我的例子中看到我提出我的意思，任何想法，任何帮助非常感谢heres我的演示链接：

演示：http://cssdeck.com/labs/jkxsecgl

这是我的HTML标记：

      <body>
<div id="container">

    <div id="header">
    <h1>This is the header</h1>
    <div class="main-nav" id="nav">
      <a href="#nav" class="nav-open"> &#9776; Menu</a>
      <a href="#" class="nav-close"> &#9776; Close</a>
          <nav>
              <ul> 
                <li><a href="#">home</a></li>
                <li><a href="#">bio</a></li>
                <li><a href="#">contact</a></li>
                <li><a href="#">gallery</a></li>
            </ul>
          </nav>

    </div>

    </div>

    <div id="content"><h1>This is the content</h1></div>
    <aside><h1>The side bar</h1></aside>
    <footer><h1>The Footer</h1></footer>


    <div id="content"><h1>This is the content</h1></div>
    <aside><h1>The side bar</h1></aside>
    <footer><h1>The Footer</h1></footer>

</div>


</body>

CSS：

*{margin: 0px; padding: 0px;}

h1 {padding: 10px;}

#container {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: rgba(51,0,255,.2);
    margin: 0 auto;
    }

#nav {
  padding-left: 10px;
}

#nav nav ul, .nav-close, .nav-open {
  list-style: none;
  text-decoration: none;
}
.nav-close {
  display: none;
}


#nav nav ul a {
  text-decoration: none;
}

.nav-open, .nav-close {
  background: yellow;
  padding: 10px;
  border: 1px solid;
}
#nav:target .nav-open {
  display: none;
}

#nav:target .nav-close {
  display: inline-block;
}

#nav nav {
  position: relative;
  text-align: left;
}
#nav nav ul {
    position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-height: 0;
        max-width: 16em;
            max-width: 16em;
        background: #f6f6f6;
        border-width: 0px;
        border-style: dashed;
        border-color: #aaa;
        overflow: hidden;
        -webkit-transition: max-height linear 0.5s;
        -moz-transition: max-height linear 0.5s;
        -ms-transition: max-height linear 0.5s;
        -o-transition: max-height linear 0.5s;
        transition: max-height linear 0.5s;

}
#nav nav ul li {
        display: block;
    background: orange;
    border-bottom: 1px solid;   
}
#nav nav ul li a {
        padding: 0.3em 1.5em;
    }
#nav:target nav ul {
        max-height: 400px;
    }
.nav-open {
        display: inline-block;
    }

#header {
    width: 100%;
    background: rgba(0,204,51,.7);  
}

#content {
    background: rgba(0,0,204,.6);
    height: 300px;  
    }

aside {
    background: rgba(153,0,0,0.9);
    height: 300px;
    }   

footer {
    width: 100%;
    height: 150px;  
    background: rgba(102,255,255,1);
    }

Answer 1

正如Tom所说......这是你的锚标签的默认动作......因为href属性中有一个哈希（＃），它正试图跳转到那个位置。您需要使用JavaScript来覆盖锚标记的功能，或者只是使用跳转。是的......你给出的例子也是如此。他正在跳到＃nav;＃nav＆＃34;点击打开时＆＃34;＃＆＃34;单击关闭时...如果您调整屏幕大小以便滚动，则会看到它发生。

要使用JS路由，您可以在标记本身中使用onclick并返回false，或者您可以使用jQuery并使用preventDefault。

除此之外，我不知道如何纯粹使用CSS来防止＆＃34;跳跃。＆＃34;

Answer 2

虽然我仍然认为JS是一个更好的解决方案，但我可能会有所帮助：http://cssdeck.com/labs/ok437d8l我将所有目标标记移动到#container。哪个是容器元素，因此锚点位于顶部。

但如果滚动滚动它会跳到顶部。

移动CSS导航点击事件

2 个答案: