Webmasters Gallery

Add a Fullscreen Menu to your Adobe Muse Website. No Coding Skills Required.

A big part of a website is the navigation menu. Well designed menus can make navigating a website easier and more interesting. One of the first things I look for when looking at a website is where the menu is located and how it functions. Since the inception of web development menus keep evolving and getting more creative. I personally love menus that animate from different directions when you click on the menu button, and menus that cover the entire screen.

One of my first widgets was the BIG Menu Widget. It consists of 11 fullscreen menus that cover the entire website when clicking on the menu button. I have recently updated it to allow for custom open and close buttons. You can also rotate the open and close button on hover. There is now the ability to close the menu when clicking on the links as well which is very useful on a one page scrolling website. In the video tutorial above I go over the new features and updates to the BIG Menu Widget.

Here are the steps to add the BIG Menu Widget:

1. Install the widget by double clicking on the .mulib file. The widget will then install into the Adobe Muse library panel. If you do not see the library panel go to Window > Library.

2. From the library panel you will be able to select from 11 different fullscreen menus. To find the BIG Menu widgets quickly type in “BGMNU” in the library panel search bar.

3. Drag and drop a menu onto your Adobe Muse website. At first you will just say a 50×50 box with an exclamation point. This is because an open button image has not been added.

4. Add a custom open button image in the “Open Menu” section. You can change the size of the open button as well as enable rotation on hover. Within the widget folder there are icons to help you get started if you do not have your own custom icons.

5. Add a custom close button in the “Close Menu” section. You can change the size of the close button as well as enable rotation on hover.

6. In the “Menu Styling” section you can select the color for the menu overlay as well as style the text for the links.

7. To change the font for the menu select the widget and use the built-in Adobe Muse “Text” option in the upper toolbar. From here you can select any web font from the fonts menu.

8. Select the amount of menu items for the menu in the “Menu Items” section. Here you can also set the text for the menu items and the links. You can link to an anchor point, internal page, or external page. There is a “Linking – More Info” section for reference on how to link the menu items.

9. Go to File > Preview Page in Browser to see how the menu looks.

10. Done!

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Read More at 11 Fullscreen Menus in Adobe Muse