CODEWITHSUNDEEP
cssclickhover
Daniel Hollands
Daniel Hollands

Reputation: 6681

Changing CSS onhover to onclick

I'm using the following CSS:

.main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.main-navigation li {
    float: left;
    position: relative;
}
.main-navigation a {
    display: block;
    text-decoration: none;
}
.main-navigation ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    position: absolute;
    top: 1.5em;
    left: 0;
    z-index: 99999;
}
.main-navigation ul ul ul {
    left: 100%;
    top: 0;
}
.main-navigation ul ul a {
    width: 200px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
}
.main-navigation ul li:hover > ul {
    display: block;
}
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
}

/* Small menu */
.menu-toggle {
    cursor: pointer;
}
.main-small-navigation .menu {
    display: none;
}

to control a list-based, multi-level, navigation system, the HTML for which which looks something like this: https://gist.github.com/2851105.

What I'd like to know is, how can I change the hover event that makes the menu appear into a click event? Can this even be done in CSS alone, or so I need to introduce some javascript?

Thank you.

Upvotes: 0

Views: 1465

Answers (4)

Craig Swing
Craig Swing

Reputation: 8162

You should be able to adapt the answers to the following question to fit your needs

CSS: set color for selected row in a table

Upvotes: 0

Federico Giust
Federico Giust

Reputation: 1793

You need to use JavaScript or jQuery to control click events. It cannot be done using CSS.

jQuery .click()

Upvotes: 1

Joel Etherton
Joel Etherton

Reputation: 37543

The best you can hope for in css as far as a "click" event goes would be to style something using the a:active attribute. This will be called when a particular link is clicked, but it won't have the capability to do what you're looking for. It will only be able to apply visual style to the element in question.

CSS is purely a styling language. You will need JavaScript to achieve anything more.

Upvotes: 4

mingos
mingos

Reputation: 24542

This cannot be done using CSS alone, I'm afraid. You will need to use JavaScript here.

Upvotes: 1

Related Questions