我想知道如何将我的菜单从页面顶部之外拖放到页面顶部。让我表明我的意思。所以现在我是这样的
<--页面顶部-->
<--菜单直接在顶部-->
所以，我想做的是这样的:
<--就在页面顶部之外启动导航菜单-->
<--页面顶部-->
<--下降到当前位置-->
所以我只是想让它从顶部之外掉落到页面中。我假设这是一个 css 动画，但我不确定该怎么做。请建议一种方法。
这是我的 CSS 样式表。
body {
font: 12px sans-serif;
background-color: #eee;
margin:0;
padding:0;
}
/* Everything for the navigation */
.nav
{
margin:0 auto;
position:relative;
background:rgba(0,0,0.5);
background-color:#555;
height:60px;
width:50%;
box-shadow:0 0 2px #000;
font-size:13px;
}
.nav ul li
{
list-style-type:none;
display:inline;
margin-top:22px;
margin-left:75px;
float:left;
}
.nav ul li a
{
text-decoration:none;
color:#999;
transition:all 0.3s ease-in-out;
}
.nav ul li a:hover
{
color:#fff;
cursor:pointer;
transition:all 0.3s ease-in-out;
}
.logo
{
float:left;
margin-top:15px;
margin-left:75px;
}`
如果需要，这里是我的 html 代码。
<html>
<head>
<title>Zegita</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!--Navigation bar-->
<div class="nav">
<!--Logo-->
<div class="logo">
<a href="./"><img src="img/thumb.jpg" height="30" width="35" style="border-radius:3px;"></img></a>
</div>
<!--End Logo-->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">My Github</a></li>
<li><a href="#">Contact info</a></li>
<li><a href="#">Projects</a></li>
</ul>
</div>
<!--ending the navigation bar-->
<!--starting the content area-->
<!--ending the content area-->
<!--starting the footer area-->
<!--ending the footer-->
</body>
</html>`
最佳答案
您可以很容易地做到这一点，方法是将文档上方的页眉设置为负边距，并使用 jQuery 和 .animate()
HTML
<div class="header"></div>
CSS
html,body{
margin: 0;
padding: 0;
}
.header{
background: black;
width: 100%;
height: 40px;
margin: -100% 0 0;
}
JS
$(".header").animate({"margin": 0}, 1000);
或
如果你想使用 CSS 动画，你可以这样做:
.header{
background: black;
width: 100%;
height: 40px;
-webkit-animation: animateHeader 1s ease forwards;
}
@-webkit-keyframes animateHeader {
from { margin: -100% 0 0; }
to { margin: 0; }
}
@-moz-keyframes animateHeader {
from { margin: -100% 0 0; }
to { margin: 0; }
}
@keyframes animateHeader {
from { margin: -100% 0 0; }
to { margin: 0; }
}
关于html - 如何让导航菜单落在页面上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27853607/