Making drop down menu by click using css [duplicate]

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

Steven Web · Accepted Answer · 2014-09-23 08:17:53Z

1

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.

answered Sep 23, 2014 at 8:17

Steven Web

1,96113 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mia Over a year ago

Thanks a lot for your answer. Very good example!

Agus Putra Dana · Accepted Answer · 2014-09-23 07:57:13Z

0

No, You need a least three line of javascript.

answered Sep 23, 2014 at 7:57

Agus Putra Dana

7191 gold badge6 silver badges16 bronze badges

Comments

Florin Pop · Accepted Answer · 2014-09-23 07:57:50Z

0

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

answered Sep 23, 2014 at 7:57

Florin Pop

5,1454 gold badges29 silver badges60 bronze badges

Comments

sman0307 · Accepted Answer · 2014-09-23 08:09:43Z

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, 2014 at 8:09

answered Sep 23, 2014 at 8:00

sman0307

3083 silver badges9 bronze badges

2 Comments

Mia Over a year ago

I need the drop after mouse click

sman0307 Over a year ago

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.

Collectives™ on Stack Overflow

Making drop down menu by click using css [duplicate]

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Linked

Related