Responsive Menu 04: Adding a clickable button to the responsive menu

Friday, October 10, 2014

Responsive Menu 04: Adding a clickable button to the responsive menu

In the previous post we make the menu responsive. Now we will add a clickable button to control the menu. And we will also add mouse hover effect for better looking. Let's follow the steps to do so.

Step 01 Add some more codes inside of the @media section

To add the clickable button, we need to add the line <span class="nav-btn"></span> just after the opening <body> tag of the menu.html page. Then open the menu.css file and add the codes given below after the existing codes inside of @media section.

.nav-btn {
        display: block;
        background-color: #333;
        color: #fff;
        font-family: 'helvetica neue', helvetica;
        font-size: 14px;
        text-align: left;
        cursor: pointer;
        padding: 5px;
    }

    .nav-btn:before {
        content: "Menu";
    }

Step 02 Save the CSS file and reload the menu.html file

Now save the menu.css file and reload or reopen the menu.html file. Then we will get a menu as like as the image below.

Step 03 Change the background color and the font
We need some more customization for the main menu. Change the background-color to #333 and add the line font-family: 'helvetica neue', helvetica; , then the font will look more beautiful as like as the image given below..

#menu{
background-color: #333;
font-family: 'helvetica neue', helvetica;
}

After changing the background color

Step 04 Let's add hover effect to the menu

Still there is no any hover effect added to the menu. To add hover effect, we need to add the codes given below. The codes should placed before the @media section. After adding the codes, save the menu.css file and reload the menu.html file. Then you will get the effect as shown in the image below.

#menu li:hover{
background: #ef1c25;
}