A mobile friendly (responsive) CSS and JS menu using media queries

The CSS menu with JavaScript

With the fact that mobile searches have crossed the desktop searches, this becomes necessary that your website is mobile friendly.

The Google search engine also adds mobile factor as the ranking factor along with the tag in organic search results as:

“This website is mobile friendly”

(Update: This is showing amp tag i.e. Accelerated Mobile Pages.

As you develop a responsive website that adjusts on various screen sizes including smart phones or various desktop sizes, a responsive menu that is easily navigatable for the mobile users is also important and this the topic of this tutorial.

In the following section, you will see a responsive menu which is based on CSS and JavaScript that uses CSS media queries.

A demo of CSS menu with media queries

In this demo of creating a mobile friendly menu based on media queries of CSS, I used a few internal links. If you are looking at it from the desktop, it will open as a top menu. Resize the screen to less than 768 pixels and it will display the mobile menu as shown in the graphic below. See the live demo along with complete code in the demo page:

CSS menu

See online demo and code

For using this plug-in, include the CSS and JS files of the plug-in after downloading here.

CSS file in the <head> section:

<link rel=”stylesheet” href=”css/responsive-menu/style.css”>

While JS file above the </body> tag:

    <script src=”js/responsive-menu/script.js”></script>

The markup contains the CSS classes in <div> tag for mobile:

    <nav>

        <div id="menu_button_wrapper">

            <div id="menu_button">

                Mobile Menu&nbsp;&nbsp;

                <div id="hamburger">

                    <span></span>

                    <span></span>

                    <span></span>

                </div>

            </div>

            <div class="clearfix"></div>

        </div>

 

        <ul id="menu_list">

            <li class="current_page"><a href="https://www.jquery-az.com/">Home</a></li>

            <li><a href="https://www.jquery-az.com/css-tutorials/">CSS</a></li>

            <li><a href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li>

            <li><a href="https://www.jquery-az.com/javascript-tutorials/">JavaScript</a></li>

            <li><a href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap</a></li>

        </ul>

    </nav>

 

A demo with different look

In this demo, the CSS is modified for using other colors than black, as used in above example. The background color, text, alignment and other properties are changed for a different look:

CSS menu style

See online demo and code

If you look at the code, only the reference of the style.css file is changed to the style-custom.css file. The reason is, the complete style of the menu is specified in that CSS file. Whether it is for desktop’s bigger screens or mobile devices, you may make changed there as per needs of your web project.

In the CSS file, you may change the colors of background and text for different parts of the menu. For example, menu item’s normal state, hover state, active menu by finding and changing these classes:

  • The nav class is dealing with the main container of the menu.
  • For changing the properties of the menu links in the normal state, nav ul li a deals with it.
  • The nav ul li a:hover deals with the links in hover state.
  • Inside the media query part, the menu button for mobile is dealt along with other properties.
  • Play with other properties to customize the menu as you want.

A demo with a different mobile opening button

As using the same menu, in this demo, I have added an icon for opening the mobile menu which is basically a background image with an icon. The purpose is to show, you may use a different style for the button for opening the menu. Have a look:

CSS menu button

See online demo and code

The following markup is used, where only one span element is used:

    <nav>

        <div id="menu_button_wrapper">

            <div id="menu_button">

 

                <div id="hamburger">

                    <span></span>

 

                </div>

            </div>

            <div class="clearfix"></div>

        </div>

 

        <ul id="menu_list">

            <li class="current_page"><a href="https://www.jquery-az.com/">Home</a></li>

            <li><a href="https://www.jquery-az.com/css-tutorials/">CSS</a></li>

            <li><a href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li>

            <li><a href="https://www.jquery-az.com/javascript-tutorials/">JavaScript</a></li>

            <li><a href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap</a></li>

        </ul>

    </nav>

 

The background image is added in the #menu_button span (style-custom2.css) file:

#menu_button span{
display: block;
background-color: #000;
width: 1.6em;
height: 1.45em;
border-radius: 1px;
margin-bottom: .2em;
background-image: url(../../images/icon.jpg);
}

That’s it!