CSS3 Selector That Works like jQuery's .click()?

Question

I've been using a pure CSS navigation for a few years now, and lately we've started building a bunch of mobile sites at the company I work for. I'd really like to keep using pure CSS, and note rely on jQuery, but on a mobile site, drop down menu's don't work correctly.

Is there something similar to jQuery's .click(); event in CSS3? Basically, when a user clicks on a navigation link, I want the drop down to open and stay open. I've tried looking around, but I can't seem to find anything.

Answer 1

You could use the :target selector for some basic functionality. See Chris Coyier's post about it. Note, brower support.

EDIT: Made a quick demo

Answer 2

Given some basic HTML structures, you can recreate the toggle (show/hide) capacities of JavaScript implementations:

Using :target:

HTML:

<nav id="nav">
    <h2>This would be the 'navigation' element.</h2>
</nav>
<a href="#nav">show navigation</a>
<a href="#">hide navigation</a>

CSS:

nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
nav:target {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

JS Fiddle demo.

Using :checked:

HTML:

<input type="checkbox" id="switch" />
<nav>
    <h2>This would be the 'navigation' element.</h2>
</nav>
<label for="switch">Toggle navigation</label>

CSS:

#switch {
    display: none;
}
#switch + nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#switch:checked + nav {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

label {
    cursor: pointer;
}

JS Fiddle demo.

Unfortunately the closest alternative native CSS has, to a ':clicked' selector is the :active or :focus pseudo-classes, the first selector of which will cease to match once the mouse-button is released, the second of which will cease to match once the given element is no longer focused (by either keyboard or mouse focusing elsewhere in the document).

Updated the demos, to allow for toggling the text of the label (using CSS generated content):

#switch {
    display: none;
}
#switch + nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#switch:checked + nav {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

label {
    display: inline-block;
    cursor: pointer;
}

#switch ~ label::before {
    content: 'Show ';
}

#switch:checked ~ label::before {
    content: 'Hide ';
}

JS Fiddle demo.

References:

• :checked (compatibility).
• :target (compatibility).

Answer 3

Try the :active psuedo-class. It's not completely bulletproof, but you should be able to get at least some basic functionality from it.

Answer 4

Try something like this in your CSS Code...

  selector:hover, selector:active {
     display:block;
     height:100px;//test
     width:200px; //test
     border:solid 1px #000; //test
    }