drop_down_login_form

by mikehudak

HTML

<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

article, aside, details, figcaption, figure, 
		footer, header, hgroup, menu, nav, section {
		  display: block;
		}
		
		fieldset
		{
		  margin: 0;
		  padding: 0;
		  border: 0;
		}
		
		input:focus,textarea:focus {
		  outline: none;
		}
		
		/*----------------------*/
		
		body
		{
			font-family: Arial, Helvetica, sans-serif;
			color: #444;
			background: #eee url("/wp-content/uploads/2011/10/noise-pattern.png");
			margin: 0;
			font-size: 12px;
		}     
		
		/*----------------------*/
		
		.cf:before,
		.cf:after {
		  content:"";
		  display:table;
		}
		
		.cf:after {
		  clear:both;
		}
		
		.cf {
		  zoom:1;
		}
		  
		/*----------------------*/
		
		header {
		  padding: 8px 10%;
		  border-bottom: 1px solid #fff;
		  background-color: #777;
		  background-image: -webkit-gradient(linear, left top, left bottom, from(#777), to(#555));
		  background-image: -webkit-linear-gradient(top, #777, #555);
		  background-image: -moz-linear-gradient(top, #777, #555);
		  background-image: -ms-linear-gradient(top, #777, #555);
		  background-image: -o-linear-gradient(top, #777, #555);
		  background-image: linear-gradient(top, #777, #555);
		  -moz-box-shadow: 0 -3px 3px rgba(0,0,0,.5) inset;
		  -webkit-box-shadow: 0 -3px 3px rgba(0,0,0,.5) inset;
		  box-shadow: 0 -3px 3px rgba(0,0,0,.5) inset;
		}
		
		/*----------------------*/
		
		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;
		 ...

JavaScript

$(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;')
		})
});