Question

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

我正试着让我的菜单上下起伏。（Duh）我不知道怎么解释它，我想如果你把光标放在屏幕顶部附近，菜单会从顶部向下滑动（就像动画一样），它会恢复原状当您将光标移离屏幕顶部时。代码：

body {
	background-color: #eeeeee;
}
Rounded {
	padding: 17px 17px;
	padding-top: 50px;
    background: #dddddd;
    border-radius: 25px;
}
Header {
	font-style: arial;
	font-size: 20px;
	font-weight: 3px;
	font-size-adjust: bottom;
	color: #ededed;
}
Black {
 color: 000000;
}

Backer {
	
}

Bod {
	padding 15px 15px;
	padding-left: 150px;
}

<html>
	<head>
	<title>Games-rade</title>
	<link rel="stylesheet" href="CSS/Style.css">
	<script src="Javascript/Java.js"></script>
	</head>
	
	<body>
	<center>
	<header>
	<rounded><Black>---------------------------------- </Black><a href="index.html">Main</a><text>        |        </text><a href="about.html">About</a><text>        |        </text><a href="buy.html">Buy</a> <Black>---------------------------------- </Black></rounded>
	</header>
	</center>
	<br>
	<br>
	<br>
	<Bod>
	<h3> Hello. </h3>
	</Bod>
	</body>
</html>

任何建议？

Answer 1

您可以在块元素上使用CSS过渡来将标题移入和移出视图。

以下是使用大部分代码的粗略示例。

顺便说一句，你应该在学习的同时避免使用非标准的html元素（例如rounded）;相反，将类添加到标准元素。最后一点，通过查看一些CSS规则，我建议查看显示类型之间的区别，特别是block和inline，以及可以应用于每种类型的样式。可在此处找到一个好的介绍：http://learnlayout.com/display.html

body {
  padding:0;
  margin:0;
}

rounded {
	padding: 17px;
  background: #dddddd;
  border-bottom-left-radius: 17px;
  border-bottom-right-radius: 17px;
}
header{
	font-size: 20px;
	color: #ededed;
  display:inline-block;
}

header rounded {
  display:block;
  transform:translateY(-100%);
  transition:transform .5s ease;
}

header:hover rounded {
  transform:none;
}

Black {
 color: #000000;
}

Bod {
  display:block;
	padding 15px 15px;
	padding-left: 150px;
}

	<title>Games-rade</title>
	<link rel="stylesheet" href="CSS/Style.css">
	<script src="Javascript/Java.js"></script>
	</head>
	
	<body>
	<center>
	<header>
	<rounded><Black>---------------------------------- </Black><a href="index.html">Main</a><text>        |        </text><a href="about.html">About</a><text>        |        </text><a href="buy.html">Buy</a> <Black>---------------------------------- </Black></rounded>
	</header>
	</center>
	<br>
	<br>
	<br>
	<Bod>
	<h3> Hello. </h3>
	</Bod>

Answer 2

我使用jquery为你做了simple example：

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

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

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

})();

希望它有所帮助。

Answer 3

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

课程为http://www.codecademy.com/en/skills/make-an-interactive-website/

Answer 4

我同意你想摆脱非标准的标签。我还建议使用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>

CSS

.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 */
}

菜单上下弹出HTML

4 个答案: