SubNav Slider

https://www.muse-themes.com/products/subnav-slider

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.

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.0
  • Supported Devices: Desktop, Tablet, Phone



Setup

Note:
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

What's Included:
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.

  • If your site uses multiple breakpoints, be sure to drag the widget onto your largest breakpoint. This ensures that elements have the best chance of aligning properly across all of your smaller breakpoints

  • 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:

  • Once you've dropped the widget into your project, while all of the widget components are selected, move everything over so that the left edge of the composition aligns with the left edge of the canvas. The top edge should also be aligned with the page, assuming you're using the widget traditionally, as a top navigation.
  • You will need to inspect each breakpoint to ensure alignment of widget components. Unfortunately, we cannot force elements to align on our end while packaging. You will likely find that manual adjustments will need to be made on each breakpoint, as described above.
  • As you work on mobile breakpoints, these will be the most challenging to keep things tidy. This navigation arrangement works best for small-medium sized navigations. Large sites with lots of pages will have trouble organizing top level items.

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.

  • The .muse file is fully functional by default.
  • We suggest making small steps when updating images and text. Try making changes one at a time, and previewing each time, to ensure that the results are as expected.
  • When previewing, use the "Preview Page in Browser" instead of the Preview function built in Muse. This will give you the most accurate browser behavior results.
  • Be careful with alignment. Start by replacing images and text while refraining from moving elements when possible.
  • Be mindful of text. When replacing stock text with your own, try to limit text lengths to lengths similar to the stock lengths. This will reduce unwanted alignment and wrapping issues.

  • 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.

  • Most of the elements are linked to OnLoad Animator widgets, which supply the animation effects. Whenever editing images or icons, ensure that the image or icons remain linked to the widgets properly.
  • When replacing stock images, use similarly sized images, with similar aspect ratios when possible. This will keep things looking good.
  • As a general best practice, make sure your image sizes are web-friendly. These days, single images can be larger than 10mb a piece. All of the images on your entire page combined should be less than half of that! Always use image compression systems such as jpegmini.com or tinypng.com for every image used on your site. Also, be sure that images are sized appropriately before even placing into a compression utility. These tips will keep page load times reasonable.
  • You will notice that there are state buttons and groups used often in this demo file. Our designers use these techniques to maintain alignment and placement when previewed or published. We suggest getting familiar with working with state buttons and using the Group feature. These features are helpful when elements often go astray.


Commonly Asked Questions

No frequently asked questions


Known Issues/Conflicts

No known issues or conflicts


Additional Info Links