13/10/2014 by Nitesh

How To Create a Responsive Menu Using HTML, CSS & jQuery

Friends,

This is Part 5 of the series I started a long time back for creating menus, from simple to complex. In today’s era when smartphones are making a lead in browsing websites, adapting menus to smartphones and other devices is equally important. In this post, we will see how can we create a menu that automatically resizes based on the device we are viewing the site on. We will use HTML, CSS and a bit of jQuery to build this menu.

We will be using an existing plugin from github, known as “meanmenu” to create this menu. Let’s get started. In a nutshell, we will perform the following tasks –

  • Create a HTML page and set the viewport property to device-width. This is important to render the page contents as per the dvice the page is browsed on.
  • Write our Menu Markup using <ul> and <li> tags
  • Include jquery file and the plugin’s javascript file.
  • Include CSS file for the plugin.

First of all, we will create a HTML page and write our menu markup. We will be using a sample that we created in one of our previous posts. Below is the HTML  and CSS markup in the HTML file.

< !doctype html>




Responsive Menu Demo






Resize your browser to under 768 pixels

Next we include the plugin’s javascript file and CSS file in the our HTML file.

   
   
   

Lastly we will call the plugin’s function to convert our menu to a responsive menu automatically and will handle window resizes and also check for mobile browsers.

   

Below is a screenshot of the output of how the menu looks on Dekstop and Mobiles.

responsive-menu-1

responsive-menu-2

You can download the complete source code for the menu here.

Hope you like this post! Keep learning and sharing! Cheers!

#CSS#HTML#Javascript#jQuery#Menu#Responsive