I am a complete beginner when it comes to javascript, and i've hit a brick wall.
I found this small bit of code on W3 schools about how to create a animated burger menu, which looks cool, and i've managed to link it to my side menu, so it succesfully opens it up.. however the same button wont close the menu.
I managed to link my side menu by adding ;openSlideMenu() to my onclick function in first div container.
I tried adding a closing feature by using ;closeSlideMenu() in that same container without any luck, my assumption to why this is not working is because the name of the div container "burger-menu-btn" changes to "burger-menu-btn change" when you click on it, as the toggle function tells it to do.
<!-- Burger menu icon and animation -->
<div class="burger-menu-btn" onclick="myFunction(this); openSlideMenu();">
<div class="burger-menu-bar-1"></div>
<div class="burger-menu-bar-2"></div>
<div class="burger-menu-bar-3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
function openSlideMenu(){
document.getElementById('burger-menu').style.width = '100%';
}
function closeSlideMenu(){
document.getElementById('burger-menu').style.width = '0px';
}
</script>
<div id="burger-menu" class="side-nav">
<a href="index.html">Home</a>
<a href="cases.html">Basic // GF2 </a>
<a href="#">Null</a>
<a href="#" >Null</a>
<a href="#">Null</a>
<a href="#" class="btn-close" onclick="closeSlideMenu()">×</a>
</div>
My final goal here is to:
Make the red "burger-menu-btn" open the slider "burger-menu", which it already does.
then make the red transformed X close the same slider menu.
So i will end up with a good looking burger menu, thats animated, and i can finally remove the small makeshift "btn-close" button in the bottom of my navigation bar.
heres the fiddle https://jsfiddle.net/02rqy16f/
thanks in advance, im sorry if i missed anything crucial.
the opening and closing button are the some button. so you need to toggle the menu when clicking (open/close) button:
<div class="burger-menu-btn" onclick="myFunction(this); toogleSlideMenu(this);">
<div class="burger-menu-bar-1"></div>
<div class="burger-menu-bar-2"></div>
<div class="burger-menu-bar-3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
function toogleSlideMenu(x){
if(x.classList.contains('change')){
document.getElementById('burger-menu').style.width = '100%';
}
else{
document.getElementById('burger-menu').style.width = '0px';
}
}
</script>
Following your approach (where you set the width
), I'd create a single function toggleSideMenu
where:
100%
. 100%
. 0px
. Example:
<!-- Burger menu icon and animation -->
<div class="burger-menu-btn" onclick="toggleSideMenu(this);">
<div class="burger-menu-bar-1"></div>
<div class="burger-menu-bar-2"></div>
<div class="burger-menu-bar-3"></div>
</div>
<script>
function toggleSideMenu(x) {
const el = document.getElementById('burger-menu')
el.style.width = el.style.width === '100%' ? '0px' : '100%'
}
</script>
<div id="burger-menu" class="side-nav">
<a href="index.html">Home</a>
<a href="cases.html">Basic // GF2 </a>
<a href="#">Null</a>
<a href="#" >Null</a>
<a href="#">Null</a>
<!-- "btn-close" here is my old way of closing this menu, i am not happy with it at all.
which is why i want to close this menu, with the same button that opens it above-->
<a href="#" class="btn-close" onclick="closeSlideMenu()">×</a>
</div>
But really, I'd just use a class called .opened
to do the toggle If I was you.
Instead of change the width of "#burger-menu" element when click on burger icon, you can toggle class (example open class) then set the width of "#burger-menu" in css.
#burger-menu{
width: 0%;
}
#burger-menu.open{
width: 100%;
}
Click function:
document.getElementById('burger-menu').classList.toggle("open");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.