Making drop down menu by click using css

Question

I have an simple example of drop down menu by click using AJAX:

http://jsfiddle.net/dmitry313/1s62x8hc/2/

HTML:

<a href="javascript:void(0);" class="dropmenu">Dropdown menu</a>
<ul style="display:none">
    <li><a href="#">Dropdown link 1</a></li>
    <li><a href="#">Dropdown link 2</a></li>
</ul>

SCRIPT:

 $(document).ready(function () {
        var click = function () {
            var divObj = $(this).next();
            var nstyle = divObj.css("display");
            if (nstyle == "none") {
                divObj.slideDown(false, function () {
                    $("html").bind("click", function () {
                        divObj.slideUp();
                    });
                });
            }
        };
        $(".dropmenu").click(click);
    });

Is it possible to make the same without any script, just using CSS?

EDIT: Updated link

score 1 · Accepted Answer · answered Sep 23 '14 at 08:17

You can trigger a css click using a hack!!

Work with an checkbox!!

Sample:

      ul{
            display: none;
        }
        #checkbox{
            opacity: 0;
        }
        #checkbox:checked + ul {
            
            display: block;
        }

    <div class="container">
        <label for="checkbox">Dropdown menu</label>
        <input id="checkbox" type="checkbox" />        
        <ul>
            <li><a href="#">Dropdown link 1</a></li>
            <li><a href="#">Dropdown link 2</a></li>
        </ul>
    </div>

You can use transitions to animate the show an hide effect :) This is just a very simple example!!

Mention: this is a CSS3 hack if you need borwser support for old browsers this is not working.

Thanks a lot for your answer. Very good example! – Mia Sep 23 '14 at 09:22 — Mia, Sep 23 '14 at 09:22

score 0 · Answer 2 · answered Sep 23 '14 at 07:57

0

No, You need a least three line of javascript.

answered Sep 23 '14 at 07:57

Agus Putra Dana

624
1
6
14

score 0 · Answer 3 · answered Sep 23 '14 at 07:57

0

As far as I know you can't have an onClick method or something similar in CSS.

answered Sep 23 '14 at 07:57

Florin Pop

4,997
3
22
57

sman0307 · Answer 4 · 2014-09-23T08:09:43.730

0

pure Html/CSS Solution using html nested lists - would still need a few lines of JS to make it onClick

http://jsfiddle.net/t1zw41ep/2/

<nav>
<ul>
    <li><a href="#">Dropdown Menu</a>

        <ul>
            <li><a href="#">Dropdown Link 1</a>

            </li>
            <li><a href="#">Dropdown Link 2</a>

            </li>
        </ul>
    </li>
</ul>
</nav>

See: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

edited Sep 23 '14 at 08:09

answered Sep 23 '14 at 08:00

sman0307

138
1
8

I need the drop after mouse click – Mia Sep 23 '14 at 09:20
1

The code snippet by user Steven Wave using the checkbox hack is the only way to do it without JS or JQuery, however using CSS3 is limited in that it will only run onmouseclick in modern browsers. – sman0307 Sep 23 '14 at 09:24

Making drop down menu by click using css

4 Answers4