I suspect this is me entirely lacking logic, rather than a technical issue:
I’m wanting a full screen menu on my website, but if I place it over my main page, it stops me from being able to click on any of the links on the page whilst the menu is closed. Equally, if I place the menu behind the main page - the links on the main page work but the menu links do not function.
Here are some screenshots of what I have tried (Text animation div is the clickable content on my main page, Menu div is the full screen menu and link block is the logo that opens the menu):
Quite a few things I’ve noticed in your animation. You currently have a “Menu Div” visible at all times, and what you’re basically doing, is making the content inside the “Menu Div” appear on click.
What you should be doing, is also affecting the actual “Menu Div” itself and not “MenuItems”. Therefore, when the menu opens, the Menu Div should become visible, whereas when the menu closes, it should go back to hidden so it doesn’t get in the way.
I think what you’re also missing in your animation is an “initial state”. When you create an animation for the menu opening, the “Menu Div” element should have an initial state of hidden, and then change to block/flex. It should also have a higher z-index so it stays above your “Text animation div”. So here’s what happens:
When the site loads, the “Menu div” has a display of none due to the initial state that you set.
When you click on the logo that opens the menu, the “Menu div” appears on top of the “Text animation div”. During this time, items inside the menu div will be clickable, and those inside the text animation div won’t.
When you close the menu, the menu div should once again have a display of none, which will send it back to its initial state.
This is the cycle that should be taking place. Hope it all make sense! You should try it out and let me know if it worked out for you. If not, I’d be glad to hear what went wrong and see if I can be of more help.
Thank you so much, I knew it was something relatively simple, I just couldn’t put my finger on it.
The menu function works perfectly after making those changes!
Thank you so much for helping me with the layout of my interactive menu. I’ve just spotted another issue, I was wondering if you’d be able to help me with?
I have the animation set so when the logo is clicked the menu opens, and on second click it closes. However, without refreshing the page it cannot be opened for a second time.
I suspect this is to do with the first and second click function?
I guess yeah, it does have something to do with the first and second click function. Are you able to provide a preview link where I could see what’s happening? I think this one’s a tiny issue as well and remember coming across it not too long ago!
Ah, not just me then!
I tried playing around with the initial state to try fix the issue, but that just broke the animation ha
Sorry, I thought I’d included one!
Just checked out your preview link and you’re going to chuckle when I tell you what’s wrong with your menu open/close animation
You have an animation called “MenuItemsAppear” that opens your “Menu Div”, changing its display to block. Your “MenuItemsDisappear” animation is where the problem is. Instead of making the same “Menu Div” element go back to hidden, you’re affecting a different div block called “Menu Items”.
So all you really need to do is in your “MenuItemsDisappear” animation, delete the “Menu Items” action and set “Menu Div” to hidden. That should do it.
