Mobile navigation styles
With more and more sites becoming “mobile responsive” and changing shape to suit different screen sizes of tablets and smartphones, there are different types of navigation that can be used.
The main menu of a website often needs to change as there is not room for the full menu, and touch enabled devices can’t ‘hover’ over main menu items to show the sub-menus. To solve this, several styles of mobile menu have been created.
Dropdown select menu
A quick and easy way to alter the menu for mobile is to turn it into a ‘select’ menu. This uses the web browser or operating system’s own type of drop down menu styles. It’s quick to make, but probably won’t match your website styling.
Full width button burger menu, tap to open
Here the main menu is hidden until a button is tapped. The button fills the width of the screen. Looks good on small screens, but can take up too much space on large phones or tablets. The icon often used for these menus looks like a burger, hence the name ‘burger menu’!
Small button burger menu, tap to open
This can be a better use of space, revealing the menu when a smaller button is tapped.
Off-canvas burger menu tap to open
Based on the Facebook and other app style of navigation, the off-canvas menu moves the entire site over to one side to reveal the navigation menu. These can be tricky to program and can cause performance issues on mobile devices depending on how they are animated, but can look fantastic and allow easier on-screen access to a large menu.
Need a current site upgrading to be mobile friendly or a new responsive website building? Call us on 01636 812 551 and we will talk you through some options!