Icona on mobile devices
Adapting Icona for use on mobile devices.
Once you have a desktop version of a menu or navigation unit it is relatively easy to modify it for use with tablet and phone devices.
In our previous article, we built the Icona menu which is an icon based menu. Now we need to apply it to mobile devices.
We could just add it to the top of the page and resize the proportions. However, if you have watched Dan's article on mobile navigation you will notice that footer based menus offer a better solution for touch based devices due to the grip patterns of their users.
We also want to make sure that the navigation is visible and yet unobtrusive at the same time.
- A blank Muse site
- The assets for this tutorials (see below)
- Take a look at the completed widget:
Building for tablet devices.
1First let's add the Tablet and Phone layouts to our blank site.
2Now open the tablet homepage and place the Icona menu on the page. We are going to remove the submenu items. One, they will not open up correctly when the menu is at the bottom of the page and two we want to cut down on the amount of menu options available to mobile devices. Take a look at Dan's mobile menus article for more on why we simplify the choices for mobile devices.
3Do this by clicking on the main tab that your submenu is attached to and delete the sub menu tabs. Just select a tab and hit delete.
4If you have used the "All Pages" menu type instead of the manual mode just with the menu type to "Top Level Pages" instead. This will turn the submenus of but will not remove the page.
5Once you have removed the submenus we should change the width of the menu to fit within the tablet page. If you try to resize the navigation, you will notice you are not able to. This is because the icon element is at a fixed size and will not change its dimensions whey you drag the widgets overall resize handles.
6All we need to do is alter the width of the icon element to 153px we can now change the size of the menu.
7Now we need to add our popup unit that will allow us to show and hide the menu. We are going to use an accordion panel. Go ahead and add an accordion widget to the page.
8We need to reset all the content and styling of this widget. First off delete two of the three panel tabs of the widget. Select a tab and delete much the same as how you delete the submenu tabs.
9Now go ahead and delete the text from the remaining tab content area.
10Finally, we need to reset the styling overall. Select the whole panel widget (often it is easier to do this from the layers panel).
11Set the border stroke to 0. Next, select the tab itself and delete the active, mouse down and hover states by clicking the trash can icon on each state.
12Set the "Normal State" border to 0. Do the same for the tab content area.
13Next set the text for the tab to centered. It should now look like this.
14Move the widget to the very edge of the left side of the tablet screen area and drag the right side of the widget to the right side. Your panel widget should now be the full width of the page/display area.
15Select the button/tab part of the panel and we can start to style the look of the tab to match the Icona menu.
16Set the normal state fill to a vertical gradient that matches the menu widget. #5E5E5E for the first color and #000000 for the second color.
17Set the tab height to 75px in the transform menu. Set the top spacing to 20px.
18Select the target area of the tab and set its fill color to black (#000000).
19It should now look like this.
20Install the Ions Icons font into Muse. We have included the font in the tutorial folder. If you do not know how to install a font see our blog article on how to install a font. Though this article is for the Montserrat font the principle is exactly the same for the icon font.
21With the font installed select the text and choose the Ions Icons Medium font from your text panel. Then with the text still selected open the Glyphs panel and select the three-line burger icon as below.
22We now need to get the menu into the content area of the accordion.
23Select the Icona menu and change the overall widget width to 765px. Currently, the menus' width is the full width of the tablet. This will not allow us to place the widget on the accordion panel content area so we are adjusting its size so that it will be picked up by Muse when we move into place.
24Move the menu into the accordion content area.
25Once the menu is in the content area. Muse shows the blue line of the content area to tell us that the element is in the target area. We can nudge the menu into a more precise place and set its width back to match the full width of the display.
26Change the height of the accordion content area to match the height of the menu widget it should now look like this.
27Finally set the accordion widget settings to "Can Close All". Click the tab to close the menu and the preview the page.
28When you click the accordion, the menu opens down to reveal the navigation widget.
29Great! Now all we need to do is fix the widget to the bottom of the device screen.
30Back in design view, select the accordion widget and add a new graphic style and call it 'pinthis.'
31Assuming you have installed the widgets pack available with this edition of 123muse from the library panel drag the 'Pinit' widget onto the page.
32In the 'Pinit Styles to Apply To' option type 'pinthis' this tells the widget which CSS class to look for and apply its functionality too.
33Make sure the accordion is closed before you preview it. Preview the page again. The tab panel is now at the base of the page and opens upward when clicked.
34You now have the tablet version of the widget save it to your library, and we will move onto the phone version.
Awesome. Now let's modify it for phones.
Building for phones.
1This next part of adapting the Icona menu for devices is a relatively straightforward one.
2Copy the entire tablet version of the menu into the phone layout or drag the tablet version you saved into the library onto the phone layout page.
3You will notice that the unit sits half-on, and half-off the page.
4We could just resize the icons and the entire menu, but we want to keep the buttons as large as possible especially as we are now on the phone.
5First let's remove one of the tabs in this case the help tab. Select the button and hit delete. We now have four tabs/buttons in our menu.
6Next select the menu unit and duplicate it. Use the arrow nudge keys to move it down below the first menu widget. It should look like this.
7Delete the last two tabs on the first menu and the first two tabs on the second menu so it looks like this.
8Resize both the menu widgets to fit within the phone screen area and then change the size of the accordion itself to fit the phone screen.
9Finally set the icon element width to 190px.
10Close the accordion by clicking on it before you preview and then preview the page.
11Your menu should now site at the bottom of the screen. When clicked the menu pops up to display the four buttons.
12Don't forget to add this new widget to your library.
14Add a new layer on the page and call it 'Navigation.' Make sure it is at the top of your layer panel and add the navigation blocks on this layer. Place all the page content in another layer below the 'Navigation' layer. This will ensure that content always flows behind the navigation.