我有以下代码但是当我点击菜单按钮时,所有其他菜单itwms按需要消失,但菜单按钮稍微向右微移。如果我尝试为切换添加持续时间,"超过mij"变成两条线。 任何人都可以帮我吗? -max
<!DOCTYPE html>
<html>
<head>
<title> Homepagina </title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
</head>
<body>
<!-- dit zijun de elementen van de menubalk: -->
<div class="menuBar">
<ul>
<li> <a href="#" id="button"> Over mij </a> </li>
<li> <a href="#" id="button"> Hobbies </a> </li>
<li> <a href="#" id="menuButton"> MENU </a> </li>
<li> <a href="#" id="button"> Muziek </a> </li>
<li> <a href="#" id="button"> Informatica </a> </li>
</ul>
</div>
<!-- dit is de inhoud van de pagina: -->
<div class="jumbotron">
<div class="container">
hoi
</div>
</div>
<!-- dit is voor de menubalk acties: -->
<script>
$(document).ready(function(){
$("#menuButton").click(function(){
$("[id=button]").toggle();
});
});
</script>
</body>
</html>
body {
background-image: url(background.jpg);
margin: 0; /* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
text-align: center;
}
.menuBar {
width: 100%;
}
.menuBar {
padding-left: 0px;
}
.menuBar ul li {
display: inline-block;
width: auto;
padding-right: 50px;
padding-left: 50px;
line-height: 70px;
}
.menuBar ul li a {
color: white;
width: 75px;
text-decoration: none;
line-height: 70px;
font-family: 'Raleway', sans-serif;
font-size: 36px;
}
.menuBar a:hover {
border-bottom: 1px solid white;
}
#menuButton {
font-size: 46px;
position: relative;
}
.jumbotron .container {
height: 650px;
width: 60%;
position: fixed;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-top: 4.5px double white;
border-bottom: 4.5px double white;
}
答案 0 :(得分:0)
好的 - 您需要将id="button"
更改为其他内容,因为ID必须是唯一的。如果您只是需要某些东西作为选择器,则可以在此实例中使用类。
以下是对HTML的更改:
<li> <a href="#" class="myButton"> Over mij </a> </li>
<li> <a href="#" class="myButton"> Hobbies </a> </li>
<li> <a href="#" id="menuButton"> MENU </a> </li>
<li> <a href="#" class="myButton"> Muziek </a> </li>
<li> <a href="#" class="myButton"> Informatica </a> </li>
接下来,在文档中添加一个切换,准备在页面加载时隐藏菜单项,并添加动画时间参数:
<script>
$(document).ready(function(){
//toggle myButton to hide them after the page loads.
// If they are hidden before the page loads, the positions
// change a bit when they are toggled and that is what
// is causing the main Menu button to move
$(".myButton").toggle(300);
$("#menuButton").click(function(){
$(".myButton").toggle(300);
});
});
</script>
最后,添加一个CSS规则来停止包含两个单词的菜单项:
.myButton {
white-space: nowrap;
}