Since site navigation is a fundamental part of every website, the Horizontal and Vertical Menus built into Muse are probably the most highly-used widgets packaged with the app. Our Motor Menu widget allows users to add some very cool new functionality to the built-in Muse Menus.
You can now build your nav menu as you like, but keep it hidden off-canvas until opened using our default hamburger menu button, or custom button of choice. Slide-in transitions work great from top, bottom, left, or right. Customization options include easing, timing, background overlay colors, and more. Makes great mobile & tablet navs too!
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
1.0: Adds collapsible panel functionality and support for responsive Muse
Drag the widget from the library and drop into your project in Design mode. The widget contains two components.
You can use default open and close buttons, or custom open and close buttons.
Default Buttons: If using the default open and close buttons, simply set the colors of the buttons in the "Open Button Setup" and "Close Button Setup" sections.
Custom Buttons: Build your buttons using text boxes or state buttons. We like using state buttons. Assign graphic styles to your open and/or close buttons, and define the graphic styles in the widget panel in the "Open Button Setup" and "Close Button Setup" sections.
This widget works together with Muse's own menu widget. This is the horizontal or vertical menu option you will find in the Widgets Library. Drop a Muse widget into your project. You can place it wherever you like, because the Motor Menu widget will control the positioning. We like to place it out of the way, off canvas.
Apply a graphic style to the menu widget, and define the graphic style name in the Motor Menu widget option panel. Be sure to have the entire menu widget selected when applying the graphic style, rather than an individual menu button.
It's best to have all of the pages of your site already created when setting up Motor Menu. The reason is because as you create pages in your site, they are automatically added to the menu. This will give you the best visual representation of the size and look of your Motor Menu. The site doesn't have to be completely built, but an approximate number of created pages helps.
By default, the positioning of the open button is center-of-page. To place your open button elsewhere, you will need to use the Positioning widget component. The positioning widget should have a graphic style applied to it, which matches the graphic style defined in the "Menu Positioning" section of the main Motor Menu widget component. We have set both of these to "position". So unless either have been changed, they should be linked by default.
In the "Menu Position" section, check the "Custom Menu Position" box for custom positioning. The "Alignment" dropdown allows for exact placement and centered on Y axis options. Use the Positioning widget component to set placement of where you would like the menu to appear.
Finally, the "Menu Overlay & Transition Settings" section allows you to customize the look and feel for the opening and closing of the menu.
Much of the styling of your Motor Menu is determined by how you style the horizontal menu widget. All styling of fonts, strokes, spacing, etc. will show up in the Motor Menu.
Commonly Asked Questions
How did you make the round icon-based buttons in your preview?
We made round menu buttons by adding corner radius to the standard menu items, then cranking up the radius value. To create the icons, we opened the menu options and disabled labels, and enabled "Show Left Icons". Finally, we filled the icon container with the icons of our choice.
How can I make the menu appear dead-center, like your "example 2" in the preview?
When custom positioning is disabled, the menu will automatically center along the Y axis. So placing the positioning widget about halfway up the site will position the menu dead center.
As pages are added to the menu after Motor Menu is set up, the menu may take on a "stretched" look. That is because additional buttons are added while the overall menu size stays the same. You will likely need to adjust the overall size of the menu as you add pages