Drop-Down Menu On Click

Question

Hello I am trying again for an answer - the first time someone advised me on how to get what I want for hover, but I want it for when you click on the menu link.

I am a relative beginner to web development and am currently redesigning my DJ website.

http://www.jameswinfield.co.uk/v2.html

Within the top-left menu, I want to have a div that drops down upon clicking the Events tab (to show the next event I am DJing at).

I would rather do it without JavaScript/jQuery if possible.

I have tried various ideas but none are working.

Please can you help.

Thanks James

Answer 1

This can't be achieved with pure CSS, if you want your element to be toggle-able.

You can use :active on a link in CSS to change the styling (ex: show the next div ) but this won't work if the style changes should persist once you stop clicking on the element.

A little hack to get this to work is to use the :target selector in CSS. Your HTML would look something like this :

<a href="#your_element">Click to toggle</a>

<div id="your_element">This will show up when you click on the link.</div>

And in CSS ..

#your_element{display: none;}
#your_element:target{display: block;}

Example : http://jsbin.com/pifiwezaji/1/

The main issue with this is that your element will be shown until the page is refreshed, I don't think there's a way to hide it again without using some Javascript. The browser support for the :target selector is pretty good, supported by all browsers except IE8 and below.

That being said, I would recommand using Javascript/jQuery for this. It will take only a couple of lines and it will be a lot easier to manage.

Answer 2

CSS has no click event handling. What it does have is the :hover pseudo-element, which you can use with transition to create what you want.

I'd do something like this:

HTML:

<div class='expandable'>
    ...stuff...
</div>

CSS:

.expandable {
    background:#f00;
    height:50px;
    overflow:hidden;
    transition:width 1s ease;
    width:50px;
}

.expandable:hover {
    width:200px;
}

(untested)

In plain English, this says:

A div that has the class expandable shouldn't have any overflow and it should be 50 x 50 with a red background. If the width changes, transition it over 1 second. When it's hovered, change the width to 200px.

That should get you started. Good luck!