The menu button must be within the (or ).Īs demonstrated in Template 5, you can also add other elements between the and the.

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

Let's walk you through what code has been added to make the menu mobile-friendly.Īs described previously, it is necessary to include the viewport meta in the page: It also comes with a menu button which, when clicked, will toggle the display of the main 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. The next section, Create Mobile-friendly Menu, is only supported by the advanced version of ddmenu.Both basic and advanced versions of ddmenu will support above configurations.If we did not include the maximum-scale value then the viewport would be 320 pixels wide in both portrait and landscape orientation.

You will see more words in each line in landscape than in protrait. Maximum-scale=1 will prevent the page from zooming when the mobile orientation is shiftedįor example, the iPhone viewport width will increase to 480 pixels in landscape mode. Usually you don't need the maximum-scale=1 setting as it will disable the functionality to use pinch zoom on mobile devices. Should I include maximum-scale=1 in the viewport? Viewport meta tag is also necessary for mobile devices to understand media queries. It will guarantee that navigation menu items are large enough so that users can easily interact with them. It will tell mobile devices to render the page at the correct pixel resolution without zooming out page content. The solution is adding viewport meta tag in the HEAD section of your responsive page.

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

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 only screen and (min-width: 481px) and (max-width: 900px) Notice: It is necessary to add viewport meta tag to recognize media queries, as described in next section. This can be achieved by using CSS3 media queries. In such scenario you may still want them to display nicely as if they are in a table. If the menu has a 100% width, the menu items will wrap to multiple lines when the screen size is smaller (such as tablets).

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

Margin: 0 auto /*make the menu center-aligned*/ You can easily resolve this by giving the UL a max-width style.

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

How to Create Mobile-friendly Responsive Menuīasically 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.

Css3 menu dropdown mobile