Web Design Basics: How to Make Mobile-friendly Navigational Menus

The trend these days is for more responsive web design. No longer are web pages confined to laptops and desktops. More and more, people are turning to their mobile devices – smartphones, and tablets, to navigate the web. With data usage slowly transitioning to more mobile devices, the need to make web pages that are fully optimized on smaller screens have also gone higher.

To this end, navigational menus are one of the trickier aspects in responsive web design on a mobile device. However, Menucool’s ddmenu just made the whole mobile-friendly responsive menu a little easier to accomplish. This is how you can do it, too. (and if you’re too lazy, hit up MangoMatter)

Step 1: Adding meta tags

To optimize a web page for mobile devices, you need to add the viewport meta tag in the head section. This will keep the mobile from zooming the page content out. It also allows navigation menu items to be big enough so users can interact with them easily.

You can use:

<meta name=”viewport” content=”width=device-width” />

or

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1” />

The second code will actually prevent the web page from zooming when the orientation is shifted. More words will then appear per line in landscape versus portrait.

Step 2: Add menu styles

Open the ddmenu.css file. Add the following:

@media only screen and (min-device-width: 401px) and (max-device-width: 700px)

{

#ddmenu ul {

background:#4966A0; /*not using background image anymore*/

}

#ddmenu li {

text-align:left;

width:50%; /*or 33%*/

border-bottom: 1px dotted #6677AA;

}

#ddmenu li.hide1 {display:none;}/*hide elements that is not needed in this layout*/

#ddmenu a {

padding:0 50px;

}

}

Step 3: Add the menu button in the ddmenu markup.

This is the one that will appear on smartphones.

<nav id=”ddmenu”>

<div class=”menu-icon”></div>

<ul>(omitted)</ul>

</nav>

Step 4: Add the style for mobile navigation.

At the end of the ddmenu.css file, add the following:

#ddmenu div.menu-icon {

display:none; /*hide menu icon initially*/

}

/*styles for mobile*/

@media only screen and (max-device-width: 400px)

{

#ddmenu div.menu-icon {

display: block; /*or inline-block*/

… …

/*make the icon align to the right*/

margin-left:auto;

margin-right:4px;

}

/*override the original menu styles*/

#ddmenu ul {

width: 100%;

display: none;

(….omitted)

}

CSS codes are pretty straightforward. The #ddmenu div.menu-icon is initially set to display:none. By using media query, you can make the button visible when the device falls within a specified range. You can also try using max-device-width instead of just max-width.

And that’s it. You have created a web page with a navigation menu that works on mobile devices. Now that wasn’t so hard, was it?