0

在此处输入图像描述代码太多，所以我把它们放到 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>&#x25BC;</span></a>                                
                </li>
                <li class="right" id="signup">
                    <a href="#">Sign up <span>&#x25BC;</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("&#x25BC;");
        $element.css('hover','#fff');
        $('#'+$element.attr("id")+'formdiv').hide();
    }
    function slideUp($element){
        $element.find("span").html("&#x25BC;");
        $element.css('background','#eee');
        $('#'+$element.attr("id")+'formdiv').slideUp("fast");
    }

    function slideDown($element){
        $element.css('background','#fff');
        $element.find("span").html("&#x25B2;");
        $('#'+$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){
}
});
      ​
4

0 回答 0