From Adobe XD Prototype to HTML, CSS & JS - Making an Animated Mega Menu
610,490
Published 2018-10-31
Today's Question: Do you use any tools or plugins for CSS animations?
-- It's a lengthy one today! But a great one, because many of you ask me how to take your UI prototypes made in Adobe XD and make them a reality in the browser. Today, I'm delivering! We're going to create a large overlay menu (sometimes referred to as a "mega menu") first in Adobe XD, exactly as it should appear in the browser. Then, we'll step inside the code editor and make it a reality with HTML, CSS and vanilla JavaScript.
So, instead of the usual formula of just covering an html tutorial, css tutorial, javascript tutorial, or adobe xd tutorial -- We're covering everything in mega tutorial!
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com/
My personal FB account: fb.com/logodesigner
Coursetro FB: fb.com/coursetro
Coursetro's Twitter: twitter.com/designcoursecom
Join my Discord! discord.gg/a27CKAF
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
All Comments (21)
-
Likey? Subscribe! - My answer for today's question: Honestly, I don't use any plugins for CSS animations. I tried keyframes.app/ once and covered it, but I never found myself using it again much. There are a few tools online that I use (such as the one I covered today) just for some quick animation ideas. You?
-
love how short & sweet and to the point you are, don't have to skip through like other tutorials, plus your tech-savvy, great videos, really appreciate them!
-
I just played around with Anime.js yesterday. Awesome tutorial. Makes me interested in the design tools for a change.
-
You are legit the best design instructor I've followed!! Also love the humor! I don't usually use plugins for CSS animations... unless someone references one to me then I usually only use it once or twice
-
Gary you have helped many people feel young again with your spirit and energy to help teach this stuff. Keep up the great work. I have been a developer for nearly 30 years and you allow me to keep my skills sharp.
-
Gary, this is a great presentation of what a design to code workflow should be. Thank you for making it! I got to practice my css animations and emmet commands also while following the video. It's a great time to be a developer, considering people like you exist to instruct us with free, simple tools like Adobe XD and VS Code.
-
Great tutorial. This type of things can be applied to page transitions also.
-
YOU ARE THE BEST, KEEP WORKING, absolutely want some ui ux video from you
-
Perfect! I loved it! Simple, well explained and direct to the point. Congratz
-
I came to this video from Recommendations. Thanks for your efforts, I want to point out to an important thing that you missed. You used an
to act as a toggle for the menu, it's better and more accessible to use
-
Thank you for typing the code then immediately showing the result. Makes learning much easier.
-
Thank you for the video! You nicely combined how to use HTML, CSS, and JS in one place. And please keep talking. It really helps newbies to understand what you are doing.
-
after your vid i have great insight into the whole process from prototyping to coding ... well done
-
Yet another great tutorial! thank you so much, I've been struggling implement a nice slide in navbar menu. thanks a lot!
-
It is great and clear tutorial specifically for the biggers, thanks.
-
Wow, how cool !! My congratulations, I'm very happy to see this video lesson helped me more, congratulations.
-
To anyone who wants an animation when closing, here are the steps: 1. Just duplicate the "overlay" artboard 2. Reposition it somewhere 3. Delete the trigger from the new artboard to "overlay all" (The trigger will be duplicated along with the artboard, so you have to delete it) 4. Create a "tap" trigger from the close button in "overlay all" to the new artboard 5. Change "Ease In-Out" to "Ease Out", keep the rest of the settings 6. Create a "time" trigger from the new artboard to "home" 7. Change "Ease In-Out" to "Ease Out", keep the rest of the settings
-
Besides a great designer, you are an awesome teacher, keep it up!
-
I'm getting inspired with this video and you see how chill he is keep it up bro
-
Thanks for this awesome tutorial!
