Hamburger menu animieren

General
1

Hello Community,

I would like to animate the Hamburger menu under Bootstrap 5.

I already got the actual animation, but I would like the menu icon to return to its original position as soon as a menu item has been selected.

In my case, the display only goes back to its original position when I click the menu icon again.

You can find the sample at: Test

I would be very happy about a solution to my problem.

Many thanks!

2

Hi wgk,
I have the impression that sometimes some menu items (for example sometimes while clicking from menu item 3 to 4) - if I understand you correctly - are the way you want them to be. I hope this can help you a little to find the hook.

1 Like
3

Hi @wgk,
Basically you need to toggle the open class on the span with a class of menu-btn. Right now, clicking on the button itself toggles the open class, but the menu items do not. You can just modify the JavaScript that you have for making the menu show and hide. Do you want to give a try at modifying the code first?
Cheers,
Bob

1 Like
4

Hello Bob,

thank you for the info.

Unfortunately, I don’t really have a clue about Java Script yet, so I’m glad I got that far.

I would therefore be very happy if you can give me a little support.

Thank you very much!

wgk

5

Hallo 7at1blow,

thanks for your post.

A few pictures to clarify

Desired functionality:
1.) When the menu is closed, the hamburger is displayed

001
001799×75 2.96 KB

  1. when you click on the hamburger, the popup menu opens and the hamburger becomes an “X”

    002
    002788×334 10.4 KB

  2. When you select a menu item, you jump to the corresponding anchor,

    003
    003788×334 10.9 KB

and the menu closes and the hamburgers should appear again

004
004842×179 28.5 KB

6

Hi @wgk,
This should work for you.
First - give the span with a class of menu-btn an id of menuButton
Second - change out your menu-close.js code with:

let navItems = document.querySelectorAll('.close-item');
let navClose = document.querySelector('.navbar-collapse');
let menuButton = document.getElementById('menu-button');
navItems.forEach(item => {
    item.addEventListener('click', (e) => {
        if (navClose.classList.contains('show')) {
            navClose.classList.remove('show');
        }
        if (menuButton.classList.contains('open')) {
            menuButton.classList.remove('open');
        }
    });
});

Cheers,
Bob

1 Like
7

Hello Bob,

thank you for your help!

I tried to do it this way, but unfortunately it doesn’t work for me yet - have I misunderstood something?

The first time it works, but as soon as I press the menu again, it no longer works for me!

The current version is available as a test under the well-known link.

Best wishes
wgk

8

Hi @wgk,
My bad - typing too fast without the brain engaged!!
The id of the span should be menu-button not menuButton.
Sorry,
Bob

1 Like
9

Hello Bob,

this was definitely a big step in the right direction :slight_smile:

Now when I select a menu item, the popup menu closes and the hamburger reappears.

But there is still one problem: If I now click on the hamburger again to select a menu item, the hamburger does not change its appearance and the change to the “X” is not completed.

Another click and the change works again as it should…

Do you have any idea how to fix this? That would be then as I would wish it.

Thank you very much for the great support.

Many greetings
wgk

10

Hello everyone,

does anyone else have an idea why the menu doesn’t always behave the same way and therefore has “dropouts” every now and then?

I have the impression that only every “second” menu call is executed with the desired function.

Pass 1:
Menu call changes the hamburger to an X and back to hamburger after closing.

Pass 2:
Menu call does not change the hamburger to an X and and the hamburger remains unchanged all the time

Pass 3:
Menu call changes the hamburger back to an X and back to the hamburger after closing.
etc…

Thank you very much for the support so far!

Many greetings
wgk

11

Hi @wgk,
More fun with hamburgers! So, I didn’t look at the code you had added to the page to open and close the menu. I thought it was a normal Bootstrap toggle. So, the reason the opening is getting out of synch is that your other JS is using a variable to keep track of whether the menu is open or not. The closing of the menu by clicking on an item doesn’t change that variable, but clicking on the hamburger icon does. I would get rid of the main.js file and change it to:

let navItems = document.querySelectorAll('.close-item');
let navClose = document.querySelector('.navbar-collapse');
let menuButton = document.getElementById('menu-button');
menuButton.addEventListener('click', (e) => {
    menuButton.classList.toggle('open');
 });
navItems.forEach(item => {
    item.addEventListener('click', (e) => {
        navClose.classList.toggle('show');
        menuButton.classList.toggle('open');
    });
});

I think that should work for you.
Cheers,
Bob

1 Like
12

Hello Bob,

Thank you very much for your information:

I have deleted the file “main.js” and changed the file “menu-close.js” according to your instructions.

Unfortunately, neither function works any more.

The menu no longer closes and the hamburger is no longer replaced by an “X” as soon as the menu is activated.

Either I didn’t understand your mail correctly and did something wrong, or there is still a trap in the code somewhere.

You can find the old page here and the new, modified version here.

Many greetings
wgk

13

Hi @wgk,
I think you forgot to add the id to the button on your new page.
Bob

1 Like
14

Hello Bob,

I had only changed the specified data during the last “change”, I had not done anything to the menu itself-.

Now I have given the button the ID “menu-button” (I hope I have understood this correctly) and reinstalled the page on the server.

Unfortunately, I can’t see any change from the previous version.

Have I done or understood something wrong?

Sorry for asking all the time, but I am very grateful for the great support.

Best regards
wgk

15

Hi @wgk,
The id should be added to the the the span with the class ‘menu-btn’ just like above. Sorry I was a little unclear.
Cheers,
Bob

1 Like
16

Hello Bob,

since I’m not very familiar with such things (I’m gradually teaching myself a little bit), I may not have understood it the way you meant it. Even now I had to think a bit about what to do :wink:

I have now added the new value to the line: "span class=“menu-btn”.
So now the line is: “span class=“menu-btn” id=“menu-button”” and lo and behold - it seems to finally work the way I wanted it to.

You have helped me a lot with this and I would like to thank you very much for that.

So thank you very much for the great support and also for your patience. Without your support I would never have managed it.

Thank you!

wgk

2 Likes