Adobe Tutorials Adobe Dreamweaver From Adobe XD Prototype to HTML, CSS & JS – Making an Animated Mega Menu

From Adobe XD Prototype to HTML, CSS & JS – Making an Animated Mega Menu

Check out –
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…

36 thoughts on “From Adobe XD Prototype to HTML, CSS & JS – Making an Animated Mega Menu”

  1. DesignCourse says:

    Likey? Subscribe! – My answer for today's question: Honestly, I don't use any plugins for CSS animations. I tried 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?

  2. Eric Gamble says:

    LOVED The Video!!! Kudos! Just wondering, what would have happened if you exported from xD to HTML?

  3. Very Insightful……Must Learn XD To The Max…..

  4. No Skip, just concentrate, totally, Inspired me so much ……Love πŸ’™πŸ’™πŸ’™πŸ’™ …..From India πŸ’™πŸ’™πŸ’™This is the video, I really want for, which shows me how Adobe XD works and it'll help me to do my career right, love from India

  5. I loved this video. For me, web design is the final product that I can view on my browser. Prototyping + Coding is just what I was looking for!

  6. why can't the computer just takes the god damn adobe xd file and turn into a website .. why do we have to run horrible codes xD

  7. Alexa says:

    Love your vids!

  8. I just looked at the bottom of the scrimba ui design course. XD

  9. Kido Ermaya says:

    Good Video and Thank You

  10. J says:

    Great video. Informative. As a software engineer/tech lead, my take is that I unfortunately would keep going straight to code and not learn Adobe XD given it's nothing more than a way for non-coders to express ideas πŸ™ πŸ™ Really looking for something that can boost my design abilities. I'm neither great at CSS nor SVG nor anything of the likes..

  11. Rajesh Kumar says:

    thank you for your help

  12. 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!

  13. Hey there,
    Would it be practical if I were to design a whole website in Adobe XD?
    I don't know any of the coding but couldn't I bypass this by converting the website to HTML, CSS and JS?
    Designing the whole website includes processing payments, adding functionality in…

    I'm quite new to this so all input and advice would be extremely appreciated!
    Thank you!

  14. Ζ΅iRro says:

    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

  15. Razi Tambosi says:

    How can we code Adobe Xd Mobile Application ?

  16. This is doing it all by hand… shouldn't there be a way for you to export FROM Adobe XD?

  17. Ayo Olaniyi says:

    Anyone with the code to reverse the menu effect??? plssss

  18. do you hate bootstrap?

  19. Pyrapon says:

    Hey there, I'm trying to follow along in Adobe XD 2020, and the animation options seem different. I don't seem to have an option to use Time as the trigger for the menu animation. Is this something that they have removed or changed in 2020? Or am I perhaps overlooking something?

  20. you know a lot of perfect and professional tricks. please learn us more. 2^1000 like πŸ˜‰

  21. teriyakov says:

    For some reason I thought the css would be auto generated form the images and the transitions would be converted into the specific html5 animation calls…….. Wishful thinking, lol
    I guess its a case of creating the layout and writing the markup to suit separately…….I not to stop being a lazy developer.

  22. Magstrauss says:

    Excelent Tutorial…..

  23. Perfect! I loved it! Simple, well explained and direct to the point. Congratz

  24. 7 Discover says:

    thank you πŸ‘

  25. Ridham Karia says:

    Why I am not getting menu bar in my adobe xd?

  26. Drew Norman says:

    I wish you would have provided a link to the code or XD files.

  27. Drew Norman says:

    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.

  28. installing plugin "web export" failed err connecting internet… , would u please send/upload zip file of plugin dir,,



  29. Chairul Azmi says:

    are you slways using cms when build website sir ? or just static web for example like company profile website ?

    please answer

  30. Bagya raman says:

    I am creating web page withing one page and I would to do prototype within that page. So how can I do it

  31. Aziz Kosber says:

    Thank you good sir!

  32. I''m using XD 2019 and I'm not seeing time as an animation trigger. Someone please help

  33. great video! keep up the good work!

  34. Hesam Alavi says:

    Hey Gary, I followed your instructions to the t and went back and forth for a few hours, but some of the css animations and elements do not work like yours. Is it possible to post the html and css code so I could compare please? it is driving me bunkers :D. AND THANKS VERY MUCH FOR BEING THE MAN.

Leave a Reply

Your email address will not be published. Required fields are marked *