How to Create Mobile-friendly Responsive Menu

Create Responsive Menu

Basically when you have set the UL width to be 100% through the CSS builder on Menucool's ddmenu page, you get a responsive menu that will adapt its layout to the screens.

However, usually this is not enough. You may also want:

• The menu not to be 100% wide in a wide desktop screen

  You can easily resolve this by giving the UL a max-width style. For example:

  max-width: 1200px; margin: 0 auto; /*make the menu center-aligned*/

• Keep the menu a nice look when wrapping to multiple lines

  If the menu has a 100% width, the menu items will wrap to multiple lines when the screen size is smaller (such as tablets). In such scenario you may still want them to display nicely as if they are in a table.

  This can be achieved by using CSS3 media queries. In the ddmenu.css of Template 4 that you can download from the page ddmenu, you will find that it is accomplished by the following code:

  *styles for responsive menu*/ @media only screen and (min-width: 481px) and (max-width: 900px) { #ddmenu li div.column.mayHide { display: none; } #ddmenu ul { width: 100%; border-radius: 0; } #ddmenu li { position:relative; width:33.33%; box-sizing:border-box; text-align: left; border-top:1px solid rgba(255,255,255,0.3); border-right:1px solid rgba(255,255,255,0.3); } #ddmenu li.full-width { position: relative; } #ddmenu div.dropdown { width: auto; left: 0px; text-align: left; } #ddmenu li.full-width div.dropdown { width: auto; } #ddmenu div.dropdown.right-aligned, #ddmenu div.dropdown.mayRight { left: auto; right: 0px; } #ddmenu li div.column { width: auto; border: none; } } Notice: It is necessary to add viewport meta tag to recognize media queries, as described in next section.

• The touch zones of the menu should be bigger and easier to select in mobile devices

  The solution is adding viewport meta tag in the HEAD section of your responsive page. It will tell mobile devices to render the page at the correct pixel resolution without zooming out page content. It will guarantee that navigation menu items are large enough so that users can easily interact with them.

  Viewport meta tag is also necessary for mobile devices to understand media queries.

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  Should I include maximum-scale=1 in the viewport?

  Usually you don't need the maximum-scale=1 setting as it will disable the functionality to use pinch zoom on mobile devices.

  What does maximum-scale=1 do?

  maximum-scale=1 will prevent the page from zooming when the mobile orientation is shifted

  For example, the iPhone viewport width will increase to 480 pixels in landscape mode. You will see more words in each line in landscape than in protrait. If we did not include the maximum-scale value then the viewport would be 320 pixels wide in both portrait and landscape orientation.

• Both basic and advanced versions of ddmenu will support above configurations.
• The next section, Create Mobile-friendly Menu, is only supported by the advanced version of ddmenu.

Create Mobile-friendly Menu

If you choose the Advanced version option when downloading a ddmenu template, you will get the navigation menu that will automatically transform to vertical layout when viewing with mobile devices. It also comes with a menu button which, when clicked, will toggle the display of the main menu.

Let's walk you through what code has been added to make the menu mobile-friendly.

• Add viewport meta tag

  As described previously, it is necessary to include the viewport meta in the page: <meta name="viewport" content="width=device-width, initial-scale=1.0" />

• Add a menu button into the ddmenu markup that will appear in smartphones:

  <nav id="ddmenu"> <div class="menu-icon"></div> <ul>(omitted)</ul> </nav>
  • The menu button must be within the <nav id="ddmenu"></nav> (or <div id="ddmenu"></div>). As demonstrated in Template 5, you can also add other elements between the <nav> and the <ul>.
  • If you want the button appears under the main menu, just place the button markup after the <ul>...</ul>

• Add styles for vertical mobile layout

  You can find the following code block at the end of the ddmenu.css file:

  #ddmenu div.menu-icon { display:none; /*hide menu icon initially*/ } /*styles for mobile*/ @media only screen and (max-width: 480px) { (....omitted for brevity) }
  
  The CSS code is pretty straight forward. So we will only talk about the key parts:
  • The #ddmenu div.menu-icon is set to display:none initially. We use media query to make the button visible when the device falls within the specified width range.
  • You can use max-device-width instead of max-width.
    Which one should I use: max-device-width vs max-width?