gpt4 book ai didi

css - 如何像在保管箱上一样创建下 zipper 接

转载 作者:太空宇宙 更新时间:2023-11-03 18:46:45 27 4
gpt4 key购买 nike

对于那些从未访问过 Dropbox 的人,这里是链接 https://www.dropbox.com/

查看“登录”的下拉菜单链接。我如何创建这样的下 zipper 接?

enter image description here

最佳答案

这是 fiddle 。只是一些 Jquery。

<body>
<div id="login">
<a href="#">Login</a>
<div>
Login Form
Lorem Ipsum blablbalbabababa lbablaabalbalba
</div>
</div>
</body>

CSS:

div#login {
position: relative;
float: right;
height: 20px;
padding: 5px;
margin-right:100px;
}
div#login:hover {
background: rgba(0,0,0,.2);
}
div#login div {
position: absolute;
top:30px;
right:0;
width: 200px;
height: 100px;
padding: 10px;
background: rgba(0,0,0,.2);
visibility: hidden;
}
body{height:1000px;}

JQuery:

$("#login").click(function(e){
$("#login div").css("visibility","visible");
e.stopPropagation();
});

$("body").click(function(e){
$("#login div").css("visibility","hidden");
});

http://jsfiddle.net/jPPew/6/

关于css - 如何像在保管箱上一样创建下 zipper 接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16220923/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com