AppMachine Help Center

How can we help you?

Follow

AppMachine Menu Styles

This tutorial shows you the different styles of menus you can use in the AppMachine app and the setting per navigation style.
Screenshot_039.png

Navigation styles

  • List
    Do you have many topics? Choose for a comprehensive and clearly arranged list of either only text or icons. You can upload the icons yourself. The names of the items can be a little longer here, especially if you use only text.
  • Icon Menu
    Rows of three icons each. A frequently used and therefore highly recognizable design. Would you like to include more items? In that case you can keep swiping or group topics. There is room for large images. You can select icons from the database or upload them.
  • Advanced icon menu

  • Tabbar

  • Sliding
    Want something really fancy? Choose the Sliding menu. Once you tap on an item, the menu slides closed and the content loads on the screen.
  • Image menu

  • Text menu

  • Tab

List

Screenshot_040.png  Screenshot_041.png

  • Top Image  let's you choose the image above the menu
  • View  allows you to change the menu type
  • Row height allows you to change the height of every menu item
  • Font size allows you change the size of them menu font

Icon Menu

Screenshot_044.png  Screenshot_043.png

  • Top Image: add an image above the menu
  • View: change the menu type
  • Columns: max columns of icons
  • Rows: max rows of columns
  • Position: Position of the menu (top, center, bottom)
  • Margin: Use the margin to move the blocks on the screen up or down in relation to the position. Use this setting to make sure the blocks are shown on the "calm" part of your backgroundimage, while the "busy parts" stays free of blocks.
    If you set Position on "Top" and Margin 200, the blocks will be shown 200 pixels from the top. If you set Position on "Bottom" and Margin 150, the 150 pixels from the bottom will not show blocks. 
  • Text > Position: Alignment of the menu text (Top, Bottom, Hidden)
  • Text > Font size: Font size of the menu text
  • Icon > Size: Changes the size of the icon
  • Icon > Padding: Changes the space around the icon (above, right, under, left)
  • Icon Background: An Icon background is the image that will be shown on the Home Screen of your app behind the icons of every block.
  • Icon Background > Default: Default background image behind the icon of a block
  • Icon Background > Pressed: Background image behind the icon of a block when de item is pressed
  • Icon Background > Size: Changes the size of the icon background image
  • Icon Background > Padding: Space around the icon menu background image 

Advanced icon menu

The advanced icon menu allows you to configure 

Screenshot_046.png  Screenshot_047.png

  • General > Top Image: add an image above the menu
  • General > View: change the menu type
  • Menu > Columns: max columns of icons
  • Menu > Rows: max rows of columns
  • Menu > Position: Position of the menu (top, center, bottom)
  • Menu > Margin: Use the margin to move the blocks on the screen up or down in relation to the position. Use this setting to make sure the blocks are shown on the "calm" part of your backgroundimage, while the "busy parts" stays free of blocks.
    If you set Position on "Top" and Margin 200, the blocks will be shown 200 pixels from the top. If you set Position on "Bottom" and Margin 150, the 150 pixels from the bottom will not show blocks. 
  • Text > Position: Alignment of the menu text (Top, Bottom, Hidden)
  • Text > Size: Font size of the menu text
  • Text > Alignment: Alignment of the text
  • Icon > Size: Changes the size of the icon
  • Icon > Padding: Changes the space around the icon (above, right, under, left)
  • Icon > Alignment: Alignment of the Icon (Bottom, top, hidden)
  • Icon Background > Default: Default background image behind the menu item
  • Icon Background > Pressed: Background image behind the menu item when de item is pressed
  • Icon Background > Size: Changes the size of the background image
  • Icon Background > Padding: Space around the menu background image (Top, Bottom, Hidden)
  • Icon Background > Alignment: Alignment of the background Image

 Tabbar

Screenshot_051.png  Screenshot_052.png

  • General > Top Image: add an image above the menu
  • General > View: change the menu type
  • Menu > Row Height: max height of a row in pixels
  • Icon Background > Default: Default background image behind the menu item
  • Icon Background > Pressed: Background image behind the menu item when de item is pressed

Sliding

Screenshot_053.png  Screenshot_054.png

  • General > Top Image: add an image above the menu
  • General > View: change the menu type
  • Menu > Row Height: max height of a row in pixels
  • Menu > Vertical seperator line: Allows you to add an image as a seperator line
  • Menu > Show submenu items: Collapse the menu showing submenu items
  • Text > Size: Font size of the menu text
  • Icon > Alignment: Alignment of the Icon
  • Icon Background > Default: Default background image behind the menu item
  • Icon Background > Pressed: Background image behind the menu item when de item is pressed

Please note: this menu may not work on Android tablets in horizontal mode. 

Image Menu

Screenshot_056.png  Screenshot_055.png

  • General > Top Image: add an image above the menu
  • General > View: change the menu type
  • Menu > Columns: max columns of icons
  • Menu > Position: Position of the menu (top, center, bottom)
  • Menu > Size: Total size of the menu (square)
  • Menu > Padding: Set the space around the menu
  • Text > Size: Font size of the menu text
  • Text > Padding: Space around the text
  • Text > Alignment: Alignment of the text
  • Text > Size: Font size of the menu text
  • Icon Background > Default: Default background image behind the menu item
  • Icon Background > Pressed: Background image behind the menu item when de item is pressed

Text Menu

Screenshot_057.png  Screenshot_058.png

  • General > Top Image: add an image above the menu
  • General > View: change the menu type
  • Menu > Columns: max columns of icons
  • Menu > Rows: Max number of rows
  • Menu > Position: Position of the menu (top, center, bottom)
  • Menu > Size: Total size of the menu (square)
  • Menu > Padding: Set the space around the menu
  • Text > Size: Font size of the menu text
  • Text > Padding: Space around the text
  • Text > Alignment: Alignment of the text
  • Text > Size: Font size of the menu text
  • Icon Background > Default: Default background image behind the menu item
  • Icon Background > Pressed: Background image behind the menu item when de item is pressed

Tabs

Screenshot_059.png   Screenshot_060.png

  • General > Top Image: add an image above the menu
  • General > View: change the menu type
  • General > Tabview: Select the different kind of tab displays
  • Text > Size: Font size of the menu text

 

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments

  • Avatar
    harrywildeboer

    The photos for the image-menu are the photos you post instead of the icon.