Build the 123muse Icona desktop menu
How to build the 123muse Icona desktop menu.
Ok, so the menu widget is part of our downloads pack but you don't just want pre-built items you want to learn how to do it yourself.
In this tutorial we will show you just how easy it is to build amazing navigation widgets for Muse with just the tools inside Muse itself and a couple of SVG icons.
The objective here is to show you what is available so you can go and experiment and build your own really cool widgets for your clients. Let's get started.
You will need:
- A blank Muse site
- The assets for this tutorials (see below)
- Take a look at the completed widget:
The main menu bar...
1Place a blank menu widget onto the page. Use the following settings.
2 Next set the width to 920px and the height to 90px. Set the Gutter spacing (H) to 0.
3 Add four more tabs so that you have a total of five.
4 Delete the text in each tab so that each tab appears blank.
5 Select the left icon and set it to 184px width and 50px height. Set the fill color to transparent.
6 Add the icons you want as background fills, centred and scaled to fill.
7 Select the first tab (make sure you are in the “Normal State” and change the fill to a vertical gradient with the first color using #5E5E5E and the second colour to #000000.
8 With that tab still selected in the “Normal State” using the Effects, Panel set a Bevel with the following settings..
9Still with that tab selected go to the hover, mouse down and active states and reset them by clicking the trash can icon.
10Now select the “Hover State” for this tab and change the gradient fill to #8FC740 for the first colour and #009144 for the second color. The go to the “Effects” panel and switch the “Glow” option on with the following settings.
11Now go to the “Active State” for this tab and change the gradient colors to the first color #29AEE3 and the second color to #0074BD. Also set the “Glow” setting the same as the “Hover State”.
12Your navigation should now look like this.
13Select the second tab and click the bottom ‘+’ to add a sub-menu item just one for the time being. We do this so that we can get the styling right first then when we add new sub-menu tabs they will inherit the styling of the first tab. It is a better way trust me. Set the sub-menu width to 184px.
14Select the submenu block and set it is fill color to black. Add 10px of padding to the bottom padding in the spacing panel. Set the bottom left and right corner radius to 10px.
15Now select the first tab and change the spacing to:
16Make sure the tabs dimension are 184px by 50px.
17Select the left icon and set its dimensions to 29px by 14px. Set the fill color to transparent and add the white arrow .png from the icons folder (included in the tutorials file in the downloads pack).
18Select the text and enter “MENU OPTION 1”. Make sure you are in the “Normal State”, change it to white 13px (use Montserrat if you have it installed if not see this blog post - http://goo.gl/eA1P96 ) . Make sure the text is left aligned.
19With the tab still selected select clear the hover, mouse down and active states by clicking the trash can icon.
20Now apply the following effects settings for the bevel:
21Now with the hover state active set a green vertical gradient the same as the main menu hover gradient (You don't need to apply a glow effect unless you want to).
22Select the “Active State” and apply the same blue gradient as the main menu tabs.
23With the tab still selected click on the ‘+’ below the tab and add another two tabs.
24Your menu should now look like this.
25One last thing, lets create a new library folder and save this widget to there for safe keeping. We will need this menu for the next article.