0

I'm designing a website with a dropdown navigation. I'd like to export this to InVision to make it interactive. Therefore I need all elements separatly.

Right now I have the dropdown as a layer-group, that I toggle to invisible. I set the export option for this layer and for the whole artboard. However, when exporting the dropdown is just an empty file. When the layer is visible I don't have the navigation without the dropdown.

What's the best practice to design dropdown navigation or generally hover elements? Is there a way to export both in Sketch?

Thank you.

Improve this question
4
  • Hi Lena, why are you using InDesign to make the navigation bar? It is best to design the drop down using code (HTML,CSS and maybe JS or JQUERY if need-be).
    – AndrewH
    Commented May 1, 2015 at 16:17
  • I'm sorry, I meant inVision. It's a tool to present a design interactively to a client. But it needs all elements as separate png-files.
    – Lena
    Commented May 1, 2015 at 16:22
  • How are you exporting the artboards? I have not used InVision before, do you just upload different images to create the mockup? If that is the case, can you just toggle visibility and export as a jpg for each state of the navigation?
    – AndrewH
    Commented May 1, 2015 at 17:00
  • Thanks for your help! Yes, you upload images of all elements and then link them together. I could toggle visibility for the dropdown, but then the artboard is exported with the dropdown also. I would love to export the artboard without the open dropdown and the open dropwdown in a separate file with one click.
    – Lena
    Commented May 1, 2015 at 17:19

1 Answer 1

Reset to default
0

The easiest way to export multiple states of an image would be to use slices. You would duplicate the main structure of the navigation and then edit parts of the image to represent what state the nav is in and then export all of the slices.

Improve this answer
1
  • Thank you, that really helped. I also had to change the layer hierarchy. Nesting the dropdown inside the navigation layer did not work for some reason even with slices.
    – Lena
    Commented May 2, 2015 at 9:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.