我正在创建一个下拉式登录表单,但是一旦jQuery运行正常,我将在左侧显示菜单(当“登录”在右侧时)。一些图片可以清楚地看到它:
当我点击“登录”时:
它以这种方式加载。这是代码:
HTML:
<div id="navthing">
<h2><a href="#" id="loginform">Log in</a> | <a href="#">Sign Up</a></h2>
<div class="login">
<div class="arrow-up"></div>
<div class="formholder">
<div class="randompad">
<fieldset>
<label name="email">Email</label>
<input type="email" value="[email protected]" />
<label name="password">Password</label>
<input type="password" />
<input type="submit" value="Login" />
</fieldset>
</div>
</div>
</div>
</div>
和CSS:
#navthing {
text-align: right;
padding: 0.5em;
}
.login {
position: absolute;
width:250px;
display:none;
z-index: 9999;
}
.formholder {
background: #ecf0f1;
width: 250px;
border-radius: 5px;
padding-top: 5px;
z-index: 1;
display:block;
}
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 15px solid #ECF0F1;
left: 10%;
position: absolute;
top: -10px;
}
.formholder input[type="email"], .formholder input[type="password"] {
padding: 7px 5px;
margin: 10px 0;
width: 96%;
display: block;
font-size: 18px;
border-radius: 5px;
border: none;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
.formholder input[type="email"]:focus, .formholder input[type="password"]:focus {
outline: none;
box-shadow: 0 0 1px 1px #1abc9c;
}
.formholder input[type="submit"] {
background: #1abc9c;
padding: 10px;
font-size: 20px;
display: block;
width: 100%;
border: none;
color: #fff;
border-radius: 5px;
}
.formholder input[type="submit"]:hover {
background: #1bc6a4;
}
.randompad {
padding: 10px;
}
.green {
color: #1abc9c;
}
a {
color: #ecf0f1;
text-decoration: none;
}
a:hover {
color: #1abc9c;
}
我得到了.login
的position
中absolute
,因为如果不是菜单进行的darkblue
DIV更大。如何在“登录”下方显示菜单(箭头和表单的其余部分)?我正在尝试,但没有结果。谢谢你。
如果您希望此块absolute
位于relative
此链接的位置,则有两种选择。
首先,您保留此结构并为父级放置一个相对位置,header
然后对其进行定位。
或者,您可以将此块放在链接本身的容器中,然后将a添加position:relative;
到链接的容器中。
我选择第一种方式来做,这里是JsFiddle
更改的代码:
.login {
position: absolute;
width:250px;
display:none;
z-index: 9999;
right: 50px;
top:40px
}
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 15px solid #ECF0F1;
right: 10%;
position: absolute;
top: -10px;
}
header {
width:90%;
height:30%;
margin: 0 auto;
background-color:darkblue;
color:white;
/*text-align:center;*/
z-index: 8;
position:relative; /* I add this line to make it works */
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句