Javascript 菜单弹出式上下HTML

[如果您想知道，我不能使用JQuery。]

我正在努力使我的菜单上下浮动。（Duh）我不知道如何解释它，我想这样，如果你把光标放在屏幕顶部附近，菜单会从顶部向下滑动（就像动画），当你把光标从屏幕顶部移开时，菜单会向上移动。 代码：

正文{
背景色：#eeeeee；
}
圆的{
填充：17px 17px；
填充顶部：50px；
背景：#dddddd；
边界半径：25px；
}
标题{
字体：arial；
字体大小：20px；
字体大小：3px；
字体大小调整：底部；
颜色：#ededed；
}
黑色的{
颜色：000000；
}
支持者{
}
生化需氧量{
填充15px 15px；
左侧填充：150px；
}

战友
----------------------------------         |                |         ---------------------------------- 






你好

我使用jquery对您做了一个测试：

(function(){
    var top_menu = $(".animation");

    $(".menu").on("mouseenter", function(){
        top_menu.slideDown();
    });

    $(".menu").on("mouseleave", function(){
        top_menu.slideUp();
    });

})();

希望能有所帮助。

我自己对这门语言不太熟悉，但Codecademy有一个制作交互式网页的教程，我相信它正好涵盖了这一点。另外，这是学习CSS/jQuery的好方法

---

本课程位于

您可以在块元素上使用CSS转换将标题移入或移出视图

下面是一个使用大部分代码的粗略示例

另外，在学习过程中，您应该真正避免使用非标准html元素（例如

舍入的
）；相反，将类添加到标准元素中。最后一点，通过查看一些CSS规则，我建议查看显示类型之间的差异，特别是
块
和
内联
，以及可以应用于每种显示类型的样式。
在这里可以找到一个很好的介绍：


正文{
填充：0；
保证金：0；
}
圆的{
填充：17px；
背景：#dddddd；
边框左下半径：17px；
边框右下半径：17px；
}
标题{
字体大小：20px；
颜色：#ededed；
显示：内联块；
}
收割台四舍五入{
显示：块；
转换：translateY（-100%）；
转型：转型。5s轻松；
}
标题：悬停四舍五入{
转化：无；
}
黑色的{
颜色：#000000；
}
生化需氧量{
显示：块；
填充15px 15px；
左侧填充：150px；
}
游戏
----------------------------------         |                |         ---------------------------------- 






你好
我同意您不想使用非标准标签。我还建议使用CSS转换。假设您希望在向下滚动页面后可以访问菜单，我使用了一个固定位置容器。希望代码的简单性能帮助您理解正在发生的事情

<div class="menu-container">
    <nav><a href="#">Item 1</a> | <a href="#">Item 2</a> | <a href="#">Item 3</a></nav>
</div>
<div class="content">
    <h1>Hello</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>

如果您可以使用Jquery…您的代码在哪里？现在你要求我们为你做这件事…这不是为什么，还有什么是
etc
…它们不是标准的Html元素？另外，
已经被弃用，并且在HTML5Pure css下没有使用：我只是想知道如何…怎么回事？呃…我不能使用JQuery。（这是我的错，我同意将“can”改为“can”）@Mario1luigi9如果您不能使用jQuery，请从问题中删除jQuery标记。
.menu-container {
    width: 100%; 
    height: 30px;
    position: fixed; /* Allows you to stick the container in place */
    top: 0; /* Stick it to the top of the page */
    left: 0; /* Make sure it's all the way to the left as well */
}

nav {
    width: 100%;
    height: 30px;
    background-color: #ccc;
    line-height: 30px; /* Easy way to vertically center single line text when you know the height of the container */
    border-radius: 0 0 10px 10px;
    text-align: center;
    position: relative; /* Allows you to adjust placement of element */
    top: -31px; /* Move up 30px from its normal position */
    transition: all 1s; /* */
}

.menu-container:hover nav {
    top: 0; /* When menu-container is hovered move nav to top 0 from -31px */
}

.content {
    margin-top: 35px; /* Using this so that your content doesn't start behind the menu */
}