- This topic has 7 replies, 2 voices, and was last updated 3 years, 4 months ago by
Tom.
-
AuthorPosts
-
September 16, 2019 at 3:35 pm #1011073
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?)
ThanksSeptember 17, 2019 at 10:19 am #1011821Tom
Lead DeveloperLead DeveloperHi 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-developmentSeptember 23, 2019 at 3:27 am #1016447JBD
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.September 23, 2019 at 10:10 am #1016918Tom
Lead DeveloperLead DeveloperDo 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-developmentSeptember 23, 2019 at 12:35 pm #1017028JBD
I guess something like this. But with option to work with sub menus.
September 23, 2019 at 4:21 pm #1017152Tom
Lead DeveloperLead DeveloperIs 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-developmentSeptember 23, 2019 at 5:02 pm #1017163JBD
I think these are interesting options
September 24, 2019 at 9:23 am #1017814Tom
Lead DeveloperLead DeveloperGive 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 -
AuthorPosts
- You must be logged in to reply to this topic.