Hover Dropdown Menu Animations in Adobe Xd | Design Weekly

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 ก.ย. 2024

ความคิดเห็น • 119

  • @user-ik4ch7wl3l1
    @user-ik4ch7wl3l1 3 ปีที่แล้ว +2

    i've learned, many thx

  • @georgecatalinurs5057
    @georgecatalinurs5057 4 ปีที่แล้ว +7

    Man, this was my first thing done in Adobe.
    Thank you very much! All 3 schemes came out for me.

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +1

      I'm really glad that I could help you get started with Xd.

  • @vatsalshah9730
    @vatsalshah9730 4 ปีที่แล้ว +6

    1st one looks so seamless, it's awesome

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      I'm glad you like it!

  • @divyeshmehta8557
    @divyeshmehta8557 3 ปีที่แล้ว +1

    sir your all videos are good , i got complete guideline thank you so much and im your big fan

  • @SwapnilSingh4u
    @SwapnilSingh4u 3 ปีที่แล้ว

    Thank u brother, I was looking exactly for this since few days, now I got my answer, thanks

  • @alterakdraws9023
    @alterakdraws9023 3 ปีที่แล้ว

    that red button looks cool! I've seen a similar button but I think it was from your other video.
    Many of your videos have drop down tutorials, I think you have a specialty in that haha

  • @unplugged-sound
    @unplugged-sound 4 ปีที่แล้ว +1

    it's super great Punit, I love it

  • @CliqGamingMax
    @CliqGamingMax 7 หลายเดือนก่อน

    thanks bro! great video. easily digestible!

  • @saamira86
    @saamira86 11 หลายเดือนก่อน

    just subscribed after watching this cool tutorial

  • @pritamdeore6091
    @pritamdeore6091 4 ปีที่แล้ว +2

    No. 3 it looks awesome 👏✊👍
    But other animations are also best👍💯

  • @andrewburnley917
    @andrewburnley917 4 ปีที่แล้ว

    Great demo, very clear explanations and great ideas

  • @jenncar100
    @jenncar100 4 ปีที่แล้ว

    Wow! really good tutorial and cool design ideas. thank u very much.

  • @ramalsrougi
    @ramalsrougi 3 ปีที่แล้ว

    You're one of the best 😍😍 thank you ❤

  • @michelmazzek2493
    @michelmazzek2493 4 ปีที่แล้ว +1

    Perfect tutorial 😍
    Thank you

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +1

      You're most welcome!

  • @beckykenyon5608
    @beckykenyon5608 3 ปีที่แล้ว +4

    Great tutorial- thank you! One question... once you have your hover dropdown in place, is it possible in XD to click on one of the items listed to "select" it?

  • @amywinkelman4279
    @amywinkelman4279 3 ปีที่แล้ว

    thank you so much you saved me! this was so helpful!

  • @Shikarte
    @Shikarte 4 ปีที่แล้ว +1

    First one is my fav🥰🥰❤

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      Thank you for always watching my content honey!

  • @yuanlong9537
    @yuanlong9537 4 ปีที่แล้ว +1

    That's really cool !!

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      Thank you Yuan! I'm glad you liked it

  • @HaniHassan1
    @HaniHassan1 2 ปีที่แล้ว

    I like the normal/rest states of each, but the drop-down open state was boring due to all color choice after open state , try monochromatic or analogous harmony

  • @Taz.B
    @Taz.B 4 ปีที่แล้ว +1

    Number 2!

  • @woutvandesompele8310
    @woutvandesompele8310 3 ปีที่แล้ว +1

    Thanks a lot!!!

  • @rohitpanse7986
    @rohitpanse7986 4 ปีที่แล้ว +2

    2 looks cool..actually all of them😂

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      Hahaha, I'm glad you like them!

  • @alexl6189
    @alexl6189 4 ปีที่แล้ว +8

    What happens if you hover below the visible box in default state in your example (I noticed each time you hover, you approach hover target from the side and not from the bottom)? I followed your tutorial and realized that the entire footprint of the dropdown becomes a giant hover area, which renders the whole effort useless if I were to share this prototype. Looks like opacity technique makes dropdown transparent but sensitive to hover in default state. I played with layer visibility which works out nicely around hover target, but doesn't allow to hover over dropdown itself… Is there a method to make this dropdown to act as real world dropdown should? Thanks for the tutorial :)

  • @EllenMarie1708
    @EllenMarie1708 4 ปีที่แล้ว

    this is so helpful thank you so much

  • @jessica8268
    @jessica8268 4 ปีที่แล้ว +1

    thank you

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +1

      You're most welcome!

  • @davidfitcher2953
    @davidfitcher2953 4 ปีที่แล้ว

    Nice animation dude

  • @abdnahid
    @abdnahid 4 ปีที่แล้ว +1

    Amazing stuff

  • @k-r6465
    @k-r6465 ปีที่แล้ว

    number 5

  • @soundarraina2185
    @soundarraina2185 4 ปีที่แล้ว +1

    So cool

  • @sanaraheem5000
    @sanaraheem5000 3 ปีที่แล้ว

    New ideas to learn

  • @TheMusicrasel
    @TheMusicrasel 4 ปีที่แล้ว +1

    Thank you 😊

  • @karinebourasseau4625
    @karinebourasseau4625 4 ปีที่แล้ว +1

    merci!!! très bon tutoriel.

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +1

      You're welcome Karine! I'm glad you like my content

  • @beefykenny
    @beefykenny 4 ปีที่แล้ว

    number 3 my fav.

  • @spybooth1235
    @spybooth1235 4 ปีที่แล้ว +1

    Fucking goooood

  • @josekiabala12
    @josekiabala12 4 ปีที่แล้ว +1

    Number 3 is somple and minimalistic .

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      Thank you! Material design looks good.

  • @onestalgia
    @onestalgia 3 ปีที่แล้ว

    умничко! ))

  • @jeansimeonaser3402
    @jeansimeonaser3402 3 ปีที่แล้ว

    nice

  • @aud2ice
    @aud2ice 4 ปีที่แล้ว +1

    sso nice work

  • @anothergay3545
    @anothergay3545 4 ปีที่แล้ว +1

    how to make such things into html css

  • @gauravidesigns
    @gauravidesigns 2 ปีที่แล้ว

    wow 111k . 111 is my angel number 🤗

  • @davidpicarazzi
    @davidpicarazzi 4 ปีที่แล้ว

    Hey Punit, is there a way to make a drop down like this but have it so it pushes content down? For example, say you drop down City, but then a Town input under it would get pushed down when you click City?

  • @unknowngirl7940
    @unknowngirl7940 4 ปีที่แล้ว +1

    Instead of hover, I did the tap option instead. But its only letting me tap one to open the drop down.
    It wont let me tap back to close the drop down.
    How do i fix this?

    • @alhambra792
      @alhambra792 4 ปีที่แล้ว

      Have u found the solution? Im curious as well.

  • @hassuunna
    @hassuunna 4 ปีที่แล้ว +3

    Awesome tutorial sir
    A question: is there a trick to make this menu scrollable?
    just noticed something, I think it's not good UX to leave mask (in the default state ) in just white-space, so you might resize it to the button size
    and we always learn from you

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +4

      I have yet to try scrollable content with hover, let's see what I can come up with. Thank you for the constructive feedback.

  • @duynguyenminh4389
    @duynguyenminh4389 4 ปีที่แล้ว +1

    Great tut! Now i want put this dropdown box into the real layout? How to do that? Plz help me, i'm newbie. Thank a lot

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +1

      Just download the Adobe Xd file in the description. Then copy the component into your layout in Xd. This will allow you to place it anywhere.

  • @akhilnishad6149
    @akhilnishad6149 3 ปีที่แล้ว

    Can you make a hover state button clickable? I want the button to change colour and when I click it I want it to go to another artboard. Is it possible to do this?

  • @ionutzstoica
    @ionutzstoica 4 ปีที่แล้ว +1

    did you find a method to make the element in a drop-down menu hoverable?

  • @kalpitbothra2250
    @kalpitbothra2250 3 ปีที่แล้ว

    Hi Punit, I'm facing an issue and wanted to see if you have a work around for this. If the content behind the extended menu has any button or interaction, they are remain active. The hand cursor keeps showing up where such triggers exist behind the extended part. Is there a solution to avoid this?

  • @subhashrana6653
    @subhashrana6653 4 ปีที่แล้ว

    Hi, dear I have one question to understand, plz help to understand.. okay just like you made a drop down here with animation, but plz confirm how will we use this in android as a control???

    • @Rafael-Bravo
      @Rafael-Bravo 4 ปีที่แล้ว

      Maybe I'm wrong but I think there's no hover functionality in touch screens like iOS and androids devices... you'd have to make it tapable what it's actually easier (hovering states are hard in adobe xd and you can't do certain things yet, but you can make a tap animation and make sure you make notes that that is actually a hover animation and when you develope it you make it as a hover animation

  • @deepthoughts5x
    @deepthoughts5x 4 ปีที่แล้ว +1

    Can we add hover on list items .means can we add more components in one components.? Please tell me?

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +1

      There is no support for actual multi-hover animation. But I have worked on a small workaround for this. Check my latest video for it

    • @deepthoughts5x
      @deepthoughts5x 4 ปีที่แล้ว

      @@PunitChawla thanks

  • @Underhills
    @Underhills 4 ปีที่แล้ว

    So what if the drop down contains more list elements than possible to hide behind the element?

  • @shahryar.s
    @shahryar.s 4 ปีที่แล้ว +1

    How do I export animations from XD to Android Studio

  • @paulafuchs3666
    @paulafuchs3666 4 ปีที่แล้ว +1

    I have a question, at minute 3:40, I can't see the Component (Master) section, it's not visible for me. Is there a way to show it?

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +1

      Hi Paula. It's probably happening because either you don't have the latest update of xd, or the component hasn't been set up. try fixing these two, and let me know if you need help again

    • @paulafuchs3666
      @paulafuchs3666 4 ปีที่แล้ว +1

      @@PunitChawla thank you so much, I didn't have XD up to date lol thank you!!!

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      Most welcome!

  • @unknowngirl7940
    @unknowngirl7940 4 ปีที่แล้ว +1

    How do I do drop down that you have to click on manually and not hover because its a mobile app?

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +1

      Just change trigger from hover, to tap

    • @unknowngirl7940
      @unknowngirl7940 4 ปีที่แล้ว +1

      @@PunitChawla thank you so much

  • @thiru.c541
    @thiru.c541 3 ปีที่แล้ว

    How can I implement in android studio!?
    Pls anyone tell me😕

  • @venkkateshmg4850
    @venkkateshmg4850 3 ปีที่แล้ว

    Please some one tell me how to use this creative xd in android studio if i import its size is really big

  • @mayank_pandey
    @mayank_pandey 3 ปีที่แล้ว

    How can I implement in android studio

  • @deshawnphillips9374
    @deshawnphillips9374 5 หลายเดือนก่อน

    the link to project files is broken.

  • @wangzai3105
    @wangzai3105 4 ปีที่แล้ว

    How do I set component (master)? I don't know whether this is a plugin or something, please reply, thanks!

    • @kekksy
      @kekksy 4 ปีที่แล้ว

      update your XD

  • @599__tycs__amitjaiswar4
    @599__tycs__amitjaiswar4 3 ปีที่แล้ว

    sir your xd file link is may be expired so can you please resend it..?

  • @gabriellabuzejkatrads2725
    @gabriellabuzejkatrads2725 4 ปีที่แล้ว +1

    #2

  • @sarveshshelar7506
    @sarveshshelar7506 4 ปีที่แล้ว

    how to use it on web??

  • @someoneidkwho860
    @someoneidkwho860 ปีที่แล้ว +1

    2

  • @vendercentraldirectorylist5704
    @vendercentraldirectorylist5704 4 ปีที่แล้ว +1

    3

  • @psradebe
    @psradebe 4 ปีที่แล้ว +1

    1

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      That's my favorite too!

  • @rishabh117rules
    @rishabh117rules 4 ปีที่แล้ว +2

    Good tutorial, Just get rid of the fake accent.

  • @malenacadima2379
    @malenacadima2379 3 ปีที่แล้ว

    why this tutorial is english but its ittle is spanish ? :((((((((((((((((( idk

  • @larsnobel4279
    @larsnobel4279 4 ปีที่แล้ว

    Keep it simple goddamit. People can do thier styling themself. Just learn us the functionality and skip the shit man

  • @novhuon2939
    @novhuon2939 4 ปีที่แล้ว +1

    Thank you

  • @vumedialab1725
    @vumedialab1725 4 ปีที่แล้ว +1

    3

  • @dhruvprajapati6769
    @dhruvprajapati6769 4 ปีที่แล้ว +1

    2

  • @Ahmed-ezz
    @Ahmed-ezz 4 ปีที่แล้ว +1

    3

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      Yes! It's simple but effective

  • @DeepakRai-tf8un
    @DeepakRai-tf8un 4 ปีที่แล้ว +1

    3

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +1

      I'm glad you liked it!

  • @md.shamimmozumder8281
    @md.shamimmozumder8281 4 ปีที่แล้ว +1

    3

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      I'm glad you liked it!

  • @MrSameer1984
    @MrSameer1984 4 ปีที่แล้ว +1

    3

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +1

      I'm happy you liked it!

  • @lolacademy-yn
    @lolacademy-yn 4 ปีที่แล้ว +1

    3

  • @MrPrabhuTube
    @MrPrabhuTube 4 ปีที่แล้ว +1

    3

  • @hadilchechu
    @hadilchechu 4 ปีที่แล้ว +1

    3

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      I'm glad you liked it

  • @TheMusicrasel
    @TheMusicrasel 4 ปีที่แล้ว +1

    3

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      I'm glad you liked it!