Tab Style Login and Signup with CSS
Wall Script
Wall Script
Monday, May 02, 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>
web notification

41 comments:

  1. very guddddddddddddddd...........

    ReplyDelete
  2. veryyy nice thnnnx

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

    ReplyDelete
  4. 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

    ReplyDelete
  5. 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..

    ReplyDelete
  6. @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

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

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

    ReplyDelete
  9. superr. Thanks From Azerbaijan

    ReplyDelete
  10. ie6 (ie) fix

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

    ReplyDelete
  11. what program do u use to make wireframe ??

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

    ReplyDelete
  12. great job!

    ArielMacintosh™

    ReplyDelete
  13. Wire-frame design with Adobe illustrator

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

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

    ReplyDelete
  16. 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

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

    ReplyDelete
  18. great tutorial, i love your lessones.

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

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

    ReplyDelete
  21. 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! :-)

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

    ReplyDelete
  23. Really good, thx.

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

    ReplyDelete
  25. Thanx...its nice.............!!!!!!!!!!! :)

    ReplyDelete
  26. 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

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

    ReplyDelete
  28. I create this form but I am unable to understand how to submit this form for signup and login into my website.

    ReplyDelete

mailxengine Youtueb channel
Make in India
X