Menu
I’m new to javascript and I cant get the click eventlistener to work, its suppose to set the display of the ul in the header to display: block instead of none
heres the html
[QUOTE]
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title> How the web works </title>
<link rel=”stylesheet” href=”css/style.css” />
</head>
<body>
<div id=”page”>
<header>
<h1> Cole Pratt <span id=”h1s”> No.2968615 </span> </h1>
<img src=”images/menuicon.png” alt=”menuicon” width=”40″ id=”menuicon”/>
<ul>
<li><a href=”#”>home</a></li>
<li><a href=”#”>about</a></li>
<li><a href=”#”>bio</a></li>
</ul>
</header>
</div>
<script src=”scripts/mobilemenu.js” type=”text/javascript”></script>
</body>
</html>
the css
[QUOTE]
/* BEGINNING OF STYLESHEET FOR MAIN PAGE
body {
background-color: rgb(40, 40, 40);
font-size: 16px;
margin: 0 auto;
font-family: helvetica, arial;
}
header {
position: relative;
background: linear-gradient(rgb(40, 40, 140), rgb(50,50,180));
min-height: 40px;
box-shadow: 0px 0px 5px black inset;
}
header h1 {
position: relative;
padding: 10px;
font-style: italic;
font-size: 1.2em;
font-weight: bold;
color: white;
}
#h1s {
font-size: .6em;
}
img {
position: absolute;
top: 0px;
right: 10px;
}
header ul {
position: relative;
display: none;
}
header ul li {
background-color: red;
text-align: center;
height: 20px;
background-color: grey;
box-shadow: 0px 0px 1px black inset;
}
header ul li a {
text-decoration: none;
color: white;
line-height: 20px;
font-size: .6em;
}
and the javascript
[QUOTE]
// SCRIPT TO DISPLAY AND HIDE THE MENU WHILE IN MOBILE FRIENDLY DEVICE
// STEP ONE CREATE GLOBAL VARIABLE SO WE CAN MONITOR THE MENULOGO FOR CLICKS
var menu = document.getElementById(“menuicon”);
function menuclick(){
if (menu.style.display == “none”){
menu.style.display = “block”;
}
}
menu.addEventListener(‘click’, menuclick);
really really need quick help on this as I have an assignment due tomorrow
thanks
cole