コードが多すぎるので、Fiddleに配置しました。http://jsfiddle.net/ylkwan/XP39S/7/、Chromeを使用している場合は、ctrl + shift + jを押して、ログインボタンまたはサインアップボタンをダブルクリックします。いくつかのエラーが発生します
css
/* Below is Header elements */
#header{
padding: 4px 4px;
border-bottom: 1px solid #fff;
background-color: #777;
box-shadow: 0 -3px 3px rgba(0,0,0,.5) inset;
width:1200;
border-radius: 0 0 5 5;
}
#header #loginpaneldiv{
float: right;
}
#header #loginpaneldiv ul{
margin: 0 8 0 0 ;
padding: 0;
list-style: none;
}
#header #loginpaneldiv ul li {
height :27px;
padding:0;
float: left;
display: inline-block;
}
#header #loginpaneldiv ul li.left {
border-right: 1px solid #ddd;
}
#header #loginpaneldiv li a {
background:#eee;
height:100%;
display: inline-block;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 #fff;
}
#header #loginpaneldiv ul li.left a{
border-radius: 2 0 0 2;
}
#header #loginpaneldiv ul li.right a{
border-radius: 0 2 2 0;
}
#header #loginpaneldiv a:hover
{
background:#fff;
}
#header .form{
display: none;
float: right;
position: relative;
top:-2;
margin: 0px 0px -100% 0px;
padding: 15px;
border-bottom: 1px solid #fff;
border-radius: 3px 0 3px 3px;
width:250px;
z-index:100;
background: #fff;
background-image: linear-gradient(top, #fff, #eee);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
}
html
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd" >
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="loginpaneldiv">
<ul>
<li class="left" id="login">
<a href="#">Log in <span>▼</span></a>
</li>
<li class="right" id="signup">
<a href="#">Sign up <span>▼</span></a>
</li>
</ul>
</div>
<div style="clear:both"></div>
<div id="loginformdiv" class="form">
<form id="loginform" action="" method="post">
<input class="textbox" id="email" type="email" name="email" placeholder="Your email address" required>
</form>
</div>
<div id="signupformdiv" class="form">
<form id="signupform" action="" method="post">
<input class="textbox" id="lastname" type="text" name="lastname" placeholder="Your Last Name" required>
</form>
</div>
</div>
</div>
</body>
</html>
jquery
$(document).ready(function(){
function hide($element){
$element.css('background','#eee');
$element.find("span").html("▼");
$element.css('hover','#fff');
$('#'+$element.attr("id")+'formdiv').hide();
}
function slideUp($element){
$element.find("span").html("▼");
$element.css('background','#eee');
$('#'+$element.attr("id")+'formdiv').slideUp("fast");
}
function slideDown($element){
$element.css('background','#fff');
$element.find("span").html("▲");
$('#'+$element.attr("id")+'formdiv').slideDown("fast");
}
try{
$("#loginpaneldiv li").click(function(event){
if($(this).attr("id")=="login"){
if($('#loginformdiv').is(':visible')){
hide($("#signup"));
slideUp($('#login'));
}else{
hide($("#signup"));
slideDown($('#login'));
}
}else if($(this).attr("id")=="signup"){
if($('#signupformdiv').is(':visible')){
hide($("#login"));
slideUp($('#signup'));
}else{
hide($("#login"));
slideDown($('#signup'));
}
}
});
}catch(e){
}
});