Menu
Community /Pin to ProfileBookmark
@cootheadSep 24.2019 — #Hi RaulRogojan,
this can be done without _JavaScript_. ;)
_coothead_
Converting inline onclick to event listener?
I have just started learning about event listeners and how to use them. Creating a new event listener from scratch seems easy enough. The problem is that I want to add an event listener to a previous code that relied on the html onclick solution.
In this case it is a navigation sidebar that I want to open and close when pressing a menu icon. When looking at my current js file, I have absolutely no clue where to place the event listener or how to make it link up with the code I already wrote.
I would be very thankful if someone could help me explain it to me and give me that “aha!” moment I have been looking for. 😁
THE HTML
`<body>
<nav class=”nav-main”>
<div class=”btn-toggle-nav”></div>
<ul>
<li><a href=”#”>menu1</a></li>
<li><a href=”#”>menu2</a></li>
<li><a href=”#”>menu3</a></li>
<li><a href=”#”>menu4</a></li>
</ul>
</nav>
<aside class=”nav-sidebar”>
<ul>
<li><span>menu1</span></li>
<li><a href=”#”>menu2</a></li>
<li><a href=”#”>menu3</a></li>
<li><a href=”#”>menu4</a></li>
</ul>
</aside>
</body>`
THE JAVASCRIPT
`let toggleNavStatus = false;
let toggleNav = function() {
let getSidebar = document.querySelector(“.nav-sidebar”);
let getSidebarUl = document.querySelector(“.nav-sidebar ul”);
let getSidebarTtitle = document.querySelector(“.nav-sidebar span”);
let getSidebarLinks = document.querySelectorAll(“.nav-sidebar a”);
if (toggleNavStatus === false) {
getSidebarUl.style.visibility = “visible”;
getSidebar.style.width = “272px”;
getSidebarTtitle.style.opacity = “0.5”;
let arrayLength = getSidebarLinks.length;
for (let i = 0; i < arrayLength; i++) {
getSidebarLinks[i].style.opacity = “1”;
}
toggleNavStatus = true;
}
else if (toggleNavStatus === true) {
getSidebar.style.width = “50px”;
getSidebarTtitle.style.opacity = “0”;
let arrayLength = getSidebarLinks.length;
for (let i = 0; i < arrayLength; i++) {
getSidebarLinks[i].style.opacity = “0”;
}
getSidebarUl.style.visibility = “hidden”;
toggleNavStatus = false;
}
}`
Sign in
to post a comment2 Comments(s) ↴
0
@cootheadSep 24.2019 — #Hi RaulRogojan,this can be done without _JavaScript_. ;)
``<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>show and hide menu</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
overflow-x: hidden;
}
h1 {
font-size: 1.25em;
color: #555;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
}
#cb {
position: absolute;
left: -999em;
}
#cb ~ label {
display: block;
width: 7em;
padding: 0.25em 0;
border: 1px solid #999;
border-radius: 0.5em;
box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
background-image: linear-gradient( to bottom, #fff, #ccc );
text-align: center;
cursor: pointer;
}
#cb ~ label::before {
content: 'show ';
}
#cb:checked ~ label::before {
content: 'hide ';
}
#cb:checked ~ ul {
right: 0;
}
#cb ~ ul {
position: absolute;
right: -100%;
padding: 3em;
background-color: #fff;
border: 1px solid #999;
border-radius: 0.5em 0 0 0.5em;
box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.4 );
transition: 0.5s ease-in-out;
}
#cb ~ ul a {
display: block;
padding: 0.25em;
margin: 0.25em 0;
color: #000;
}
</style>
</head>
<body>
<h1>show and hide menu</h1>
<input type="checkbox" id="cb">
<label for="cb">menu</label>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html><i>
</i>``_coothead_