Hamburger icon customisation and animation

[JBD]

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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[JBD]

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.

[Tom]

Do you have any examples of the animation you’re wanting to achieve?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[JBD]

I guess something like this. But with option to work with sub menus.

[Tom]

Is that a page I can take a look at? It would help to see the CSS they’re using.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[JBD]

I think these are interesting options

https://codepen.io/danbhala/pen/EKoNrO

https://codepen.io/danbhala/pen/EKoNrO

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts