How to do Dropbox Like Login Button?

I'm trying to do Dropbox like login button. There was a thread dropbox login popup method in jQuery? but I couldn't do something on this. I want it to be opened when I press the login button same as

This is an example code. Now it works on hover. But I want on click. I tried focus but couldn't succeed.

<div id="login">
    <a href="#">Login</a>
        Login Form
        Lorem Ipsum blablbalbabababa lbablaabalbalba


div#login {
    position: relative;
    float: right;
    height: 20px;
    padding: 5px;
div#login:focus {
    background: rgba(0,0,0,.2);
div#login div {
    position: absolute;
    width: 200px;
    height: 100px;
    padding: 10px;
    background: rgba(0,0,0,.2);
    visibility: hidden;
div#login:focus div {
    visibility: visible;

This is the demo of this code

Probably it is easier with Jquery but I don't know how.



Simply eliminate this rule:

div#login:focus div {
    visibility: visible;

And then this piece of jQuery will make it visible on click:

$("#login a").click(function(){
    $("#login div").css("visibility","visible");

You can see it action here:

(I added a margin so the JSFiddle "Result" banner wouldn't get in the way of the click.")

EDIT: If you require that the behavior also "close" the login area if you click elsewhere, try something like this:

    $("#login div").css("visibility","visible");

    $("#login div").css("visibility","hidden");


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.