This is absolutely straightforward and no confusion whatsoever in demonstrating the tools as well as functioning of the respective interactions. Thank you!🙂
Hi, how do you avoid whole area of the drop down menu becoming active button? Even though it's invisible it still acts as an area, for example I only need ''shop'' button area to be active
That's a great question, unfortunately I don't think Adobe has worked this out yet. Wherever the box is for the component, the drop down will show when you hover over it. The only hack I can think of to avoid it is to use 2 artboards to create the hover interaction rather than using one artboard with component states.
Effective tutorial. Clearly spoken and not too fast. For the foreigners amongst us easy to follow. But 1 question; how do you link the text items within the pulldown to their specific pages? I tried this before making it a component. But it didn't work
Thanks Hank 🙂 It’s my goal to be as clear and brief as possible, I know I appreciate it in tutorials. The linking is done in the prototyping mode (so switch from design to prototyping). Once there and you start hovering over things, you’ll see little arrows popping up that you drag to connect to your destination. So you will need to have an ready designed the other pages you want to connect them to. You’ll see options on the right panel for how to customize the interactions.
Great tutorial, very straight to the point! One problem I'm having is that the dropdown menu also apears when I'm hovering over the (invisible) menu itself. I'd like for the menu to only appear when hovering over the text... Does anyone know if I can do something about that?
I’ve addressed this in similar comments. Unfortunately it’s just the way it is with XD. Even though it’s “invisible” it’s still there and therefore recognized in the interaction as you hover. Hopefully they come up with a workaround for it.
Hi, bravo, simple and clear, one can understand better than all the other tutorials. Thanks a lot. But I have a little problem here in doing the copy part, because the Component, does it because I use Mac? It doesn't work as your show...
Hi Monica, how do you ensure that the drop down only appears when you hover over the title ie 'SHOP'. Currently my drop down appears when I hover anywhere over the entire green component box. Thanks
Hi Anna, unfortunately, there's no way around this. Wherever the box is, the hover action will take place. A smaller component box equals a smaller hover area.
@@monicasdesignprocess Hey thank you for the videos and responding. Just a follow up, does this mean even hovering over the top of the ice cream will trigger the locations? As the component extends into that area
sorry my english bad... prototype -> double click compotent for see inside elements -> click menu text (dont all elements) -> animate action eese in out... important: click menu text (dont all elements) ... i dont know, maybe new update :))) I hope it was clear...
This was very useful, but then now even when I hoover under the word, "shop", the drop down list shows. How to make it show the list only when I hoover at the word "shop"?
hello Dear monica i will try to implement your drop down menu tutorial its working too much easy but the main thing is when we put a curser in any place that we draw a rectangle menu will show ??? any suggestion regarding this problem and thank you for making this video
One small question, if we are designing a website where there are miltiple subnavigations, for example in the above site if there is another subnavigation for Pints or new flavours then how to prototype it?
Same concept, for pints you would create a new hover state and design those menu items. But creating a drop down within a drop down wouldn’t be the best user experience (especially when you think about mobile). I would only create one level of drop down menu and then show the other flavors on the actual webpage for pints, instead of within navigation. You want to keep menus simple for the user. It’s common to also create a secondary footer menu for less viewed pages.
@@monicasdesignprocess thanks for the solution but it is inheriting the parent property; for example working on a ecommerce website whete there r multiple categories and for each sub category again different sub categories (flipkart, udemy.com); while trying to replicate the subnavigation hover is inheriting the same property of the main navigation hover; is there a way to resolve it?
Thanks Lady, but when I move the cursor from down to up, the menu appears before I hover over on the menu button. Please can you make another tutorial about the drop down menu frequently used in the Website Design. @@monicasdesignprocess
@@monicasdesignprocess great.. if i design a 1-2 sites (for only information only) do i still need coding done? where do you built this site ? thank for help
Hi Monica please help me with this one.i have a drop down menu. When i hover over the list items of the drop-down menu the hower state works.now i dont know how to link that particular list item to a particular page. Please guide me
In prototype mode, click on the item you want to connect to the page and you'll notice a blue arrow. Click and drag this to the artboard you want to connect it with.
Hi, Great Video, But hope you don't mind. I do have a question. I followed the steps you have shown, however, when I hover under the top nav bar where i have created the drop down menu, the list pops up. It pops up even though the mouse isn't in the correct place. Any advice on how to rectiy this? Hope to hear from you.
Hello Monica, Thank you for the video demonstration. I am not able to accomplish a hove drop down menu given your instruction. My issue is when I change the opacity of the drop down menu to 0% on default state, the hove state also changes to 0% opacity. I can not seem to get it so that the hove state is 100% and the default state is 0%. Are you able to determine what I am doing wrong? Do you off 1-on-1 sessions to help me learn Adobe XD? I greatly appreciate the time and effort you put in to your UA-cam channel.
Thanks for the kind words, Theo! Yes, I do offer one-on-one sessions if that's something you're still interested in. I'll reply with more info to your email!
When you have the component selected, is the bounding box green with a triangle on the top left corner? That’s how you know if you successfully made it into a component.
Well for starters, I’m not Anna. My name is clearly stated within my UA-cam channel name, also mentioned in the description, website, social links, etc.
@@БогданЯворський-ш9к Which plugin are you using to export the HTML? I've never used it before but I tried Web Export and it works for the HTML and CSS. But it's true when multiple animations or multiple destinations are within the same page, it doesn't work properly. My suggestion is to use this plugin to export the basics then build your page on top of that and fix where needed. But don't use it as a final solution. If you want to share your prototype for feedback, use the share option in XD rather than the HTML export. Hopefully that helps.
@@monicasdesignprocess I'm using a web export, idk but I just don't want to show a list when I export in html and css. Thank you for you proposition and advice.
Ive been trying to figure this out for nearly two hours, this is so fast and you skip steps. Plus after you set up the drop down menu, prototyping docent allow you to click each drop down menu and select your page it should bring you. NOT HELPFUL !????
I didn’t skip steps. That’s currently how it works for a drop down prototype in XD, unfortunately it’s a little messy when selecting the pages due to grouping elements. I recommend listening for one step, pause while you do that step on your own computer, press play to hear the next step, etc. You can’t expect to watch a complex protype tutorial once and grasp the concept immediately. Most need to pause, rewatch, and put it into practice.
You really need to slow down and describe exactly what you are doing. I spent a good 20 minutes figuring out the first step as it kept switching out of component mode. And then another 10 minutes trying to select more than one item. You did these two actions in 3 seconds. Please please slow down and tell us what keys you are pressing.
Use the pause button and replay as many times as you need to. You'll notice from most of the other comments people appreciate how quick and easy my tutorials are (rather than adding fluff or wasting your time). This is geared toward someone who has a basic understanding of Adobe XD. If you're new to the program, I recommend following along with the longer in-depth tutorial I created for how to get started with Adobe XD first. But thanks for sharing the feedback. I'll work on creating specific, longer, slower-paced tutorials in the future.
@@monicasdesignprocess Try saying "Double click inside the component area. Select one item. Hold down shift and click each item. Then set opacity to 0. I can pause 100 times and not figure this out.
Fantastic demo. Quick and to the point. Exactly what busy designers need. I wish more UA-camrs would understand this!
I completely agree 🙂 Thanks for the kind words!
This is absolutely straightforward and no confusion whatsoever in demonstrating the tools as well as functioning of the respective interactions. Thank you!🙂
You’re welcome! Thanks for sharing the kind words, I appreciate it 😊
Omg Lifesaver. Stright to point and no extra stuff like backgrounds and stuff.
You're welcome! Happy to hear the video helped, thanks for watching :D
Love this short and to the point tutorials
Thank you Sawan! 🙂
Brilliant tutorial. Before yours, the half-dozen other tutorials I stumbled on missed the mark. Thank you for being to-the-point
You're welcome, glad it was helpful!
Finally a straight to the point video.
Thank you 😀I try to break it down into simple steps and get right to the point.
Hi, how do you avoid whole area of the drop down menu becoming active button? Even though it's invisible it still acts as an area, for example I only need ''shop'' button area to be active
That's a great question, unfortunately I don't think Adobe has worked this out yet. Wherever the box is for the component, the drop down will show when you hover over it.
The only hack I can think of to avoid it is to use 2 artboards to create the hover interaction rather than using one artboard with component states.
I love quick and effective tutorials like this. You just got a subscriber here! Good work Monica.
Thanks Jeremy! Happy to have you here 🙂
monica, thank you for the content create!
Thanks for the kind words, I appreciate it ☺️
Best direct tutorial, thank you so much!!
Thanks for the kind words Canada! 🙂
Very useful. Thank you!
Happy to help! Thanks for watching
Thank you for this video Monica. Really helpful, short and straightforward! Good job, I'm enjoying working with Adobe XD so far.
Thanks for the kind words Niro, glad the video helped!
So simple to understand. So easy to apply. Thanks for cutting through the noise for me!
You’re welcome! Happy to hear the video helped 🙂
thank you so much for your tutorial
You’re welcome! I hope it helped you out 😃
Thank you thank you! This is the only video that answered my question!
Glad to hear this helped Emily! 🙂
It is like xd bites short and productive. Thank you! Explaining only what is necessary.
Love that, XD bites! Thanks for watching :)
Effective tutorial. Clearly spoken and not too fast. For the foreigners amongst us easy to follow. But 1 question; how do you link the text items within the pulldown to their specific pages? I tried this before making it a component. But it didn't work
Thanks Hank 🙂 It’s my goal to be as clear and brief as possible, I know I appreciate it in tutorials. The linking is done in the prototyping mode (so switch from design to prototyping). Once there and you start hovering over things, you’ll see little arrows popping up that you drag to connect to your destination. So you will need to have an ready designed the other pages you want to connect them to. You’ll see options on the right panel for how to customize the interactions.
Thank you mam it was really helpful 😊
Thanks! Glad to hear the video helped you 🙂
Great tutorial, very straight to the point! One problem I'm having is that the dropdown menu also apears when I'm hovering over the (invisible) menu itself. I'd like for the menu to only appear when hovering over the text... Does anyone know if I can do something about that?
I’ve addressed this in similar comments. Unfortunately it’s just the way it is with XD. Even though it’s “invisible” it’s still there and therefore recognized in the interaction as you hover. Hopefully they come up with a workaround for it.
@@monicasdesignprocess Ohh, that's too bad. Thanks anyway!
Thanks a lot!
You're welcome! Thanks for watching :)
Hi, bravo, simple and clear, one can understand better than all the other tutorials. Thanks a lot. But I have a little problem here in doing the copy part, because the Component, does it because I use Mac? It doesn't work as your show...
Any shortcuts I mention are for a Mac since that’s what I use. If you’re using a PC, it’s usually similar but just swap Command for Control or Alt.
very nice...thanks
You’re welcome 🙂
Best tutorial
Thanks Sreehari, I appreciate it 😃
Hi Monica, how do you ensure that the drop down only appears when you hover over the title ie 'SHOP'. Currently my drop down appears when I hover anywhere over the entire green component box. Thanks
Hi Anna, unfortunately, there's no way around this. Wherever the box is, the hover action will take place. A smaller component box equals a smaller hover area.
@@monicasdesignprocess Hey thank you for the videos and responding. Just a follow up, does this mean even hovering over the top of the ice cream will trigger the locations? As the component extends into that area
@@monicasdesignprocess Thank you!
sorry my english bad... prototype -> double click compotent for see inside elements -> click menu text (dont all elements) -> animate action eese in out... important: click menu text (dont all elements) ... i dont know, maybe new update :))) I hope it was clear...
Nicely done! (from one teacher to another!)
Thanks Angela! 🙂 what do you teach?
@@monicasdesignprocess Interactive media, web dev and animation. Thanks for asking!
simple and straight 2 da point, imma sub now~ im always laughing or smiling when reading Adobe 'XD'
Thanks for watching! :)
Thank you so much!!! that was so clear and easy to follow and most importantly SHORT and straight to the point. THANKS AGAIN
You’re so welcome!! Happy to help 🙂
thank you very much. you saved tons of time. keep posting
Glad to help! :)
thanks i just learn it
Happy to hear it! 🙂
Thank you Worked For me :)
Perfect! Glad to hear it, thanks for watching 🙂
Thank you
You’re welcome! Thanks for watching 🙂
Love your videos! Straight to point 👏🏽👏🏽👏🏽👏🏽
Thank you Nicole 🙂
This was very useful, but then now even when I hoover under the word, "shop", the drop down list shows. How to make it show the list only when I hoover at the word "shop"?
I’ve answered this in the comments, many others have asked the same 😅 unfortunately there is no solution. Hopefully Adobe works on this.
@@monicasdesignprocess Thank you so much, I should have checked the other comments before! God bless Monica.
Thank you for a great and quick tutorial!
You’re welcome, Chris 😊
hello Dear monica i will try to implement your drop down menu tutorial its working too much easy but the main thing is when we put a curser in any place that we draw a rectangle menu will show ??? any suggestion regarding this problem and thank you for making this video
You’re correct, anywhere the component lies, will technically bring down the drop down menu. There’s no way to get around it unfortunately.
@@monicasdesignprocess thank you for your consideration
This was so helpful thank you!
Of course! So glad it help, thanks for watching :)
One small question, if we are designing a website where there are miltiple subnavigations, for example in the above site if there is another subnavigation for Pints or new flavours then how to prototype it?
Same concept, for pints you would create a new hover state and design those menu items. But creating a drop down within a drop down wouldn’t be the best user experience (especially when you think about mobile). I would only create one level of drop down menu and then show the other flavors on the actual webpage for pints, instead of within navigation. You want to keep menus simple for the user. It’s common to also create a secondary footer menu for less viewed pages.
@@monicasdesignprocess thanks for the solution but it is inheriting the parent property; for example working on a ecommerce website whete there r multiple categories and for each sub category again different sub categories (flipkart, udemy.com); while trying to replicate the subnavigation hover is inheriting the same property of the main navigation hover; is there a way to resolve it?
Please move your mouse pointer from down to Up in order to hover over or click on Button menu.
You don’t need to move the cursor in order to activate the hover state, just having the cursor on the button activates hover.
Thanks Lady, but when I move the cursor from down to up, the menu appears before I hover over on the menu button.
Please can you make another tutorial about the drop down menu frequently used in the Website Design.
@@monicasdesignprocess
It’s a glitch with how the components work in Adobe XD, it shows up when hovering over all elements in the group even if they aren’t “visible”.
amazing video - so we dont need to make various artboards for this right ? we can do it all in 1 artboard ? please help
Yes, the tutorial shares exactly how to do it all in one artboard.
@@monicasdesignprocess great.. if i design a 1-2 sites (for only information only) do i still need coding done? where do you built this site ? thank for help
Is there anyway i can do this faster? duplicate the component instead of duplicate its layers then create new comp?
Unfortunately at this time there isn’t. But Adobe XD is constantly updating so maybe in the future!
Hi Monica please help me with this one.i have a drop down menu. When i hover over the list items of the drop-down menu the hower state works.now i dont know how to link that particular list item to a particular page. Please guide me
In prototype mode, click on the item you want to connect to the page and you'll notice a blue arrow. Click and drag this to the artboard you want to connect it with.
@@monicasdesignprocess thanks Monica ,i could finally do it. 🙂
@The Mountain Knights TMK Glad to hear it 😃
Hi Monica can you please help me with drop-down calander.i want user to hover the mouse over calander and i want a date picker chart to drop down.
@@themountainknights The same principles apply!
Hi, Great Video, But hope you don't mind. I do have a question. I followed the steps you have shown, however, when I hover under the top nav bar where i have created the drop down menu, the list pops up. It pops up even though the mouse isn't in the correct place. Any advice on how to rectiy this? Hope to hear from you.
Hi Avni! Unfortunately this is just a bug within XD. If you hover anywhere near where the hidden menu items are, it will appear.
@@monicasdesignprocess Hi Monica, Happy New Year! Thank you for your reply to my question :).
You save my homework for school Thanks !
Glad to hear the video helped 🙂
Good video!! Thanks !!
Thank you! ☺️
Thank You So Much for this tutorial, it was really helpful...... :)
Thanks for watching! Glad to hear it helped :)
youre the best
Aww thanks 😄
Hello Monica, Thank you for the video demonstration. I am not able to accomplish a hove drop down menu given your instruction. My issue is when I change the opacity of the drop down menu to 0% on default state, the hove state also changes to 0% opacity. I can not seem to get it so that the hove state is 100% and the default state is 0%. Are you able to determine what I am doing wrong? Do you off 1-on-1 sessions to help me learn Adobe XD? I greatly appreciate the time and effort you put in to your UA-cam channel.
Thanks for the kind words, Theo! Yes, I do offer one-on-one sessions if that's something you're still interested in. I'll reply with more info to your email!
When I make my menu into a Component, it doesn't appear on the right menu bar like in yours. Tried several times.
When you have the component selected, is the bounding box green with a triangle on the top left corner? That’s how you know if you successfully made it into a component.
Hello Anna, can you help, everything works for me in the demo version, and when I export to html format, it just doesn't want to work
Well for starters, I’m not Anna. My name is clearly stated within my UA-cam channel name, also mentioned in the description, website, social links, etc.
@@monicasdesignprocess Sorry, Monica
@@monicasdesignprocess could you help me? 😢
@@БогданЯворський-ш9к Which plugin are you using to export the HTML? I've never used it before but I tried Web Export and it works for the HTML and CSS. But it's true when multiple animations or multiple destinations are within the same page, it doesn't work properly. My suggestion is to use this plugin to export the basics then build your page on top of that and fix where needed. But don't use it as a final solution. If you want to share your prototype for feedback, use the share option in XD rather than the HTML export. Hopefully that helps.
@@monicasdesignprocess I'm using a web export, idk but I just don't want to show a list when I export in html and css. Thank you for you proposition and advice.
Thank you so much. I thought XD was useless (duplicating the whole artboard to do these types of things)
You’re welcome! Yes, super happy to see Adobe really thinking about these micro interactions. All those extra art boards would be a mess!
@@monicasdesignprocess I don't know if it's just me but does it crash a lot for you too?
I haven’t had any crashing problems lately. Maybe try reinstalling or restarting?
@@monicasdesignprocess trying re-install now and we'll see
thx~~~~~~~~~~~~!!
You’re welcome 🙂
bhen ji hover pr prototype nhi chlra
Keep trying, it can be tricky, make sure you completed all steps.
Ive been trying to figure this out for nearly two hours, this is so fast and you skip steps. Plus after you set up the drop down menu, prototyping docent allow you to click each drop down menu and select your page it should bring you. NOT HELPFUL !????
I didn’t skip steps. That’s currently how it works for a drop down prototype in XD, unfortunately it’s a little messy when selecting the pages due to grouping elements. I recommend listening for one step, pause while you do that step on your own computer, press play to hear the next step, etc. You can’t expect to watch a complex protype tutorial once and grasp the concept immediately. Most need to pause, rewatch, and put it into practice.
You really need to slow down and describe exactly what you are doing. I spent a good 20 minutes figuring out the first step as it kept switching out of component mode. And then another 10 minutes trying to select more than one item. You did these two actions in 3 seconds. Please please slow down and tell us what keys you are pressing.
Use the pause button and replay as many times as you need to. You'll notice from most of the other comments people appreciate how quick and easy my tutorials are (rather than adding fluff or wasting your time).
This is geared toward someone who has a basic understanding of Adobe XD. If you're new to the program, I recommend following along with the longer in-depth tutorial I created for how to get started with Adobe XD first.
But thanks for sharing the feedback. I'll work on creating specific, longer, slower-paced tutorials in the future.
@@monicasdesignprocess Try saying "Double click inside the component area. Select one item. Hold down shift and click each item. Then set opacity to 0. I can pause 100 times and not figure this out.
%
?
trashhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
You should be kinder to yourself
Good Video! Thank you!
You’re welcome! 😁