Navbar hover for responsive (navicon menu)

Question

How to click the navicon image in mobile phone (not hover) and it will show up a small container which has links. Here are my codings..

HTML

<div id="nav">
   <ul class="menu">
      <li> <a class="#"> LINK </a> </li>
      <li> <a class="#"> LINK </a> </li>
      <li> <a class="#"> LINK </a> </li>
      <li> <a class="#"> LINK </a> </li>
   </ul>
   <a href="#" id="nav-icon"> <img src="nav.png"> </a>

   <div class="navimage">
      <a href="#"> <img src="twitter.png"> </a>
      <a href="#"> <img src="facebook.png"> </a>
   </div>
</div>

CSS

#nav {
    height:70px;
    border-bottom:1px solid #FFF;
    margin-bottom:20px;
    padding:0;
    max-width:95%;
    margin:0 auto;
}

#nav-icon img {
    display:none;   
}

.menu {
    float:left;
    width:70%;
    margin:0 auto;
}

.menu li {
    display:inline;
}

.menu a {
    padding:15px;
    margin:15px 0;
    display:inline-block;
    text-align:center;
}

.menu a:hover {
    color:#DEB887;
}

#nav a:hover {
    text-decoration:none;
}

.navimage {
    float:right;
    margin:20px 0;
    width:30%;
}

.navimage img {
    width:30px;
    height:30px;
    margin:0 2px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    float:right;
}

RESPONSIVE CSS

@media only screen and (min-width: 480px) and (max-width: 764px) {

#nav-icon img {display:inline-block;height:40px;margin-top:10px;margin-left:10px;cursor:pointer;}
#nav ul, #nav:active ul {
    display:none;
    position:absolute;
    padding:15px;
    background:#fff;
    border: 3px solid #DEB887;
    left:30px;
    top:50px;
    width:30%;
    border-radius:0 0 3px 3px;
    z-index:9999;
}
#nav:hover ul {display:block;}
#nav ul li a {width:100%;color:#000;padding:0;margin:10px 0;}
#nav ul li a:hover {color:#DEB887;}
}

Here is JSFIDDLE to check it out. The problem is I hover nav div everywhere and it shows menu. What I want is to click the navicon image and it will appear menu? Any ideas?

Thanks

Answer 1

You need a small bit of jQuery, which means including the library in your head and having a small piece of script in the head aswell.

First add this to the head:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

That loads the latest version of jQuery for you.

Next you need to add the jQuery code in to make the nav work. Its a simple 3 line code that checks its been clicked and then toggles the display on and off.

<script type="text/javascript">
$(document).ready(function() {
    $('#nav-icon').click(function() {
        $('ul.menu').toggle();    
    });
});
</script>

As you can see, it finds the id nav-icon and when its been clicked, runs a function which toggles the visibility of the ul.menu.

jsFiddle Demo: http://jsfiddle.net/3w63B/2/

If you go on the mozilla developer network (link) or go to the jQuery API pages (link) you can pick up the basics pretty quick. It only starts getting difficult when you start getting jumping right into the deepend of what it can all do.

Hope this helps fella.

Answer 2

What do you think this line of code does?

#nav:hover ul {display:block;}

Everytime you hover the nav anywhere the submenu will appear. Instead of CSS use javascript / jQuery to make it appear on click.

$("#nav-icon").on("click", function() {
    $(".menu").css("display","block");
});

Although above code isn't exactly what you want, because the submenu will stay forever. This will help you finding a solution by yourself ;). Coding is doing.