9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Monday, May 2, 2011

Tab Style Login and Signup with CSS

This post is very basic level CSS implementation. I want to explain how to design tab style login and registration panel with CSS, HTML and Jquery. Tab system help you to save page space, Just take a quick look at these four steps, use it and enrich your web projects. I had implemented this at labs.9lessons.info.
Login Signup Design

Download Script     Live Demo

Step 1
Layout divided into three horizontal parts are Container, Tabbox and Panel. Here Container is the parent div.

HTML Code
<div id="container">
<div id="tabbox"></div>
<div id="panel"></div>
</div>
Login and Registration Tab

CSS Code
#container
{
width:350px
}
#tabbox
{
height:40px
}
#panel
{
background-color:#FFF;
height:300px;
}

Step 2
Tabbox div divided into two vertical parts called tabs are Login and Signup

HTML Code
<div id="tabbox">
<a href="#" id="signup" class="tab signup">Signup</a>
<a href="#" id="login" class="tab select">Login</a&gt;
</div>
Login and Registration Tab

CSS Code
Contains CSS3 code for round corners. Here signup class for margin left 8px it allots gap between login and signup tabs.
.tab
{
background: #dedede;display: block;height: 40px;
line-height: 40px;text-align: center;
width: 80px;float: right;font-weight: bold;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius: 4px 4px 0px 0px;
}
a
{
color: #000;
margin: 0;
padding: 0;
text-decoration: none;
}
.signup
{
margin-left:8px;
}
.select
{
background-color:#FFF;
}

Step 3
Now Panel div divided into two horizontal parts are Loginbox and Signupbox. By default Signupbox display none.

HTML Code
<div id="panel">
<div id="loginbox">Login Form</div>
<div id="signupbox"&gt;Signup Form</div>
</div>

Login and Registration Tab

CSS Code
#loginbox
{
min-height:200px;
padding:10px;
}
#signupbox
{
min-height:200px;
padding:10px;
display:none;
}

Step 4
Handling DOM objects with Javscript .

Login and Registration Tab

Javascript Code
$(".tab").click(function(){})- tab is the class name of anchor tag. Using $(this).attr('id') - calling the anchor tag ID value.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{

$(".tab").click(function()
{
var X=$(this).attr('id');

if(X=='signup')
{
$("#login").removeClass('select');
$("#signup").addClass('select');
$("#loginbox").slideUp();
$("#signupbox").slideDown();
}
else
{
$("#signup").removeClass('select');
$("#login").addClass('select');
$("#signupbox").slideUp();
$("#loginbox").slideDown();
}

});

});
</script>
Comments
{ 42 comments }
Michael said...

wow..

Anonymous said...

very guddddddddddddddd...........

Anonymous said...

nice

Anonymous said...

veryyy nice thnnnx

budi handug said...

i usually use jquery-ui to implement tab, but this is very nice tutorial, tab with animation on it

Anonymous said...

not running in IE

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Mon, 2 May 2011 11:45:28 UTC


Message: Syntax error
Line: 22
Char: 10
Code: 0
URI: http://demos.9lessons.info/counter.html

Sree said...

nice tut srini :)

Anonymous said...

Just one small question? What program or app do you use to draw your concepts with? I would love to do what you do in the diagram demonstration. Thanks for the codes..

Anonymous said...

very nice

Srinivas Tamada said...

@IE showing start counter error. I have included in demo for page counts

Forgot about the download script should work with IE

labs.9lessons.info

Anonymous said...

thank you. This one has a issue on internet explorer 9. Forms don't display. Works in firefox though.

miami web design said...

another css trick to learn and love,thanks a lot guys :]

Anonymous said...

superr. Thanks From Azerbaijan

domino said...

ie6 (ie) fix

< script type="application/javascript">
replace
< script type="text/javascript">

John said...

Nice tut Srinivas.

Anonymous said...

what program do u use to make wireframe ??

And how to display "Form Validation ERRORs" on "SignUp" Slide

Anonymous said...

great job!

ArielMacintosh™

Srinivas Tamada said...

Wire-frame design with Adobe illustrator

Anonymous said...

nice

Anonymous said...

super@

InnovativePhp said...

Excellent post.Keep it up

luis - Carros en Venta said...

Good post!. For those who do not have much experience with css. It helps to save space on our web forms.
Thanks

Beben Koben said...

so simple master...is good

Sid Vel said...

The tabbed effect looks swish! I can think of a few uses for it already. Thanks Srini!

Southampton Internet Marketing said...

Great information thanks for sharing this with us.In fact in all posts of this blog their is something to learn . your work is very good and i appreciate your work and hopping for some more informative posts . Again thanks

Ran Online said...

Nice information, I'll might use this on my site

Muh.shofi-assegaf said...

good luck brow...

Big News Articles said...

great tutorial, i love your lessones.

GeekDude said...

Very good post with visuvals.

shekhar said...

very nice blog

Trần Hải Tân said...

nice

Anonymous said...

Hi, I need three tabs to switch with this slide up() and slidedown() function. Can you please give the code?

oyun said...

very nice.I love css3. Thanx for sharing..

Anonymous said...

soo nice

Nachhilfe-Lehrer said...

I made a variation from the basic technique, which comprises more than 2 tabs,
changed it (a lot) and forged that:
http://www.nachhilfe-vermittlung.com/hpunkte/index.php?action=register&lang=ger

Thanx for the basic inspiration! :-)

gyani20 said...

Nice shrinivas.............thanks domino .....now working in IE

Anonymous said...

Really good, thx.

Anonymous said...

nice.....

Anonymous said...

great!..i love your tutorial..thanx again :)

Anonymous said...

Thanx...its nice.............!!!!!!!!!!! :)

Anonymous said...

hi....the examples r very nice ....its one request for u ,can u put examples of how to edit ready templates and how to keep jquery slider in that

Peluang Usaha said...

nice tutorial!... I really need it for my website, thanks for sharing :)

Post a Comment