Our SubNav Slider widget allows users to create gorgeous second-level menus, complete with a slider allowing smooth transitions between navigation options.
SubNav Slider is part of our Design Widgets series, where our designers use built-in Muse widgets (in this case, a Composition widget) to create useful and powerful tools.
Included in the download is the .muse file used for the live preview above. This advanced demo file brings images to life with multiple layers of animated transitions, powered by our OnLoad Animator widget.
SubNav Slider is a Design Widget. Design Widgets are native Muse widgets (Slideshows, Compositions, Galleries, etc) that have been pre-styled and packaged by our design team. The setup instructions below are not intended to show you how to use native Muse widgets, but instead provide a few tips for using this pre-styled arrangement.
For more info on using native Muse widgets, visit: https://helpx.adobe.com/muse/topics/slideshows-widgets.html
You will notice upon unzipping the .zip file that in addition to the SubNav Slider .mulib file, there is a .muse file included in the package. We've included the demo file to provide an example of a more advanced implementation of the SubNav Slider. A good understanding of stock Muse Composition widgets will help greatly. The tips below should help you to get started.
Working with the SubNav Slider widget:
For full width responsive elements to properly stretch to the edges of the browser, you will want to make sure the double arrows next to the browser tabs are pointing outward:
If you're having trouble locating the widget in your Library, look above the Toolbox widgets, in the "Nav" section.
There are several OnLoad Animator widgets included in the .mulib file. These widgets have been packaged to the left side of the SubNav Slider composition. When you drop the widget into the project, it is best to drop the widget off canvas, well to the left. This allows the widget components to sit off canvas, where they will be out of the way:
Working with the Demo File:
The SubNav Slider demo is an advanced level project. A familiarization with Muse Compositions will make it much easier to work with the demo. As previously mentioned, the following instructions are merely tips that may help when customizing the project file.
There are several ways to replace the stock images with your own images. Our users generally prefer to select the image to be replaced, then open the Assets panel. The asset file should be highlighted in the assets. Right-click the asset, then select "Relink...". When you select a new image file of your own, this image will now replace the stock image with minimal fuss. All states (normal, hover, active, etc) should be now updated. The last thing you may want to do is open the Graphics Panel and click the button to redefine the style. Since your image has been updated, the graphic style has changed – which is why we now see the "+" symbol next to the style name. The graphic styles must be named and maintained properly in order to stay linked to the OnLoad Animator widgets.
No frequently asked questions
No known issues or conflicts