Archived topic
Hamburger icon customisation and animation
7 replies · Started by JBD on September 16, 2019
Hi
Could you help me to create customised hamburger menu, with middle line offset to the right by a
eg
-
-
-
Also, is there a way to create "nolink" menu items (apart from custom # link and unclickable class
.unclickable > a:hover {
cursor: default;
}
Finally, is there a way to animate the off canvas drop down menu? (when sub menus expand and collapse?)
Thanks
Hi there,
Animated hamburgers are hard to achieve, but this topic should get you started: https://generatepress.com/forums/topic/spinning-hamburger/#post-976278
Once you have that working, we should be able to adjust the lines to achieve what you're after.
Let's work on one thing at a time - once we complete the first thing, we'll move onto the next questions.
Let me know :)
Thanks,
Its not the hamburger icon I need to animate (but the code is useful so thanks), it was the actual off canvas menu I want to animate, eg when a menu item is expanded in the off canvas menu.
Do you have any examples of the animation you're wanting to achieve?
I guess something like this. But with option to work with sub menus.
Is that a page I can take a look at? It would help to see the CSS they're using.
I think these are interesting options
Give this a shot:
.slideout-menu {
transform: translateY(-100px);
opacity: 0;
transition: transform 400ms ease-in-out, opacity 500ms ease-in-out;
}
.slide-opened .slideout-menu {
transform: translateY(0);
opacity: 1;
}