Create a Responsive Menu using Media Query, jQuery and HTML5

Create a Responsive Menu using Media Query, jQuery and HTML5

In this article we are going to see how to create a responsive menu design using the Media Query,  jQuery and HTML5.

The example that we are going to illustrate is totally responsive design and includes a header where will be the menu + the title of the page, a column of widgets, the content and a footer. In this article we will only focus on the horizontal responsive design menu.

Within the <body> add the menu code:

<nav>
    <ul id = "menu">
        <li> <a href="#"> PRESTASHOP </a> </ li>
        <li> <a href="#"> WORDPRESS </a> </ li>
        <li> <a href="#"> JOOMLA </a> </ li>
        <li> <a href="#"> DRUPAL </a> </ li>
        <li> <a href="#"> MAGENTO </a> </ li>
        <li> <a href="#"> OSCOMMERCE </a> </ li>
    </ ul>

    <div class = "MENU_SELECT">
        <div id = "selectme"> CATEGORIES </ div>
        <span id = "arrow" class = "down"> </ span>
        <ul id = "options">
            <li> <a href="#"> PRESTASHOP </a> </ li>
            <li> <a href="#"> WORDPRESS </a> </ li>
            <li> <a href="#"> JOOMLA </a> </ li>
            <li> <a href="#"> DRUPAL </a> </ li>
            <li> <a href="#"> MAGENTO </a> </ li>
            <li> <a href="#"> OSCOMMERCE </a> </ li>
        </ ul>
    </ div>
</ nav>

You could made confusion as there are 2 menus. What we are going to do is apply a trick. We will show you one menu for mobile devices and another one for the PC.

This effect is managed using CSS and media queries:

#menu {
    float: left;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: # 000000;
}

#menu li {
    float: left;
    list-style: none;
}

#menu li a {
    background-color: # 000000;
    Color: #FFFFFF;
    padding: 10px 20px;
    text-decoration: none;
    width: 100%;
    float: left;
}

#menu li a: hover {
    background-color: #eeeeee;
    color: # 000000;
}

.menu_select {
    width: 97%;
    float: left;
    display: none;
    position: relative;
}

#selectme {
    width: 80%;
    background-color: # 000000;
    Color: #ffffff;
    padding: 10px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    float: left;
}

# options ul {
    width: 100%;
    float: left;
    margin: 0px;
    padding: 0px;
    display: none;
}

# options ul li {
    width: 98%;
    float: left;

}

# options ul li a {
    Color: #ffffff;
    padding: 10px;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 1px;
    width: 100%;
    float: left;
}

# options ul li a: hover {
    color: # 000000;
    background-color: #eeeeee;
    text-decoration: none;
}

# options ul li: hover {

}

#arrow {
    position: absolute;
    right: 10px;
    top: 12px;
    cursor: pointer;
}

.down {
    background-image: url ( "../ images / plus-white.png");
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
}

.UP {
    background-image: url ( "../ images / minus-white.png");
    background-repeat: no-repeat;
    height: 20px; 
    width: 20px;
}

@media only screen and (max-width: 980px) {
nav ul {display: none; }
select nav {display: inline-block; width: 100%; background-color: # 000; Color: #fff; font-size: 16px; font-weight: bold; }
.menu_select nav {display: inline-block; width: 100%; background-color: # 000; Color: #fff; font-size: 16px; font-weight: bold; }
}

In the above CSS code we have all the styles of menu screens with a width more than 980px and style screens smaller than 980px. It could be further adjusted by adapting the code for all screens but is not the purpose of this tutorial.

Now we just need the jQuery to implement the functionality of menu screens with a width less than 980px.

<script src = "// ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </ script>
<script type = "text / javascript">
$ (document) .ready (function () {
    $ ( '# selectme'). On ( 'click', function () {
        if (. $ ( '# options ul') is ( ': hidden')) {
           $ ( '# options ul') show ().;
           . $ ( '# arrow') removeClass ( 'down');
           . $ ( '# arrow') addClass ( 'up');
        }
        else {
            . $ ( '# options ul') hide ();
            . $ ( '# arrow') removeClass ( 'up');
            . $ ( '# Arrow') addClass ( 'down');
        }       
    });
    
    $ ( '# arrow'). On ( 'click', function () {
        if ($ (this) .hasClass ( 'down')) {
           $ ( '# options ul') show ().;
           $ (this) .removeClass ( 'down');
           $ (this) .addClass ( 'up');
        }
        else {
            . $ ( '# options ul') hide ();
            $ (this) .removeClass ( 'up');
            $ (this) .addClass ( 'down');
        }       
    });

    $ ( '# options li a'). On ( 'click', function () {
        var value = $ (this) .text ();
        $ ( '# selectme') text (value).;
        . $ ( '# options ul') hide ();
    });
});
</ Script>

The above code is used to select a menu option for mobile devices.

Lucid Kit

Related Posts
Leave a reply
Captcha Click on image to update the captcha .