Big Box Menu offers a fullscreen navigation menu, which is triggered by a hamburger icon. This design widget is built using a Muse Composition widget, allowing every element to be edited directly on canvas.ers use built-in Muse widgets (in this case, a Composition widget) to create useful and powerful tools.
Since this menu is triggered by a small hamburger icon, it's a perfect way to save space. It can also be used on specific breakpoints, if you wish to keep navigation compact on mobile and tablet breakpoints only. Our OnLoad Animator and Scaling Text widgets are included, to provide subtle transitions and ensure that your text is impactful on any size screen.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
1.1: Updated Graphic and Paragraph Styles to improve linking of menu items (12/07/2017)
1.0: Initial Release
Big Box Menu 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.
WHAT'S INCLUDED IN THE .ZIP FILE:
You will notice upon unzipping the .zip file that in addition to the Big Box Menu .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 Big Box Menu. A good understanding of stock Muse Composition widgets will help greatly. The tips below should help you to get started.
If you're having trouble locating the widget in your Library, look above the Toolbox widgets, in the "Nav" section.
The Library Folder
When you open the Big Box Menu library folder, you will see that there are three separate widgets within:
Big Box Menu - Center: This menu is pre-arranged with the hamburger menu on the left, and the menu items centered within the composition lightbox.
Big Box Menu - Left: This menu is pre-arranged with the hamburger menu on the left, and the menu items aligned to the left within the composition lightbox.
Big Box Menu - Right: This menu is pre-arranged with the hamburger menu on the right, and the menu items aligned to the right within the composition lightbox.
Select the widget to use based off of the position you would like to use for the hamburger menu, as well as the alignment of the menu items.
POSITIONING THE BIG BOX MENU
When first placing the widget into your project, it's always best to drop the widget into your largest breakpoint. This keeps the elements grouped properly on smaller breakpoints.
If you're using this widget on a new site, it is a good idea to set up breakpoints before placing the widget.
Hamburger menu button placement and menu item placement can be customized. Simply move place these elements where you like, and pin if necessary.
When dropping the widget onto the canvas, use the hamburger menu to determine placement. All widget elements will remain selected until you click on an individual element. Keep all elements selected as you align the widget. Align it as appropriate for your site deisgn. The Big Box Menu - Center and Big Box Menu - Left are best placed on the left side of the page. The Big Box Menu - Right is best placed on the right side of the page.
For all widgets, once the widget is placed based on the hamburger menu position, in most cases the additional elements (OnLoad Animator and Scaling Text widgets) will end up off-canvas. If these widget components are on canvas, move them just off canvas, to the right or left.
INCLUDED WIDGET COMPONENTS
You will notice in addition to the hamburger menu button composition, there are several other instances of widget components included:
OnLoad Animator – base widget plus “main” widgets: These widgets provide the slide-in motion seen when the menu is opened. The two “main” OnLoad Animator widgets are applied to each of the menu items, and the close button.
Scaling Text: This widget is being applied to the each of the menu items. The purpose of this widget is to scale the text so that it appears appropriately-sized, regardless of the viewer’s screen size.
These widgets are optional. If you wish to not use them, they may be deleted with no impact to the functionality of the composition.
Graphic styles are already applied to the menu items within the lightbox, as well as the close button. These graphic styles are defined within the widget options. If you are happy with the settings used, no changes are necessary.
All menu items use individual text boxes, which are grouped. A single graphic style is applied to all of the text boxes. If you intend to add menu items within the lightbox, be sure to apply the same graphic style to the new text boxes. Alternatively, you may duplicate an existing text box, then edit appropriately. This will retain the applied graphic style.
As written previously, this widget uses a stock Muse Composition widget for it’s core functionality. The following tips should help if you’re not familiar with working with composition widgets:
Think of the composition as two separate parts: the trigger and the target.
The trigger is the hamburger menu itself. This “triggers” the target lightbox to open when clicked. The trigger area contains three rectangles with a color fill, grouped together. To change the color of the button, change the fill color of the rectangles. The size and shape of the rectangles may be changed as well.
The target is the lightbox area that is seen when the trigger is clicked. This area is not seen or editable by default. To edit the target, start by clicking once on the hamburger button. This will select the composition as a whole. Then click the small blue circle with a white triangle inside. This opens the composition widget option panel. Click the box that states “Edit widget parts while editing” to reveal the target area. All elements within the target may be edited.
The trigger and target area are similar to the State Button widget, in that things inside stay inside, and remain aligned relative to they placement within.
THE INCLUDED DEMO FILE
The demo file included in the download is provided to show an example of a functional arrangement of this widget.