Simple and effective dropdown login box

October 31, 2011 by Catalin Rosu - 92 comments

Web users log in every day, so imagine how many times log in forms are being used in a single day. Usually, it don’t take too much to fill a form like this, but using a dropdown solution will speed up things for you.

In this article, you will see how to create a good looking dropdown login form using CSS3 and a bit of jQuery.

View demo

The concept

The main purpose is to avoid waiting to load a separate page in order to log in. This way you can increase user experience, as the user has the possibility to log in immediately.

Ingredients

Remember the CSS3 buttons we’ve created using HTML entities as icons? In this article we’ll use entities again to show an arrow that indicates the current state for our dropdown log in box: expanded/collapsed.

Comparing to the latest HTML5 & CSS3 login tutorial you’ve seen here, this one uses some jQuery code to animate the box when clicking on the log in button.

Also, HTML5 new form features do not miss here.

HTML

Here’s the markup we’ll use to create our CSS3 dropdown log in:

<nav>
	<ul>
		<li id="login">
			<a id="login-trigger" href="#">
				Log in <span>▼</span>
			</a>
			<div id="login-content">
				<form>
					<fieldset id="inputs">
						<input id="username" type="email" name="Email" placeholder="Your email address" required>   
						<input id="password" type="password" name="Password" placeholder="Password" required>
					</fieldset>
					<fieldset id="actions">
						<input type="submit" id="submit" value="Log in">
						<label><input type="checkbox" checked="checked"> Keep me signed in</label>
					</fieldset>
				</form>
			</div>                     
		</li>
		<li id="signup">
			<a href="">Sign up FREE</a>
		</li>
	</ul>
</nav>

CSS

There are quite a lot of CSS lines, but I think is worth it:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #eee;
  border-bottom: 1px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;    
}

nav li {
  float: left;          
}

nav #login {
  border-right: 1px solid #ddd;
  -moz-box-shadow: 1px 0 0 #fff;
  -webkit-box-shadow: 1px 0 0 #fff;
  box-shadow: 1px 0 0 #fff;  
}

nav #login-trigger,
nav #signup a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 #fff; 
}

nav #signup a {
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

nav #login-trigger {
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
  background: #fff;
}

nav #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;    
  background: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  background-image: -webkit-linear-gradient(top, #fff, #eee);
  background-image: -moz-linear-gradient(top, #fff, #eee);
  background-image: -ms-linear-gradient(top, #fff, #eee);
  background-image: -o-linear-gradient(top, #fff, #eee);
  background-image: linear-gradient(top, #fff, #eee);  
  padding: 15px;
  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -moz-border-radius: 3px 0 3px 3px;
  -webkit-border-radius: 3px 0 3px 3px;
  border-radius: 3px 0 3px 3px;
}

nav li #login-content {
  right: 0;
  width: 250px;  
}

/*--------------------*/

#inputs input {
  background: #f1f1f1;
  padding: 6px 5px;
  margin: 0 0 5px 0;
  width: 238px;
  border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 1px #ccc inset;
  -webkit-box-shadow: 0 1px 1px #ccc inset;
  box-shadow: 0 1px 1px #ccc inset;
}

#inputs input:focus {
  background-color: #fff;
  border-color: #e8c291;
  outline: none;
  -moz-box-shadow: 0 0 0 1px #e8c291 inset;
  -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
  box-shadow: 0 0 0 1px #e8c291 inset;
}

/*--------------------*/

#login #actions {
  margin: 10px 0 0 0;
}

