So I created a menu that pops out when you click on the trigger–the trigger is the “Work” button. So click on the word “Work” and my menu will slide out from the left side. When you first enter my site, you can use the menu to navigate to pages containing my work samples. There are 3 work sample pages total at the moment. Here is where it gets messy:
The navigation works perfectly the first time. It leads me to clean project pages. But if I use it to navigate back to a page I was already on, it will take me to that page with the menu in the state I last left it–already open. I want it to take me to the page without the menu already being opened up. I understand why the menu is still open --it’s because I only animated it to appear on click but there’s no action to make it disappear. It’s tricky because animations are limited to one gesture type per widget. Once you’ve used up Hover, Click, Load, and Scroll that’s it. At the moment Click, Hover, and Load commands are already used up to give my menu some fun animation/ micro interactions.
Ideally, the menu would close itself after you choose which page to go to but I can’t program another “click” animation with a separate trigger and a completely separate set of animations. Does anyone have thoughts on this? Did I build my menu incorrectly? I’m not 100% sure on if I should be using a hotspot in this instance. I looked at the tutorial for hotspots from readymag but I’m not sure how to apply it to this scenario and I admit I feel silly…
The menu closes if you just click on “work” again but it’s just annoying and not very good ux/ui flow for the menu to already be open when you get to the page. It should only appear when summoned ya know? I’m including a screenshot of my menu so you guys can get a visual on how I’ve built it. Thanks ahead of time for any thoughts!
