- Demo :
![[Code] User login bar Anigifup](https://2img.net/r/ihimizer/img832/8766/anigifup.gif)
- Code:
- Code:
<!-- BEGIN switch_user_logged_out --><style type="text/css">
.logon {
width: 100%px;
text-align:center;
padding:2px 5px 5px;
text-decoration:none;
font-weight:bold;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
margin:-3px auto 0 auto;
position: relative;
}
#content {
width:520px;
min-height:500px;
}
a img {
border-width:0;
}
#topnav {
padding:10px 0px 12px;
font-size:11px;
text-align:right;
line-height:10px;
}
#topnav a.signin {
background:#88bbd4;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url("http://s873.photobucket.com/albums/ab298/c3zskin/toplogin/signin-nav-bg-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.signin:hover {
background:#59B;
*background:transparent url("http://s873.photobucket.com/albums/ab298/c3zskin/toplogin/signin-nav-bg-hover-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover {
*background-position:0 3px!important;
}
a.signin {
position:relative;
margin-left:3px;
}
a.signin span {
background-image:url("http://s873.photobucket.com/albums/ab298/c3zskin/toplogin/toggle_down_light.png");
background-repeat:no-repeat;
background-position:100% 50%;
padding:4px 16px 6px 0;
}
#topnav a.menu-open {
background:#ddeef6!important;
color:#666!important;
outline:none;
}
#small_signup {
display:inline;
float:none;
line-height:23px;
margin:25px 0 0;
width:170px;
}
a.signin.menu-open span {
background-image:url("http://s873.photobucket.com/albums/ab298/c3zskin/toplogin/toggle_up_dark.png");
color:#789;
}
#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
display:none;
background-color:#ddeef6;
position:absolute;
width:210px;
z-index:100;
border:1px transparent;
text-align:left;
padding:12px;
top: 24.5px;
right: 0px;
margin-top:5px;
margin-right: 0px;
*margin-right: -1px;
color:#789;
font-size:11px;
}
#signin_menu input[type=text], #signin_menu input[type=password] {
display:block;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #ACE;
font-size:13px;
margin:0 0 5px;
padding:5px;
width:203px;
}
#signin_menu p {
margin:0;}
#signin_menu a {
color:#6AC;}
#signin_menu label {
font-weight:normal;}
#signin_menu p.remember {
padding:10px 0;}
#signin_menu p.forgot, #signin_menu p.complete {
clear:both;
margin:5px 0;}
#signin_menu p a {
color:#27B!important;}
#signin_submit {
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#39d url('http://s873.photobucket.com/albums/ab298/c3zskin/toplogin/bg-btn-blue.png') repeat-x scroll 0 0;
border:1px solid #39D;
color:#fff;
text-shadow:0 -1px 0 #39d;
padding:4px 10px 5px;
font-size:11px;
margin:0 5px 0 0;
font-weight:bold;}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;}
#signin_submit:hover, #signin_submit:focus {
background-position:0 -5px;
cursor:pointer;}
.tipsy-inner {
padding:10px 15px;
line-height:1.5em;
font-weight:bold;}
.tipsy {
opacity:.8;
filter:alpha(opacity=80);
background-repeat:no-repeat;
padding:5px;}
.tipsy-inner {
padding:8px 8px;
max-width:200px;
font:11px 'Lucida Grande', sans-serif;
font-weight:bold;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
background-color:#000;
color:white;
text-align:left;}
</style>
<!-- end CSS --><div class="thead logon">
<div id="topnav" class="topnav">Chào mừng bạn đến với C3zone !!
Vui lòng đăng nhập hoặc <a href="/profile.forum?mode=register" rel="nofollow" id="register" title="Đăng ký làm thành viên của diễn đàn.">đăng ký !</a>
<a class="signin" id="login_" title="Thành viên đăng nhập."><span>Đăng nhập</span></a></div>
<fieldset id="signin_menu">
<form action="/login.forum" id="signin" method="post"><input id="username" type="text" name="username" size="25" title="Nhập Tài khoản của bạn :D" />
<input id="password" type="password" name="password" size="25" title="Nhập mật khẩu" />
<input id="signin_submit" type="submit" name="login" value="Ðăng nhập" title="Nhập username và mật khẩu đã cung cấp để đăng nhập, hoặc ấn vào 'đăng ký' để tao 1 tài khoản" /> Ghi nhớ ? <input type="checkbox" name="autologin" checked="true" />
<div align="center"><a href="/profile.forum?mode=sendpassword" id="resend_password_link" title="Nếu bạn quên mật khẩu, hãy
vào đây để lấy lại" >Quên mật khẩu?</a></div>
</form>
</fieldset>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".signin").(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});
$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});
});
</script>
<script type='text/javascript'>
$(function() {
$('#resend_password_link').tipsy({gravity: 'n'});
$('#login_').tipsy({gravity: 'n'});
$('#register').tipsy({gravity: 'n'});
$('#username').tipsy({gravity: 'e'});
$('#password').tipsy({gravity: 'e'});
$('#signin_submit').tipsy({gravity: 'e'});
});
</script>
<script src="http://scriptfm.googlecode.com/files/tipsy.js" type="text/javascript"></script>
<!-- END switch_user_logged_out -->
- Chú ý : Nếu đã sử dụng Facebook bottom bar ([You must be registered and logged in to see this link.]) thì bỏ đoạn sau trong code
- Code:
<script src="http://scriptfm.googlecode.com/files/tipsy.js" type="text/javascript"></script>
newbie
Nguồn : c3zone - c3zone.net
Nguồn : c3zone - c3zone.net
