Creating a Mobile Menu with HTML, CSS, and JavaScript

posted: category: web-design


Creating a Mobile Menu with HTML, CSS, and JavaScript

If your website is not setup to allow a good viewing experience on mobile devices, then you should start thinking about getting with the times. When you are building your own website, there are various elements of design that are easy to overlook — mobile viewing being one of them. The percentage of consumers that perform the majority of their online shopping via their mobile devices is constantly growing. One aspect of mobile web design that needs to be considered is the mobile menu — especially if your site has mover than a few pages. Whether you are using responsive web design or mobile browser detection with alternate style sheets, here is an easy to use and adapt mobile menu using HTML5, CSS3, and some basic javascript.

To get started, we will type the HTML to create a menu. This example uses several small icons for mobile navigation that are combined into a single image. You can create your own or use the one from this example.

<nav> <ul> <li class='desktop'><a href='/index.html'>Home</a></li> <li class='desktop'><a href='/contact.html'>Contact Us</a></li> <li class='desktop'><a href='/about.html'>About Us</a></li> </ul> </nav>

Next, it is time to style the menu into a menu bar across the top of the page or however you wish it to look on desktop browsers.

<style type='text/css'> ul { list-style-type: none; padding: 0px; margin: 0px; } li.desktop { display: inline; padding: 10px; } a { text-decoration: none; color: gray; font-size: 1.5em; } </style>

Use whatever CSS you wish for creating your desktop menu; though, it does help to keep your CSS to a minimum. This helps when making changes to a site and to prevent errors due to other CSS rules. Now that we have a basic desktop menu bar, we need to add a few items that will be used to trigger additional CSS when the site is viewed on mobile devices.

grow your small business

learn more about the creation of a business blog


Then, add four new list item tags. Give each one a class called mobile. These will be the mobile buttons viewed on smaller screens. You can use the same coding to add additional buttons with whatever images you wish.

<nav> <ul> <li class='mobile'> </li> <li class='mobile'> </li> <li class='mobile'> </li> <li class='mobile'> </li> <li class='desktop'><a href='/index.html'>Home</a></li> <li class='desktop'><a href='/contact.html'>Contact Us</a></li> <li class='desktop'><a href='/about.html'>About Us</a></li> </ul> </nav>

Now we are going to make the desktop buttons go away and leave the mobile buttons visible. For now, we just want to set the size of the mobile buttons. To make them visible, we will add a background property to the mobile buttons. To do all of this, add a media statement in your CSS or copy the CSS used inside the media statement into your mobile style sheet.

Then, we add CSS for li.mobile. Next, wrap your desktop list items inside a section tag and give it an id called dropdown. Add CSS for dropdown. We also set the nav tag to a fixed position at the top left of the screen for the mobile menu.

li.mobile { display: none; } #dropdown { display: inline; } @media screen and (max-width: 940px) { nav { position: fixed; top: 0px; left: 0px; width: 100%; } #dropdown { clear: both; display: none; margin: 15px 5px; border: 1px solid gray; } li.desktop { display: block; } li.mobile { display: inline; padding: 0px; margin: 0px; cursor: pointer; float: right; width: 50px; height: 50px; } }

In the CSS shown, everything before the media statement is first read by the browser. We are telling the browser that list items with the mobile class are not to be displayed. We are also setting the display of #dropdown to inline. Inside the media statement, we are giving the browser additional CSS for screens that are 940 pixels or smaller. #dropdown is set to display:none, to hide the dropdown menu. We also give it a bit of a margin so that it will appear just below the buttons. We change the display of li.desktop to block, so that the menu items in the dropdown will be in a list.

The mobile buttons are set to float to the right. Later, we will adjust the arrangement and have the mobile menu button float to the left.

Now it is time to add some JavaScript so that we can make the dropdown menu appear when the menu button is clicked. Here is the JavaScript used:

<script type='text/javascript'> function dropMenu() // Used to display mobile menu { var display = (document.getElementById("dropdown").style.display) ; if (display == 'none') { document.getElementById("dropdown").style.display="block"; } else if (display == '') { document.getElementById("dropdown").style.display="block"; } else { document.getElementById("dropdown").style.display="none" } } </script>

