或

Question

我想知道如何将菜单从页面顶部移到页面顶部。让我说明我的意思。所以此刻我就像这样

＆lt; - 页面顶部 - ＆gt;
＆lt; - 菜单直接位于顶部 - ＆gt;

所以，我想做的是这样的事情：

＆lt; - 在页面顶部外面启动导航菜单 - ＆gt;
＆lt; - 页面顶部 - ＆gt;
＆lt; - 落到目前的位置 - ＆gt;

所以我只是希望它从顶部掉落到页面之外。我认为这是一部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>`

Answer 1

通过使用负边距并使用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);

EXAMPLE 1

或

如果你想使用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; } }

EXAMPLE 2

如何使导航菜单落到页面上？

1 个答案:

或