Hamburger Menu on Desktop works only the first time

Ask the community
,
1

Hi everyone. I have managed to create with wixcode a decent animated hamburger menu for the desktop, that being said, it is not working as expected for some reason.

here is the setup: I have a flipping hamburger button with a slide out menu setup up like this:

export function menuBtn2_click(event) {
    $w('#menuBtn2').hide("flip", flipOptionsR);
    $w('#closeBtn2').show("flip", flipOptionsL);
    $w('#bm2').show("slide", slideOptionsT2);
    $w('#bm3').show("slide", slideOptionsR1);
}

export function closeBtn2_click(event) {
    $w('#menuBtn2').show("flip", flipOptionsL);
    $w('#closeBtn2').hide("flip", flipOptionsR);
    $w('#bm2').hide("slide", slideOptionsT3);
    $w('#bm3').hide("slide", slideOptionsR2);
}

The slide out “bm3” box has all the menu text links that lead to different pages on my site

I also added code for every link that when clicked the menu is closed as such:

export function homeLink_click(event) {
    $w('#menuBtn2').show("flip", flipOptionsL);
    $w('#closeBtn2').hide("flip", flipOptionsR);
    $w('#bm2').hide("slide", slideOptionsT3);
    $w('#bm3').hide("slide", slideOptionsR2);
}

This is repeated with every link that I have in the menu.

Additionally I have code that every-time a page loads the hamburger menu button appears with an animation as such:

export function page1_viewportEnter(event) {
    $w('#menuBtn2').show("float", floatOptions1);
    }

so if i play with the open/close functionality of the menu button everything works. Once I click any link the menu closes and i am redirected to the target and as the new page loads the menu button appears as programmed. However, once I click it again to navigate elsewhere it flips and disappears and the close button/slide out menu does not appear… I can’t figure out what I am doing wrong… If anyone has any ideas please help me - I am going crazy here!

Thanks in advance

2

Anyone?! Please! I am at my wits end!!!

3

I tried to warn you, JQuery animations really are not the best for this, and ferreting out errors is more time consuming than writing CSS.

4

unfortunately I don’t know how to do it differently in wix - i would like to try something different but I don’t know how. I don’t get how to do it with a iframe and there aren’t any guides or examples

5

Bump - can someone please, please, please help me!

as @David-SKmedia suggested i figured out how to do an iframe hamburger menu, but, i still need some help configuring it…
the issue is, I can’t figure out how to make the menu collapsable when clicked anywhere outside of menu, and how to make it collapse when a link is clicked…

Can anyone please give me some suggestions?
I found some examples of pure css codes that let something close when clicked outside of it, but I can’t figure out how to integrate…

this is the HTML/CSS code I found that generally works as an iFrame Hamburger Menu (without the features I mentioned above):

<html>
<nav role='navigation'>
<div id="menuToggle" class="toggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu" class="nav">
<a href="https://www.ivg.photography/" target="_self"><li>HOME</li></a>
<a href="https://www.ivg.photography/ocean" target="_self"><li>OCEAN</li></a>
<a href="https://www.ivg.photography/night" target="_self"><li>NIGHT</li></a>
<a href="https://www.ivg.photography/land" target="_self"><li>LAND</li></a>
<a href="https://www.ivg.photography/art" target="_self"><li>ART + DESIGN</li></a>
<a href="https://www.ivg.photography/earlywork" target="_self"><li>EARLY WORK</li></a>
<a href="https://www.ivg.photography/bio" target="_self"><li>BIO</li></a>
<a href="https://www.ivg.photography/contact" target="_self"><li>CONTACT</li></a>
</ul>
</div>
</nav>
</html>
<style>
body {
margin: 0;
padding: 0;
background: #0000000;
color: #cdcdcd;
font-family: "Arial Black", sans-serif;
overflow-x: hidden;
}
a {
text-decoration: none;
color: #ffffff;
transition: color 0.3s ease;
}
a:hover {
color: 5aa2e0;
font-size: 20px;
text-shadow: 2px 2px 4px #000000;
transition: all 0.5s;
transition-timing-function: ease-in-out;
}
.toggle {
display: block;
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
.toggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; 
z-index: 2;
-webkit-touch-callout: none;
}
.toggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
.toggle span:first-child {
transform-origin: 0% 0%;
}
.toggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
.toggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #ff0000;
}

.toggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
.toggle input:checked ~ span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}

.nav {
position: absolute;
width: 300px;
margin: -100px 0 0 0;
padding: 30px;
padding-top: 125px;
right: -100px;
border-radius: 0px 0px 00px 30px;
background: #05c8a1;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.nav li {
font-size: 25px;
padding: 5px 0;
}
.toggle input:checked ~ ul {
transform: scale(1, 1);
opacity: 1;
}
</style>
6

That part should be much closer to what you’re familiar with. You need to add a script:

<body>
<script type="text/javascript">
    //your script here
</script>
</body>