Signin Dropdown Box like Twitter with jQuery

September 5, 2011

View Demo
Download

Hi folks, this time i created a Twitter style dropdown box with jQuery. This script is very simple, just play with .hide() and .show() method. I also added a function, that allow to hide the dropdown box if you click anywhere on the document.

HTML

The markup is really simple, create the bar that contains the login box. We must create an ID “session” that allows the “active” state, that will be activated by jQuery if you do click on “Sign in”. Finally we create a simple form containing “Username” and “Password”, a simple checkbox “Remember me” and the “Submit” button.

<div id="top-stuff">
<div id="top-bar-out">
<div id="container">
<div id="topnav">
<div class="active-links">
    <div id="session">
    <a id="signin-link" href="#">
    <em>Have an account?</em>
    <strong>Sign in</strong>
    </a>
    </div>
        <div id="signin-dropdown">
    
        <form method="post" class="signin" action="#">
        <fieldset class="textbox">
        <label class="username">
        <span>Username or email</span>
        <input id="username" name="username" value="" type="text" autocomplete="on">
        </label>
        
        <label class="password">
        <span>Password</span>
        <input id="password" name="password" value="" type="password">
        </label>
        </fieldset>
        
        <fieldset class="remb">
        <label class="remember">
        <input type="checkbox" value="1" name="remember_me" />
        <span>Remember me</span>
        </label>
        <button class="submit button" type="button">Sign in</button>
        </fieldset>
        <p>
        <a class="forgot" href="#">Forgot your password</a>
        <br>
        <a class="mobile" href="#">Already using Twitter via SMS?</a>
        </p>
        </form>
    </div>
        </div>
     </div>
</div>
</div>
</div>

CSS

Now we have to fill the CSS to have an agreeable effect of the dropdown box. In this example i opted for CSS3 property to have better performance without use images.

* {
    margin: 0;
    padding: 0;
}

body {
    background: #fff;
    position: relative;
    font: 13px Arial, Helvetica, sans-serif;
}

a {
    text-decoration: none;
    color: #00c6ff;
}

.content {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

#top-stuff {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 12;
}

#top-bar-out {
    display: block;
    position: relative;
    width: 100%;
    height: 40px;
    background: -moz-linear-gradient(center top, #333333, #111111);
    background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));
    background: -o-linear-gradient(top, #333333, #111111);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#111111');
    box-shadow: 0 1px 2px #666666;
    -webkit-box-shadow: 0 1px 2px #666666;
}

.active-links {
    position: absolute;
    right: 8px;
    top: 0;
}

#container {
    width: 780px;
    margin: 0 auto;
    position: relative;
}

#topnav {
    text-align: right;
}

#session {
    cursor: pointer;
    display: inline-block;
    height: 20px;
    padding: 10px 12px;
    vertical-align: top;
    white-space: nowrap;
}

#session.active, #session:hover {
    background: rgba(255,255,255,0.1);
    color: fff;
}

a#signin-link {
    color: #bababa;
    position: relative;
}

a#signin-link em {
    font-size: 10px;
    font-style: normal;
    margin-right: 4px;
}

a#signin-link strong {
    color: #fff;
}

#signin-dropdown {
    background-color: #202020;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 2px #666666;
    -webkit-box-shadow: 0 1px 2px #666666;
    min-height: 200px;
    min-width: 160px;
    position: absolute;
    right: 0;
    display: none;
}

#signin-dropdown form {
    cursor: pointer;
    padding: 10px;
    text-align: left;
}

#signin-dropdown .textbox span {
    color: #BABABA;
}

#signin-dropdown .textbox input {
    width: 200px;
}

fieldset {
    border: none;
}

form.signin .textbox label {
    display: block;
    padding-bottom: 7px;
}

form.signin .textbox span {
    display: block;
}

form.signin p, form.signin span {
    color: #999;
    font-size: 11px;
    line-height: 18px;
}

form.signin .textbox input {
    background: #666666;
    border-bottom: 1px solid #333;
    border-left: 1px solid #000;
    border-right: 1px solid #333;
    border-top: 1px solid #000;
    color: #fff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font: 13px Arial, Helvetica, sans-serif;
    padding: 6px 6px 4px;
}

form.signin .remb {
    padding: 9px 0;
    position: relative;
    text-align: right;
}

form.signin .remb .remember {
    text-align: left;
    position: absolute;
    left: 0;
}

.button {
    background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
    background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
    background: -o-linear-gradient(top, #f3f3f3, #dddddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
    border-color: #000;
    border-width: 1px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #333;
    cursor: pointer;
    display: inline-block;
    padding: 4px 7px;
    margin: 0;
    font: 12px;
}

.button:hover {
    background: #ddd;
}

jQuery

The first step is to call the jQuery file.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Create a new script tag and insert the code.

$(document).ready(function () {
$('.active-links').click(function () {
    //Conditional states allow the dropdown box appear and disappear 
    if ($('#signin-dropdown').is(":visible")) {
        $('#signin-dropdown').hide()
    $('#session').removeClass('active'); // When the dropdown is not visible removes the class "active"
    } else {
        $('#signin-dropdown').show()
    $('#session').addClass('active'); // When the dropdown is visible add class "active"
    }
    return false;
});
Allow to hide the dropdown box if you click anywhere on the document.
$('#signin-dropdown').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
    $('#signin-dropdown').hide();
$('#session').removeClass('active');
});
});

The Logic

  1. Creating conditional statements
    We must create a conditional statements, to allow you to enable and disable the dropdown box when calling the “click” function.
  2. Add and Remove Class
    To recreate the “active state” must add “addClass” when dropdown box is visible, and when the dropdown is not visible we must remove the active class “removeClass“.
  3. event.stopPropagation
    The stopPropagation method is used prevent further propagation of an event during event flow. If this method is called by any EventListener the event will cease propagating through the tree. The event will complete dispatch to all listeners on the current EventTarget before event flow stops. This method may be used during any stage of event flow.

    You will find many interesting things about this method:
    stopPropagation
    jQuery Events
    W3C DOM

Alternative Method

Alternatively you can also use the method “toggleClass“, seems to work exactly the same :)

$(document).ready(function () {
$('.active-links').click(function () {
    $('#signin-dropdown').toggle();
    $('#session').toggleClass('active');
    return false;
});
$('#signin-dropdown').click(function(e) {
    e.stopPropagation();
});
$(document).click(function() {
    $('#signin-dropdown').hide();
    $('#session').removeClass('active');
});
});

Conclusion

If you have any comments, criticisms and additional advice, please comment :)

Share On