I tried to make a small login box that opens when you hover over the login item in the menu bar, keeping in mind that the user doesn't have to go to another page to log in but I can't get it working. Please help
body {
background-image: url("back.jpg");
background-attachment: fixed;
}
#container {
height: 1000px;
}
#head {
position: absolute;
height: 150px;
width: 100%;
background-color: #ffffff;
right: 0px;
left: 0px;
top: 0px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
.navigationmenu-main {
list-style-type: none;
overflow: hidden;
background-color: #333;
}
.navigationmenu-parent {
float: left;
}
.navigationmenu-child {
display: inline-block;
color: white;
width: 50px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.navigationmenu-child:hover {
background-color: #111;
}
.navigationmenu-child:hover + .navigationmenu-line {
width: 100%;
}
.navigationmenu-line {
height: 3px;
background-color: red;
width: 0%;
-webkit-transition: width .3s;
-webkit-transition-timing-function: ease;
}
#main {
position: relative;
height: 700px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
top: 155px;
bottom: 100px;
box-shadow: 4px 4px 3px 1px #4d4d4d;
}
#logo-image {
position: relative;
margin-top: 40px;
margin-left: 40px;
}
#logo-image:hover {
-webkit-animation: blur 0.5s ease-in;
}
@-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
50% {
-webkit-filter: blur(1px);
filter: blur(2px);
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
}
.login-parent {
float: right;
}
.login-child {
display: inline-block;
color: white;
width: 60px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.login-child:hover {
background-color: #111;
}
.login-child:hover + .navigationmenu-line {
width: 100%;
}
#loginbox {
display: block;
visibility: hidden;
position: absolute;
top: 132px;
right: 90px;
z-index: 999;
background: #a6a6a6;
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9);
border-radius: 3px 0 3px 3px;
-webkit-transition: padding .3s;
}
.loginchild:hover + .loginbox {
visibility: visible;
}
#loginform {
padding: 5px;
}
#loginelement {
padding: 5px;
}
<!DOCTYPE html>
<title>
Le Meridian | A home away from home
</title>
<body>
<div id="container">
<div id="head">
<img src="logo.png" id="logo-image" height="20%" width="20%">
<ul id="nav_bar" class="navigationmenu-main">
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">A</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">B</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">C</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">D</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">E</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">F</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">G</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child">Sign Up</div>
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child" id="trigger">Login ▼</div>
<div class="navigationmenu-line">
</div>
<div id="loginbox">
<form id="loginform">
<input type="text" name="email" id="loginelement">
<br>
<br>
<input type="password" name="password" id="loginelement">
<br>
<br>
<input type="submit" name="loginsubmit" id="loginelement">
<input type="checkbox" name="loggedin" id="loginelement"> Stay Signed In
</form>
</div>
</li>
</ul>
</div>
<div id="main">
dsa
</div>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire