Slide Down jQuery Login / Info window

November 13th, 2011

I was recently trying to come up with a nice way to have a “login bar” that sticks to the top of the page, and will slide down a login box when someone clicks on it. Below is 2 examples of this feature:

Overall width of the page, and set to “stick” at the top of the page (even when they scroll down) – http://www.mywebsitedesignersblog.com/examples/slide_down_login_box.html
Fixed in a main div, and NOT set to “stick” to the top: http://www.mywebsitedesignersblog.com/examples/slide_down_login_box2.html

The 1st one is my personal favourite, as it will stay at the top of their browser (even when they scroll down)

The 2nd example is the same, but instead of using :

#login_slide {
    position: relative;
    border: 1px solid transparent;
    width: 100%;
    z-index: 100;
    top: 0px; right: 0px; left: 0px;
 }

..we use “fixed” instead of “absolute”:

#login_slide {
    position: fixed;
    border: 1px solid transparent;
    width: 100%;
    z-index: 100;
    top: 0px; right: 0px; left: 0px;
 }

Ok – so now here is how to set it up:

1) Add the following Javascript:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
<script>
$(document).ready(function() {

	$('#opener_block_link').click( function() {
		$('#login_block').slideDown();
		$('#opener_block_link').hide();
		$('#opener_block_link_close').show();
	});
	$('#opener_block_link_close').click( function() {
		$('#login_block').slideUp();
		$('#opener_block_link_close').hide();
		$('#opener_block_link').show();
	});

});
</script>

2) Add the following CSS:

 #login_slide {
    position: fixed;
    border: 1px solid transparent;
    width: 100%;
    z-index: 100;
    top: 0px; right: 0px; left: 0px;
 }
 #login_block {
	height: 125px;
	background: #272727;
	display: none;
	color: white;
	font-family: Tahoma;
	font-size: 11px;
 }
 #opener_block {
	background-image: url(./login_block/tab_b.png);
	background-position: bottom;
	height: 42px;
	color: white;
	font-family: Tahoma;
	font-size: 11px;
 }
 #opener_block a:link {
	color: white;
	text-decoration: none;
 }
 .login_blocks {
	width: 32%;
	float: left;
	padding: 5px 5px 5px 5px;
	z-index: 101;
	height: 115px;;
	background-position: bottom;
 }

 #opener_block #left_img {
	float: right; width: 30px; height: 42px;
	background: url(./login_block/tab_r.png);
 }
 #opener_block #right_img {
	float: right; width: 30px; height: 42px;
	background: url(./login_block/tab_l.png);
 }
 #opener_block #login_text {
	float: right;
	width: 300px; height: 32px;
	background: url(./login_block/tab_m.png);
	padding-top: 10px;
	text-align: center;
 }

 #login_slide .login_blocks .login_field_left {
	padding-top: 3px;
	float: left;
	width: 100px;
 }

 #login_slide .login_blocks .login_field_right {
	padding-top: 3px;
	float: left;
	width: 200px;
 }
 #close_text { display: none; }
 .special_button {
	background: green;
	border: 2px solid white;
	padding: 5px;
 }
 .special_button:hover {
	background: #CFA344;
 }

 .special_button a:link {
	color: white;
	text-decoration: none;
 }

..and last but not least, add the HTML in:

<div id="login_slide">
		<div id="login_block">

			<div class="login_blocks">
				some blurb about why its a great idea to signup to your site :)
			</div>
			<div class="login_blocks">

				<form method="post" action="#" style="border: 0px;">

					<div class="login_field_left">
						Username:
					</div>
					<div class="login_field_right">
						<input type="text" name="Username" />
					</div>
					<div style="clear: both;"></div>

					<div class="login_field_left">
						Password:
					</div>
					<div class="login_field_right">
						<input type="text" name="Password" />
					</div>
					<div style="clear: both;"></div>
				</form>

			</div>
			<div class="login_blocks">
				Maybe a bit more blurb about why its so important to signup to your site - with a "register" link, and maybe "lost password" as well?

					<br /><br />
					<span class="special_button"><a href="signup.html">Signup</a></span>
					<span class="special_button"><a href="lost_password.html">Lost Password?</a></span>

			</div>
			<div style="clear: both;"></div>
		</div>
		<div id="opener_block">
			<div id="left_img"></div>
			<div id="login_text">
				<a href="javascript: void(0);" id="opener_block_link">click to view login</a>
				<a href="javascript: void(0);" id="opener_block_link_close">close</a>
			</div>
			<div id="right_img"></div>
			<div style="clear: both;"></div>
		</div>
</div>

4) Download these images, and upload them into the “login_block” folder

Thats it :) Simply customize the contents in the HTML, and you should have a working login box. Enjoy!

Andy

Andy

I’ve been working as a Web-Design / Coder for many years now, and thought it was finally time for me to give back some of the stuff I’ve learned over the years. I started this blog in November 2010, and have already added quite a few varying articles to the site. I’m always looking for new suggestions, so please visit the forum, or shoot me an email with suggestions!

Website – More Posts

Categories: Uncategorized

Related Posts: