How to achieve persisting overlay object

New Here ,
Mar 11, 2021 Mar 11, 2021

Copy link to clipboard

Copied

I'm using XD to design a website that has a hamburger icon on the top left corner.  Clicking on this hamburger icon will open a left navigation sidebar.  I'm using XD's prototype overlay function to accomplish this to a certain degree.  I am unable to accomplish the following:

 

1.  I'd like for the left navigation sidebar to be visible by default when first entering into the site.  It is currently invisible by default and I have to click on the hambuger icon to make it visible.

 

2.  I'd like for the visibility of the left navigation sidebar to persist throughout the site where clicking on the hamburger icon effectively toggles the sidebar visibility on/off globally.  Currently, everytime I go to a new page, the sidebar is invisible and I have to click on the hamburger icon again to make it visible.

 

Is there any way to accomplish the two issues above?  Thanks!

{Renamed By MOD}

TOPICS
Design, How to

Views

225

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Mar 11, 2021 Mar 11, 2021
The Sidebar should become a component, this will allow for easier reuse across your prototype. Also, by doing so, you can the set its state. In your case, you will want it to default to 'open'.  To make it easier, you might design it in reverse with the menu open, then you won't have to keep changing its state from artboard to artboard.

Likes

translate

Translate

Translate
Adobe Community Professional ,
Mar 11, 2021 Mar 11, 2021

Copy link to clipboard

Copied

Hi,

 

1. Place the navigation ON the artboard, not only on click/trigger. Another way would be Components with states: Like open/closed.

 

2. As mentionned, use Components

 

https://www.adobe.com/products/xd/learn/prototype/component-states/use-auto-animate-and-component-st...

 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Mar 11, 2021 Mar 11, 2021

Copy link to clipboard

Copied

Hi there,

 

Thanks for reaching out. I found a similar discussion on the community, which you can refer to here: https://community.adobe.com/t5/adobe-xd/how-to-set-up-prototype-to-close-the-side-bar/m-p/11745064#M...

 

Let us know if this helps or if you need any further assistance.

 

Regards

Rishabh

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 11, 2021 Mar 11, 2021

Copy link to clipboard

Copied

The Sidebar should become a component, this will allow for easier reuse across your prototype. Also, by doing so, you can the set its state. In your case, you will want it to default to 'open'.  To make it easier, you might design it in reverse with the menu open, then you won't have to keep changing its state from artboard to artboard.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines