1 reply [Last post]
rohitshukla90
rohitshukla90's picture
Offline
newbie
lko
Last seen: 8 years 17 weeks ago
lko
Timezone: GMT-7
Joined: 2013-05-29
Posts: 2
Points: 3

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
background: url(../images/tab_bb.png) repeat-x 0 0;
height: 42px;
position:relative;
top: 0;
z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}

.tab ul.login li.left {
background: url(../images/tab_rr.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.right {
background: url(../images/tab_ll.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(../images/tab_mm.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #15ADFF;
}

.tab ul.login li a:hover {
color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(../images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(../images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
bottom: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #15ADFF;
}

#panel a:hover {
color: white;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}

#panel .content .right {
border-right: 1px solid #333;
}

#panel .content form {
margin: 0 0 10px 0;
}

#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}

#panel .content input:focus.field {
background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(../images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(../images/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

$(document).ready(function () {

$('div#panel').fadeIn("slow");

// Expand Panel
$("#open").click(function(){
$('div#panel').slideDown("fast");

});

// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("fast");
});

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});

});

Image1 should be like image2

AttachmentSize
image 1.PNG35.47 KB
image 2.PNG35.53 KB
rohitshukla90
rohitshukla90's picture
Offline
newbie
lko
Last seen: 8 years 17 weeks ago
lko
Timezone: GMT-7
Joined: 2013-05-29
Posts: 2
Points: 3

html of above css

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
  	<title>Login Here</title>
  	<meta name="description" content="Demo of a Sliding Login Panel using jQuery 1.3.2" />
  	<meta name="keywords" content="jquery, sliding, toggle, slideUp, slideDown, login, login form, register" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />	
 
	<!-- stylesheets -->
  	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  	<link rel="stylesheet" href="css/slide.css" type="text/css" media="screen" />
    <!-- jQuery - the core -->
	<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
	<!-- Sliding effect -->
	<script src="js/slide.js" type="text/javascript"></script>
 
</head>
 
<body>
<!-- Panel -->
 
<div id="toppanel">
 
 
<div class="tab">
		<ul class="login">
			<li class="left">&nbsp;</li>
			<li>Hello Guest!</li>
			<li class="sep">|</li>
			<li id="toggle">
				<a id="open" class="open" href="#">Log In | Register</a>
				<a id="close" style="display: none;" class="close" href="#">Close Panel</a>			
			</li>
			<li class="right">&nbsp;</li>
		</ul> 
	</div> 
 
 
	<div id="panel">
		<div class="content clearfix">
			<div class="left">
				<h1>Welcome To NovaEdge Software</h1>
				<h2>Login here or be a member </h2>		
				</div>
			<div class="left">
				<!-- Login Form -->
				<form class="clearfix" action="#" method="post">
					<h1>Member Login</h1>
					<label class="grey" for="log">Username:</label>
					<input class="field" type="text" name="log" id="log" value="" size="23" />
					<label class="grey" for="pwd">Password:</label>
					<input class="field" type="password" name="pwd" id="pwd" size="23" />
	            	<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> &nbsp;Remember me</label>
        			<div class="clear"></div>
					<input type="submit" name="submit" value="Login" class="bt_login" />
					<a class="lost-pwd" href="#">Lost your password?</a>
				</form>
			</div>
			<div class="left right">			
				<!-- Register Form -->
				<form action="#" method="post">
					<h1>Not a member yet? Sign Up!</h1>				
					<label class="grey" for="signup">Username:</label>
					<input class="field" type="text" name="signup" id="signup" value="" size="23" />
					<label class="grey" for="email">Email:</label>
					<input class="field" type="text" name="email" id="email" size="23" />
					<label>A password will be e-mailed to you.</label>
					<input type="submit" name="submit" value="Register" class="bt_register" />
				</form>
			</div>
		</div>
</div> <!-- /login -->	
 
	<!-- The tab on top -->	
	<!-- / top -->
 
</div> <!--panel -->
 
</body>

Note:----other images which have been used are attached bellow...Plz help me

//mod edit: Please use the code button or bbcode, [code][/code] to wrap your source code. Fixed. ~gt

AttachmentSize
tab_bb.png 263 bytes
tab_ll.png 1.13 KB
tab_mm.png 303 bytes
tab_rr.png 1.11 KB
bg.jpg 290 bytes
bt_close.png 2.1 KB
bt_login.png 1.08 KB
bt_open.png 2 KB
bt_register.png 1.14 KB