Tessa123212
Gebruiker
- Lid geworden
- 10 mei 2016
- Berichten
- 5
Hoi,
Ik heb een uitschuifmenu gemaakt en een menu knop die verandert naar een kruis als ik erop klik. Als ik op deze menuknop klik opent het menu ook en verandert de knop naar een kruisje. Maar nu wil ik ook dat het menu sluit als ik op het kruisje druk. Dit gebeurt op dit moment niet. Ik wil ook het menu aan de andere kant van de pagina verplaatsen(rechts) maar dit lukt ook niet. De gehele code:
en de CSS:
alvast bedankt.
Ik heb een uitschuifmenu gemaakt en een menu knop die verandert naar een kruis als ik erop klik. Als ik op deze menuknop klik opent het menu ook en verandert de knop naar een kruisje. Maar nu wil ik ook dat het menu sluit als ik op het kruisje druk. Dit gebeurt op dit moment niet. Ik wil ook het menu aan de andere kant van de pagina verplaatsen(rechts) maar dit lukt ook niet. De gehele code:
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Een site
</title>
<meta charset="utf-8">
<link rel="stylesheet" href="plaatje.css">
</head>
<body>
<div class="container" style=" float: right;"onclick="myFunction(this); openNav()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<header1>
<img src="Appeltaart.jpg" width="350" height="300" />
</header1>
<aside id = one class = "double">
<p> hoi </p>
</aside>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
Code:
html {
background-color: #F2F5A9;
}
p {
color: black;
}
#one{
background-color: #F3F781;
color: black;
width: 850px;
height: auto;
margin-top: 5px;
margin-left: 1;
padding: 5px 5px 5px 5px;
float: right;
border-style: double;
}
.container {
display: inline-block;
cursor: pointer;
margin-left: 10px;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(50deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}alvast bedankt.
