Convert Animated Jquery Side Nav To Vanilla Js
I need help converting a Jquery side navigation menu into Vanilla JS. I'm a beginner with JS and have no idea how to accomplish this. Also any advice on animating the burger icon t
Solution 1:
Substitute window.onload = function(){}
for $(document).ready()
; .addEventListener("click", function() {})
for .click(function() {})
; document.getElementById()
for jQuery()
; Element.classList.toggle()
for .toggleClass()
/**********************
****NAVIGATION****
**********************/#sidebar {
background: #151718;
width: 12.500em;
height: 100%;
display: block;
position: absolute;
left: -12.500em;
top: 0px;
transition: left 0.3s linear;
}
#sidebar.visible {
left: 0.000em;
}
nav {
text-align: center;
}
ul {
margin: 0.000em;
padding: 0.000em;
}
ulli {
list-style: none;
}
ullia {
background: #1c1e1f;
color: #ccc;
border-bottom: 1px solid #111;
display: block;
width: 11.250em;
padding: 0.625em;
text-decoration: none;
text-transform: uppercase
}
ullia:hover {
color: #4876FF;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 1.563em;
height: 1.250em;
cursor: pointer;
margin: 1.250em;
position: absolute;
top: 0.000em;
right: -3.750em;
}
#sidebar-btnspan {
height: 0.063em;
background: #282828;
margin-bottom: 0.313em;
display: block;
}
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="device-width, initial-scale=1"><title>Responsive Side Nav</title></head><body><divid="sidebar"><nav><ul><li><ahref="#"class="active">Home</a></li><li><ahref="#">About</a></li><li><ahref="#">Services</a></li><li><ahref="#">Contact</a></li></ul></nav><divid="sidebar-btn"><span></span><span></span><span></span></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script>window.onload = function() {
document.getElementById('sidebar-btn')
.addEventListener("click", function() {
document.getElementById('sidebar')
.classList.toggle('visible');
});
};
</script></body></html>
Post a Comment for "Convert Animated Jquery Side Nav To Vanilla Js"