And the onclick event is added to the HTML for the mobile menu button:

<li class='mobile' onclick='dropMenu();'> </li>

Whenever the menu button is clicked, the JavaScript function is called. In the JavaScript, we are first setting the variable display to the current value of the display property of the id called dropdown. The JavaScript then performs a series of if/else statements. We first check to see if display is set to none. If display is set to none, we change it to block. If the display is not set at all, it changes to block. Finally, if all else fails (which the only option after the first two should be that display is set to block), change the display to none. To add links to the other mobile buttons, we add a couple more JavaScript functions:

function linkA() { window.location.href = "http://stackoverflow.com"; } function linkB() { window.location.href = "http://stackoverflow.com"; } function linkC() { window.location.href = "http://stackoverflow.com"; }

Then add onclick events to the mobile buttons:

<li class='mobile' onclick='linkA();'> </li> <li class='mobile' onclick='linkB();'> </li> <li class='mobile' onclick='linkC();'> </li>

If you add other buttons, add another function and set the link.

You have a mobile menu at this point; though, the mobile buttons do not have images yet. Using image sprites, you can utilize a single image that combines a group of smaller images to lower the size of your page. To insert images into our mobile buttons, we are going to use the CSS background property (background: url('/example.gif'); ). Using image sprites is relatively simple. You have two numbers to offset the image for placement. The first number is positioning from the left edge of the image and the second number is from the top.

background: url('images/mobile-buttons.gif') -50px 0;

This would display an image located in a folder called images and show it from the top and 50 pixels from the left edge of the image. Now add a new class to each mobile button with a specific name for the button.

<li class='mobile bMenu' onclick='dropMenu();'> </li> <li class='mobile bHome' onclick='linkC();'> </li> <li class='mobile bPhone' onclick='linkB();'> </li> <li class='mobile bEmail' onclick='linkA();'> </li>

Then add some CSS. Note that the mobile menu button is now set to float left. The first image is using the image from the top left corner. Each image after that shows the image from a spot 50 pixels further down the image. With a 200 x 50 pixel image, it is pretty easy to figure out the positioning:

li.bMenu { background: url('images/mobile-buttons.gif') 0 0; float: left; } li.bEmail { background: url('images/mobile-buttons.gif') -50px 0; } li.bPhone { background: url('images/mobile-buttons.gif') -100px 0; } li.bHome { background: url('images/mobile-buttons.gif') -150px 0; }

You now have a basic menu that responds to smaller screens by changing into a mobile menu.

From there, it is easy to adjust the CSS or add additional pages. If you do not want to use a single image for the mobile buttons, it is easy to use a different individual image for each button. Instead of offsetting the background property, just specify the image you would like to use: (background: url('example.jpg');) and specify the url to the image for each button. Yet another option is to place the images inside the li tags in the html, for each mobile button, using an img tag. When choosing that method, instead of using the background property, add some CSS for .mobile img {width: 50px; height: 50px; }. With that method, you could also get rid of the individual classes for each mobile button. (class='mobile bMenu' just becomes class='mobile'); though, you would still need to set the mobile menu button for the dropdown to float left. Your mobile menu does not need to be fixed in position. If you choose, set the position property for the nav tag to static.

Other options include adding a background to the nav tag inside the media statement to make the menu bar more visible on mobile devices when scrolling through content. You could use something like the following to add a little color across the background of the nav tag:

nav{ background: rgba(255,255,255,.4); }

That is it. You have now learnt how to create a simple mobile menu using very basic HTML, CSS, and JavaScript. Adding your own images, adjusting the CSS, you can ensure your website looks great across all devices.

comments powered by Disqus

About the Author

Jeff K.

Jeff K.

Jeff is a web designer and graphic artist. In addition to web design, Jeff enjoys other forms of art, including pencil sketching and illustration.

If you are looking for affordable web design services for your business, Cloudy Mouse provides timely personalized service. Our focus is creating great looking responsive website designs for small businesses without breaking their bank.

Take a look at our Web Design Services and discover how we can get your business into the cloud.