css hover to onclick conversation

Question

I was wondering if anyone could help me out. I'm trying to make a simple folio site, and I have this link in the top nav that when clicked on would appear a horizontal menu underneath the header. So far I have goten it to work with just css, but I don't like how the menu appears when hovered, it would look much more professional if it appeared when clicked and stayed there until you click on the same link again. if anyone could help me that'll be great. I've tried all sorts of java tutorials and won't very successful I didn't fully understand it.

<header>
    <a class="home" href="../index.htm" title="Home Page"></a>
    <a class="to_nav" href="#nav" ></a>
    <div class="logo">
        <a href="#top">
            <h1>Deeran</h1>
            <span>Graphic Design</span>
        </a>
    </div>
    <nav>
        <ul class="drop">
            <li>
                <a id="menu"></a>
                <ul class="hide">
                    <li><a href="#folio">Portfolio</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact/Hire</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

And here's the css

nav {margin: 0; padding: 0;}
nav ul li a#menu {
    display: block;
    width: 67px;
    height: 50px;
    position: absolute;
    right: 0px;
    top: 0px;
    margin-top: 9px;
    margin-right: 15px;
    margin-bottom: 0px;
    margin-left: 15px;
}

nav ul ul.hide {
    display: none;
    list-style: none;
    margin: 10px 0 0;
    text-indent: none;
    clear: both;
    width: 100%;
    position: absolute;
    left: 0px;
}

nav ul ul.hide li {margin: 0;}
nav ul li:hover > ul {
    display: block;
    list-style-type: none;
    }

if there was one simple way to convert that one :hover function to onClick I would be very grateful :)

Answer 1

The 'click' event cannot be listened for with css. Remove your :hover rule and add some JavaScript. In the code you provided, you don't have anything in the #menu element for the user to click on, so I added some text for the fiddle.

http://jsfiddle.net/Fc75u/

JavaScript:

var toggle = document.getElementById('menu');
var menu = document.getElementsByClassName('hide');
toggle.addEventListener('click', function(event) {
    menu[0].style.display == "block" ? menu[0].style.display = "none" : menu[0].style.display = "block";
});

jQuery:

$('#menu').click(function () {
    $('.hide').toggle();
});

Answer 2

make

nav ul li:hover > ul {
    display: block;
    list-style-type: none;
    }

to

nav ul li.active > ul {
    display: block;
    list-style-type: none;
    }

Then use javascript to add a class active onClick.

What makes SO wonderful is that we can refer to similar cases easily :)

For javascript part please refer this answer .

Add/Remove class onclick with JavaScript no librarys