#login #submit {		
  background-color: #d14545;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
  background-image: -webkit-linear-gradient(top, #e97171, #d14545);
  background-image: -moz-linear-gradient(top, #e97171, #d14545);
  background-image: -ms-linear-gradient(top, #e97171, #d14545);
  background-image: -o-linear-gradient(top, #e97171, #d14545);
  background-image: linear-gradient(top, #e97171, #d14545);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    
  border: 1px solid #7e1515;
  float: left;
  height: 30px;
  padding: 0;
  width: 100px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;
}

#login #submit:hover,
#login #submit:focus {		
  background-color: #e97171;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
  background-image: -webkit-linear-gradient(top, #d14545, #e97171);
  background-image: -moz-linear-gradient(top, #d14545, #e97171);
  background-image: -ms-linear-gradient(top, #d14545, #e97171);
  background-image: -o-linear-gradient(top, #d14545, #e97171);
  background-image: linear-gradient(top, #d14545, #e97171);
}	

#login #submit:active {		
  outline: none;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;		
}

#login #submit::-moz-focus-inner {
  border: none;
}

#login label {
  float: right;
  line-height: 30px;
}

#login label input {
  position: relative;
  top: 2px;
  right: 2px;
}

jQuery

The following code is quite self-explanatory. The if…else statement helps us indicate the current state for the log in box. It basically toggle the span‘s inner HTML between ▼ and ▲.

$(document).ready(function(){
	$('#login-trigger').click(function(){
		$(this).next('#login-content').slideToggle();
		$(this).toggleClass('active');					
		
		if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
			else $(this).find('span').html('&#x25BC;')
		})
});

View demo

That’s it!

I hope you enjoyed this tutorial, don’t forget to leave a comment. Thanks for reading!

If you enjoyed this article, get updates via RSS or email (it's free).

92 thoughts on “Simple and effective dropdown login box”

Yuneekguy on October 31, 2011 at 10:50 said:

You always do really cool stuff. I wanted to write this piece myself but viola! You just saved me some really precious time. Really cool and thanks for sharing.
Reply ↓
- Red on October 31, 2011 at 10:53 said:
  
  Yuneekguy, thank you. I’m glad to hear that!
  Reply ↓
Gautam Krishnan on October 31, 2011 at 15:33 said:

Really good job ! I was looking for something of this sort yesterday. My search ends here :) Thanks a lot :)
Reply ↓
- Red on November 1, 2011 at 14:54 said:
  
  Gautam, you’re welcome. ;)
  Reply ↓
RecRoot on October 31, 2011 at 21:54 said:

Your tutorials are extremely useful. THX!!!
Reply ↓
- Red on November 1, 2011 at 14:54 said:
  
  RecRoot, it’s always nice to hear that. Thanks!
  Reply ↓
Andrew Groat on November 1, 2011 at 00:55 said:

Dude, that is fricken sweet! Great job!
Reply ↓
- Red on November 1, 2011 at 14:56 said:
  
  Andrew, thanks a lot!
  Reply ↓
chIDDY on November 1, 2011 at 02:45 said:

Can You Make a Tut on a Cool Footer Please?
Reply ↓
- Red on November 1, 2011 at 15:01 said:
  
  chIDDY, I’m already planning to write an article about that in the future. ;)
  Reply ↓
  - chiddy on November 1, 2011 at 23:01 said:
    
    You really are tallented dude, coders big or small never get enough credit for the hours that they put into improving the internet. I’m only a teenager coder but you know ;) it’s fun
    Reply ↓
Airen on November 2, 2011 at 04:48 said:

good job.I like it.
Reply ↓
- Red on November 2, 2011 at 10:35 said:
  
  Thanks Airen! ;)
  Reply ↓
Free Business Wordpress Themes on November 2, 2011 at 11:06 said:

This is wonderful! Your tutorials are great and useful indeed. Thank you!
Reply ↓
Beben Koben on November 2, 2011 at 12:29 said:

nice tut’s…thanks^^
btw…nice shadow effect in your fixed top ;)
Reply ↓
- Red on November 2, 2011 at 13:44 said:
  
  Thanks Beben.
  Regarding the fixed top shadow, check this article to see how is made.
  Reply ↓
Scott McCreedy on November 2, 2011 at 17:48 said:

Thanks for posting this. Looks like it would be great on a wordpress site.
Reply ↓
- Red on November 2, 2011 at 18:14 said:
  
  Thanks for your comment Scott!
  Reply ↓
Dzinepress on November 10, 2011 at 20:33 said:

useful code you sharing.
Reply ↓
- Red on November 15, 2011 at 13:35 said:
  
  Thanks, I’m glad you found this useful.
  Reply ↓
Srinivas Reddy on November 15, 2011 at 13:29 said:

Nice post man! Thanks a ton. I used twitter like dropdown, but now i must prefers your cool one. Keep sharing.
Reply ↓
- Red on November 15, 2011 at 13:35 said:
  
  Thanks Srinivas, nice to hear you like it!
  Reply ↓
Marcus Tucker on November 17, 2011 at 16:38 said:

Nice, but the animation doesn’t look/feel right, it should slide out solidly like a real drawer, see the effect used here – http://eric.muyser.com/work/jquery/drawer/example/
More info/code here – http://eric.muyser.com/blog/post/jquery-plugin-jdrawer
Reply ↓
Chiddy on November 17, 2011 at 22:48 said:

hey bros,
just wondering can you add text in neat css to the of the bar?
cheers cuz!
Reply ↓
- Chiddy on November 17, 2011 at 22:49 said:
  
  sorry I meant on the left of the bar
  Reply ↓
  - Red on November 17, 2011 at 22:53 said:
    
    Of course, I don’t see any reason why not. You can tweak this to fit your needs.
    Reply ↓
    - Chiddy on November 18, 2011 at 06:40 said:
      
      do you know how thow?
      Reply ↓
Mike on November 23, 2011 at 17:31 said:

where does the J Query code goe?
Reply ↓
- Red on November 23, 2011 at 17:35 said:
  
  Mike, the jQuery code for this dropdown box is executed after the page loads. So, you can place it where do you wish.
  Reply ↓
  - Mike on November 23, 2011 at 17:38 said:
    
    so like the header? or where would u recommend?
    Reply ↓
    - Red on November 23, 2011 at 17:43 said:
      
      Put it in the bottom section (just before closing the body). It’s a better choice – further you may want to add extra code there.
      Reply ↓
      - Mike on November 23, 2011 at 17:46 said:
        
        Thanks. I’m new at jquery, so your help is appreciated. You have great work!
Mike on November 27, 2011 at 00:53 said:

Do you have an IE7 and IE8 hack for the CSS?
Reply ↓
- Red on November 27, 2011 at 00:58 said:
```
display: inline-block;
*display: inline;
zoom: 1;
```
  The above lines help IE7 and below to render the element as inline-block.
  Reply ↓
  - Mike on November 27, 2011 at 01:09 said:
    
    Thanks.
    Reply ↓
Piyush Thacker on November 27, 2011 at 18:39 said:

Man you saved my three days! This works like a charm!
Reply ↓
- Red on November 27, 2011 at 21:23 said:
  
  Piyush, nice to hear that you found it useful! ;)
  Reply ↓
Oğuz Çelikdemir on December 28, 2011 at 23:56 said:

What if, we would like to implement same box bottom of the page! What I want to know, when client click the button, the sliding panel should open upwards, not downwards. Thanks.
Reply ↓
- Red on January 14, 2012 at 23:16 said:
  
  Hey, why not?! Feel free to try it ;)
  Reply ↓
JuaniFioren on January 9, 2012 at 05:32 said:

I found your website 4 or 5 days ago and your works are amazing! every day i come to see the new stuff. Good luck!
PD: what about make a cool registry form?
Juan, from Argentina.
Reply ↓
- Red on January 14, 2012 at 23:17 said:
  
  Thanks Juan, I’m glad you like by blog. I’ll keep in mind your suggestion for the future articles. Cheers!
  Reply ↓
Sean on January 13, 2012 at 17:20 said:

Great post. Looks great and its relatively simple to implement. I have one question. In my website the login div opens to the far right of the webpage and not contained in the li like your example. I am a newbie to html5/css3 but i’m catching on quickly, so any help would be appreciated. Great website!! Keep up the good work.
Reply ↓
- Red on January 14, 2012 at 23:19 said:
  
  Hi Sean, I guess you’re missing a position:relative declaration somewhere in the CSS code. Check that and let me know if you fixed it! Good luck and thanks for your comment!
  Reply ↓
Stepag on January 15, 2012 at 23:13 said:

Hi your login box looks really nice but how can I implement it in my WordPress site?
Reply ↓
- Red on January 15, 2012 at 23:34 said:
  
  Hi Stepag, I’m glad you like the login box. Regarding your question, the implementation should be almost the same, whether is static HTML or a CMS like WordPress.
  Reply ↓
buntybali on January 16, 2012 at 11:52 said:

can we add this to Google free sites ??
Reply ↓
Misty on February 10, 2012 at 11:05 said:

Please advise on where to place the jquery. The html I have placed in a text widget, css in the style sheet, lost for the the correct mark up for the jquery. I’m using the latest version of wordpress. Many thanks, it looks great.
Reply ↓
- Red on February 10, 2012 at 14:07 said:
  
  The jQuery code actually executes when the page is fully loaded, so you can place it anywhere you like (as long as you link to the jQuery library first).
  Reply ↓
Bro on February 17, 2012 at 21:05 said:

Hey umm, I’m kind of a beginner , could you tell me where should I place css ,html?
Reply ↓
Bro on February 17, 2012 at 21:25 said:

and having problems with jquery , sorry for seperate comments.
Reply ↓
- Red on February 18, 2012 at 14:44 said:
  
  Hey, check the demo source page to see how everything is combined. Good luck!
  Reply ↓
  - Bro on February 18, 2012 at 22:31 said:
    
    ok thanks but I’m using wordpress and it doesnt log me in. And even if I’m logged in, it doesn’t say you’re logged in or smt like that.
    Reply ↓
Prodyot on March 8, 2012 at 09:28 said:

Beautiful form.
Thanks for the tutorial.
Now I only need to learn how to code the “sign up” part of the form.
Hope you will add that part too :)
Reply ↓
- Red on March 8, 2012 at 23:01 said:
  
  Stay tuned! Next week you’ll have a surprise :)
  Reply ↓
Ronie on March 19, 2012 at 13:10 said:

really cool stuff. ahm,.can i have that one?the dropdown login?
Reply ↓
- Red on March 19, 2012 at 13:25 said:
  
  Feel free to use it in your projects!
  Reply ↓
Ronie on March 19, 2012 at 18:24 said:

Can i download your project?
Reply ↓
mohit on March 31, 2012 at 09:02 said:

man this is just great. Nice, easy, usefull
Reply ↓
Raja Sekhar on April 19, 2012 at 15:51 said:

I am searching for this .Nice code .
Reply ↓
Tusk on May 24, 2012 at 23:03 said:

Red,
Great work, I love coming to this site and running the ideas and designs you have made on my own its great practice to help me better understand code that is too complex for me at this stage.
That being said, Is there a way that you can set up the login box to work like this:
When you click on the login button and the box drops down – can you have the cursor automatically be placed in the box so you can start typing? For my clients, it would be more convenient if they didn’t have to click twice to start typing their information into the first box.
Thanks,
Tusk
Reply ↓
- Catalin Rosu on May 24, 2012 at 23:16 said:
  
  Hi Tusk,
  You can use the autofocus boolean attribute for the first input to do that.
  Reply ↓
  - Tusk on May 25, 2012 at 16:42 said:
    
    Red,
    Thanks so much!
    Reply ↓
thatmatthallett on May 30, 2012 at 16:05 said:

First this login box is awesome and easily adaptable. I love it!
That being said I am having issues getting it to display properly in IE8, the drop down box is incorrectly sized and is loading open instead of closed.
any thoughts?
Reply ↓
Hannah on June 1, 2012 at 00:07 said:

Great job on this, it’s beautiful! Having a slight problem though – is there a way to have a contact form on the same page as the drop down? The drop down is working in my Firefox & Safari previews, but not when it’s live. I am guessing because I have a contact form on this page also… Help is appreciated, Thanks.
Reply ↓
Pranay on June 11, 2012 at 20:12 said:

How would I put this code into wordpress? Would you know?
Reply ↓
winGene on June 21, 2012 at 09:51 said:

Great Post!! Red..It will be a Good Learning material for novice prograamers like me.I just worked out on your program & its not displaying the form.& i guess its because ▼ is not getting executed.Instead it appears as ?.I cant guess what the problem is.I need your help.
Thank You!!
Reply ↓
Jess on July 12, 2012 at 12:04 said:

Hi, great tutorial, love it.
Only problem I found was it didnt actually log me into the site and the username and password were displayed in the url bar?
Thanks
Reply ↓
yanik on July 23, 2012 at 17:24 said:

Hello,
Nice work…
If you have a minute and know, I dont as i am pretty novice with Jquery and Javascript.
I Use your code to have two dropdown… One for a newsletter sign up and one for a search box…
How can i tell jquery to toggle close one dropdown when I am opening the next one?
Thanks
Yanik
Reply ↓
rgd713 on July 23, 2012 at 22:12 said:

Great code, Is there a way to change “Log in” to “Log Out” after a user has logged in?
Reply ↓
Jeff Salter on September 28, 2012 at 01:53 said:

Is there a way to get the placeholders compatible with IE?
Reply ↓
- Catalin Rosu on September 28, 2012 at 22:04 said:
  
  Jeff, you may want to check this! ;)
  Reply ↓
khaled atta on October 8, 2012 at 13:35 said:

thanks for this nice work ..
is that possible to make both login and register from in dropdown in the same code ?
Reply ↓
mike on November 5, 2012 at 12:50 said:

i think i am missing something here,,do i have to include any other js library,,because it doesn`t work with me, i did exactly like you said,,,i really want your help ,,because it is the only tutorial i understand about dropdown login
Reply ↓
- Catalin Rosu on November 5, 2012 at 21:19 said:
  
  Mike, you need to include the jQuery library. Check the demo page source for an example.
  Good luck!
  Reply ↓
  - mike on November 6, 2012 at 15:35 said:
    
    woow it works great,,,thx alot bro :)
    Reply ↓
hero on November 22, 2012 at 16:33 said:

nice work …
keep it up man
Reply ↓
Nigel on December 13, 2012 at 05:13 said:

Exactly what I was looking for, but………….
How would I then add navigation to your bar.
I’ve tried a lot of different things but nothing seems to work.
Reply ↓
edgar on December 16, 2012 at 05:21 said:

I’m using the code but I want you to take that right click give some action, I just want the action to send
Reply ↓
Jonathan on December 21, 2012 at 07:22 said:

Awesome, it was useful, thank you :)
Reply ↓
Manav on December 31, 2012 at 20:01 said:

Yeah…really nice.
Reply ↓
sayed on January 19, 2013 at 22:19 said:

thx
can u learn me how build simple slider ?
i want make it
Reply ↓
Lorenzo on February 7, 2013 at 21:02 said:

Hi,
with IE8 the drop-down menu is always open.
Can someone explain how fix it?
Reply ↓
jack on March 26, 2013 at 23:20 said:

please put sors files or send to my email.thankyou
Reply ↓
Rajarshi on April 6, 2013 at 07:04 said:

Thanks a lot! :)
Reply ↓
mahdi on April 7, 2013 at 18:14 said:

thanks a lot
Reply ↓
Tobias on April 12, 2013 at 12:04 said:

Extremely good tutorial, with gorgeous results! Bu I do have one question:
How do you actually connect this to a login script that connects to a mysql database?
Thanks in advance !
Reply ↓
- Catalin Rosu on April 16, 2013 at 12:06 said:
  
  Tobias, that’s backend not frontend. So, you must search MySql connection answer elsewhere. ;)
  Reply ↓
Peter on April 15, 2013 at 09:13 said:

This guide is outdated… Doesn’t work anymore. I followed the guide but mine just scrolls back up again right away.
Reply ↓
- Catalin Rosu on April 16, 2013 at 12:08 said:
  
  Peter, the demo is working.
  Reply ↓
Marcelo Gon on April 18, 2013 at 21:46 said:

Belo tutorial, parabens sou do Brasil. sabe me dizer se dá pra fazer isso no WordPress, se sim como deve ser feito?
Abraço
ganho mais um seguidor
SP/Brasil
Reply ↓
moep on April 28, 2013 at 18:00 said:

Hi,
very nice tut, thank you very much!
How can add some links on the left side of the top bar ?
Reply ↓
Ireco on April 29, 2013 at 19:37 said:

I can’t find class .active in your form?!
Reply ↓