HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div class="m-header">
<button id="menu-btn"></button>
Template
</div>
<? include("main-list.php"); ?>
<div class="main">
</div>
<script></script>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body{ background-color:#FFFFFF;
margin:0;}
.m-header{ height:100px;
background-color:#313131;
color:#FFFFFF;
font-size:40px;
display: flex;
justify-content:center;/* align horizontal */
align-items: center; /* align vertical */
box-shadow: 0px 0px 25px rgba(0,0,0,0.7);}
#menu-btn{ position:absolute;
top:25px;
left:50px;
width:50px;
height:50px;
border:none;
background: url(pics/menu.png) no-repeat;
background-size:cover;
transition:all 0.2s;}
#menu-btn:hover{ cursor:pointer;}
.menu-btn-active{ transform:rotate(90deg);
background: url(pics/menu-w.png) no-repeat;
background-size:cover;}
.main{ position:relative;
box-shadow:0px -5px 25px rgba(0,0,0,0.7);
background-color:#60101F;
z-index:-1;
width:100%;
height:100vh;
left:0;}
Javascript
// JavaScript Document
document.getElementById('menu-btn').addEventListener('click', menuShowHide());
function menuShowHide() {
var main = document.getElementById('main');
var icon = document.getElementById('menu-btn');
if(icon.classList.contains('menu-btn-active')) {
menuHide(main, icon);}
else {
menuShow(main, icon);}
}
function menuShow(main, icon) {
main.style.left = 250 + 'px';
icon.classList.add('menu-btn-active');
}
function menuHide(main, icon) {
main.style.left = 0 + 'px';
icon.classList.remove('menu-btn-active');
}
Hello everyone, here is the problem: everytime I press the button with id:menu-btn the script will be executed but only till it reaches the first if condition. what is the problem here?
Aucun commentaire:
Enregistrer un commentaire