Develop Reference

How to align left and full-height side nav menu - javascript

I'm trying to build a sidenavigation menu for the tablet / mobile part of my website. What I can't do is get a left-alignment of the screen, an overlay and full-height. I am new and looking to learn, can someone help me please? I appreciate any response, thanks.
This is the approximate result that I would like to achieve: https://codepen.io/bousahla-mounir/pen/jOypjed I am not interested in aesthetics, but rather I want to get the full-screen side container with the elements inside.
This is what I did for sidenav: In the example below it is aligned to the left, but in my website it is not because it is inside a column. It then aligns to the left of that column instead of the furthest part of the screen.
var menu = document.querySelector(".mob_menu_button");
function mobile_menu() {
var x = document.getElementById("mts_mobile_menu");
if (!x.classList.contains("side_show")) {
x.classList.add ("side_show");
menu.innerHTML = '<span>Menu Open</span>';
} else {
x.classList.add("side_hide");
menu.innerHTML = '<span>Menu Closed</span>';
setTimeout(function(){
x.classList.remove("side_show");
x.classList.remove("side_hide");
},500)
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item>a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover>a {
color: #2E323A;
}
/*Icon Button Toggle Menu*/
.mob_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 100px;
position: absolute;
top: 10px;
right: 10px;
background: #fbfbfb !important;
font-weight: 500 !important;
}
.icn_button {
margin: 0;
font-size: 14px;
}
.icn_button:before {
margin: 0;
}
.icn_button:after {
margin: 0;
}
/*Icon Items Menu*/
.icn_menu:before,
.icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_menu_container {
display: flex;
position: fixed;
top: 0;
left: 0;
}
.mts_sidenav_box {
position: absolute;
margin-top: 0px;
display: flex;
height: 100vh;
}
.mts_sidenav_content {
display: none;
padding: 20px;
background-color: #fff;
min-width: 260px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
position: relative;
animation: animateFromLeft .6s
}
#keyframes animateFromLeft {
from {
left: -500px;
opacity: 0
}
to {
left: 0;
opacity: 1
}
}
#keyframes animateToLeft {
from {
left: 0;
opacity: 1
}
to {
left: -500px;
opacity: 0
}
}
.side_show {
display: block !important;
height: 100vh;
overflow: hidden;
}
.mts_sidenav_content.side_hide {
animation: animateToLeft .6s
}
<button onclick="mobile_menu()" class="mob_menu_button">
Menu
</button>
<div class="mts_mob_container">
<div class="mts_sidenav_box">
<div id="mts_mobile_menu" class="mts_sidenav_content">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>

You were most of the way there but there's a few things you missed in your attempt:
You have some classes you aren't using and are blank and were causing layout issues, so I took them out. If you need them you can add them back in but they weren't doing anything when I ran your code except causing issues.
You can globally set your styles to have no margin, padding, and box-sizing: border-box from the get-go and then adjust down your CSS as needed but by declaring it at the start you're not letting the browser make a decision for you (nor should you; you're the programmer! ;) ).
The button just needs to be sized and positioned absolutely, just like the example you provided. To have the menu take up the entirety of the viewport height, use the 100vh unit. See: https://www.sitepoint.com/css-viewport-units-quick-start/
See if this gets you where you want to go and we can troubleshoot further as necessary. :)
var menu = document.querySelector(".mob_menu_button");
function mobile_menu() {
var x = document.getElementById("mts_mobile_menu");
if (!x.classList.contains("side_show")) {
x.classList.add("side_show");
menu.innerHTML = '<span>Icon</span>';
} else {
x.classList.add("side_hide");
menu.innerHTML = '<span>Icon</span>';
setTimeout(function() {
x.classList.remove("side_show");
x.classList.remove("side_hide");
}, 500)
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item>a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover>a {
color: #2E323A;
}
/*Icon Button Toggle Menu*/
.mob_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 50px;
position: absolute;
top: 10px;
right: 10px;
background: #fbfbfb !important;
font-weight: 500 !important;
}
.icn_button {
margin: 0;
font-size: 14px;
}
.icn_button:before {
margin: 0;
}
.icn_button:after {
margin: 0;
}
/*Icon Items Menu*/
.icn_menu:before,
.icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_menu_container {
display: flex;
flex-direction: column;
align-content: flex-start;
align-items: flex-start;
}
.mts_sidenav_box {
position: absolute;
margin-top: 17px;
display: flex;
height: 100vh;
}
.mts_sidenav_content {
display: none;
padding: 20px;
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
position: relative;
animation: animateFromLeft .6s
}
#keyframes animateFromLeft {
from {
left: -500px;
opacity: 0
}
to {
left: 0;
opacity: 1
}
}
#keyframes animateToLeft {
from {
left: 0;
opacity: 1
}
to {
left: -500px;
opacity: 0
}
}
.side_show {
display: block !important;
height: 100vh;
overflow: hidden;
}
.mts_sidenav_content.side_hide {
animation: animateToLeft .6s
}
<button onclick="mobile_menu()" class="mob_menu_button">
<span>Icon</span>
</button>
<div class="mts_menu_container">
<div id="mts_mobile_menu" class="mts_sidenav_content">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user">1</i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping">2</i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down">3</i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear">4</i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket">5</i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>

Related

I have a dropdown menu that works fine. The button allows me to open and close the menu, however, if I click on the body page the menu does not close, only clicking on the button can close it.
So I would like it to close even if I click on the body of the page or anything else that isn't the button. I'm trying to close the menu with document.body.addEventListener but it doesn't work, I don't understand what I'm doing wrong. Can someone help me by pointing me the right way?
I appreciate any response, thanks.
var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
var x = document.getElementById("mts_menu");
if (x.classList.toggle ("show")) {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Account</span>';
} else {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars"></i><span class="txt_button">Account</span>';
}
}
// Close Menu clicking on body or Anywhere
document.body.addEventListener("click", function() {
var x = document.getElementById("mts_menu");
// For var x
if (e.target.id !== "mts_menu" && x.classList.contains("show")) {
x.classList.toggle("show");
}
});
/*Button Toggle Menu*/
.user_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
height: 32px;
background: #3D4350!important;
border-radius: 4px;
padding: 12px;
font-size: 14px!important;
line-height: 2;
}
.icn_button {
margin: 0;
}
.icn_button:before, .icn_button:after {
margin: 0;
}
.txt_button {
margin-left: 10px;
color: #fff;
font-size: 14px;
font-weight: 400;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
.user_menu.header {
padding: 15px 15px;
}
/*Menu header info*/
.display.name {
font-size: 14px;
font-weight: 500;
color: #303238;
line-height: 1.5;
}
.display.mail {
font-size: 13px;
color: #1E70EB;
line-height: 1.5;
}
hr.divider-menu {
border-top: 1px solid #e0e0e0;
}
/*Text Link css*/
.mnu_margin {
margin: 7px 0;
}
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 15px;
color: #212629;
}
.user_menu.item:hover > a {
color: #fff;
background: #1E70EB;
transition: all 0.2s;
}
.user_menu.item > a .link_text {
font-size: 14px;
color: #212629;
}
.user_menu.item:hover > a .link_text {
color: #fff;
}
/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_menu_container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.dropdown_box {
position: absolute;
margin-top: 20px;
}
.mts_dropdown_content {
background-color: #fff;
min-width: 160px;
width: 240px;
border-radius: 6px;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
z-index: 999;
position: relative;
visibility: hidden;
opacity: 0;
top: 50px;
height: 0;
transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s;
}
.mts_dropdown_content.show {
height: 100%;
visibility: visible;
opacity: 1;
top: 0;
transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s;
}
<button onclick="userMenu()" class="user_menu_button">
<i class="icn_button fa-solid fa-bars"></i>
<span class="txt_button">Account</span>
</button>
<div class="mts_menu_container">
<div class="dropdown_box">
<div id="mts_menu" class="mts_dropdown_content">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="divider-menu">
<div class="mnu_margin">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item last">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
</div>

Listen for a click event on the document object. Inside the handler, check if the clicked element is inside the navigation or not with Element.closest().
const usermenu = document.querySelector(".user_menu_button")
const menu = document.querySelector('#mts_menu');
document.addEventListener('click', event => {
const isClickedOutsideMenu = event.target.closest('#mts_menu') === null;
if (isClickedOutsideMenu && menu.classList.contains('open')) {
menu.classList.remove('open');
usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars"></i><span class="txt_button">Account</span>';
}
});

I solved it in this way, thanks also to the help of #Emiel
I added event.stopPropagation(); and then
//Closing Menu Part
const closing = document.querySelector("#mts_menu");
document.addEventListener("click", (evt) => {
if (!evt.target.closest("#mts_menu")) closing.classList.remove("show");
});
var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
event.stopPropagation(); //For Closing menu
var x = document.getElementById("mts_menu");
if (x.classList.toggle ("show")) {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Account</span>';
} else {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars"></i><span class="txt_button">Account</span>';
}
}
//Closing Menu Part
const closing = document.querySelector("#mts_menu");
document.addEventListener("click", (evt) => {
if (!evt.target.closest("#mts_menu")) closing.classList.remove("show");
});
/*Button Toggle Menu*/
.user_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
height: 32px;
background: #3D4350!important;
border-radius: 4px;
padding: 12px;
font-size: 14px!important;
line-height: 2;
}
.icn_button {
margin: 0;
}
.icn_button:before, .icn_button:after {
margin: 0;
}
.txt_button {
margin-left: 10px;
color: #fff;
font-size: 14px;
font-weight: 400;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
.user_menu.header {
padding: 15px 15px;
}
/*Menu header info*/
.display.name {
font-size: 14px;
font-weight: 500;
color: #303238;
line-height: 1.5;
}
.display.mail {
font-size: 13px;
color: #1E70EB;
line-height: 1.5;
}
hr.divider-menu {
border-top: 1px solid #e0e0e0;
}
/*Text Link css*/
.mnu_margin {
margin: 7px 0;
}
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 15px;
color: #212629;
}
.user_menu.item:hover > a {
color: #fff;
background: #1E70EB;
transition: all 0.2s;
}
.user_menu.item > a .link_text {
font-size: 14px;
color: #212629;
}
.user_menu.item:hover > a .link_text {
color: #fff;
}
/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_menu_container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.dropdown_box {
position: absolute;
margin-top: 20px;
}
.mts_dropdown_content {
background-color: #fff;
min-width: 160px;
width: 240px;
border-radius: 6px;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
z-index: 999;
position: relative;
visibility: hidden;
opacity: 0;
top: 50px;
height: 0;
transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s;
}
.mts_dropdown_content.show {
height: 100%;
visibility: visible;
opacity: 1;
top: 0;
transition: visibility 0.2s, max-height 0.2s, opacity 0.2s, top 0.2s, height 0.2s;
}
<button onclick="userMenu()" class="user_menu_button">
<i class="icn_button fa-solid fa-bars"></i>
<span class="txt_button">Account</span>
</button>
<div class="mts_menu_container">
<div class="dropdown_box">
<div id="mts_menu" class="mts_dropdown_content">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="divider-menu">
<div class="mnu_margin">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item last">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
</div>

I have a sidenav menu that appears and disappears when the button is clicked. Everything works fine, but I can't understand why the transition to css is not working. As you can see in the example below the menu appears and disappears sideways, but I would like to add a transition in the css. What am I doing wrong ?
Sorry for mistakes, I'm new and learning. I appreciate any help. Thanks.
var menu = document.querySelector(".mob_menu_button");
function mobile_menu(e) {
e.stopPropagation();
var x = document.getElementById("mts_mobile_menu");
if (!x.classList.contains("active")) {
x.classList.add("active");
x.classList.remove("hide");
menu.innerHTML = "<span>Close Menu<span>";
} else {
x.classList.add("hide");
menu.innerHTML = "<span>Open menu</span>";
}
}
document.addEventListener("click", function(e) {
var x = document.getElementById("mts_mobile_menu");
if (e.target.id !== "mts_mobile_menu" && x.classList.contains("active")) {
x.classList.add("hide");
x.classList.remove("active");
menu.innerHTML = "<span>Open menu</span>";
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item>a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.user_menu.item:hover>a {
color: #2e323a;
}
/*Icon Button Toggle Menu*/
.mob_menu_button {
display: flex;
align-content: flex-end;
justify-content: center;
align-items: flex-end;
width: 20%;
background: #282c33!important;
font-weight: 500!important;
position: absolute;
top: 20px;
right: 20px;
}
.icn_button {
margin: 0;
font-size: 14px;
}
.icn_button:before {
margin: 0;
}
.icn_button:after {
margin: 0;
}
/*Icon Items Menu*/
.icn_menu:before,
.icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_mob_container {
display: flex;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
background: #000000d6;
}
.mts_sidenav_box {
display: block;
width: 100%;
}
.mts_sidenav_content {
display: none;
padding: 20px;
background-color: #fff;
min-width: 160px;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
position: relative;
width: 75%;
height: 100vh;
}
.mts_sidenav_content.active {
display: block!important;
left: 0px;
}
.mts_sidenav_content.hide {
left: -100%;
}
<button onclick="mobile_menu(event)" class="mob_menu_button">Open menu</button>
<div class="mts_mob_container">
<div id="mts_mobile_menu" class="mts_sidenav_content">
<div class="mts_sidenav_box">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid" />
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>

It looks like you are toggling the element via an active class that uses display: none to display: block which you can't animate on it's own.
Instead of display, you could use transform: translateX and opacity to slide and fade in the menu. You'll also want to set pointer events to prevent accidental clicks while it's "hidden". And you might need overflow: hidden on the parent/body.
.your-class {
transition: all 0.5s ease;
transform: translateX(300px);
opacity: 0;
pointer-events: none;
}
.your-class.active {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}

I found a solution: I changed the Js and Css a bit for this, I leave the working code for anyone who has the same problem.
var menu = document.querySelector(".mob_menu_button");
function mobile_menu(e) {
e.stopPropagation();
var x = document.getElementById("mts_mobile_menu");
var y = document.getElementById("overlayx");
// For var x
if (!x.classList.contains("active")) {
x.classList.toggle("active");
menu.innerHTML = "<span>Close Menu</span>";
} else {
x.classList.remove("active");
menu.innerHTML = "<span>Open Menu</span>";
}
// For var y
if (!y.classList.contains("over")) {
y.classList.toggle("over");
} else {
y.classList.remove("over");
}
}
// Permette la chiusura del menu cliccando fuori dall'area
document.addEventListener("click", function (e) {
var x = document.getElementById("mts_mobile_menu");
var y = document.getElementById("overlayx");
// For var x
if (e.target.id !== "mts_mobile_menu" && x.classList.contains("active")) {
x.classList.toggle("active");
menu.innerHTML = "<span>Open Menu</span>";
}
// For var y
if (e.target.id !== "mts_mobile_menu" && y.classList.contains("over")) {
y.classList.toggle("over");
}
});
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.user_menu.item:hover > a {
color: #2e323a;
}
/*Icon Button Toggle Menu*/
button.mob_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 20%;
background: #282c33!important;
color: #fff;
font-weight: 500!important;
top: 40px;
right: 40px;
position: absolute;
}
.mob_menu_button > span {
z-index: 1000;
}
/*Icon Items Menu*/
.icn_menu:before,
.icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_mob_container {
display: flex;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
background: #000000d6;
opacity: 0;
transition: 0.3s;
}
.mts_mob_container.over {
opacity: 1;
}
.mts_sidenav_box {
display: block;
width: 100%;
}
.mts_sidenav_content {
left: -100%;
padding: 20px;
background-color: #fff;
min-width: 160px;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
position: relative;
width: 75%;
height: 100vh;
transition: .3s;
}
.mts_sidenav_content.active {
left: 0;
}
.mts_sidenav_content.hide {
left: -100%;
}
<button onclick="mobile_menu(event)" class="mob_menu_button"><span class="btn">Open Menu</span></button>
<div id="overlayx" class="mts_mob_container">
<div id="mts_mobile_menu" class="mts_sidenav_content">
<div class="mts_sidenav_box">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid" />
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>

I have a dropdown menu with html, css and some js. It works fine, I also added some animations to it. Now I would like to align it right under the click me button! I have been looking around on the stack and tried with float and align but I can't. Sorry but I'm new to this, can anyone help me ?
I appreciate any response, thanks.
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className += " w3-hide";
setTimeout(function(){
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");
},500)
}
}
/*Items menu*/
.user_menu_item {
display: flex;
align-items: center;
}
.user_menu_item:hover {
background: whitesmoke;
border-left: 4px solid blue;
transition: 0.3s;
}
.user_menu_item:not(:hover) {
transition: 0.3s;
}
.user_menu_item > a {
display: flex;
align-items: center;
padding: 12px 10px 12px 10px;
width: 100%;
font-size: 14px;
color: #75777D;
}
.w3-container {
position: absolute;
top: 15%;
}
.w3-dropdown-click {
display: flex;
position: relative;
}
.w3-dropdown-content {
display: none;
background-color: whitesmoke;
min-width: 160px;
overflow: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
position:relative;
animation:animateFromBottom 0.6s
}
#keyframes animateFromBottom {
from{bottom:-50px;opacity:0} to{bottom:0;opacity:1}
}
#keyframes animateToBottom {
from{bottom:0;opacity:1} to{bottom:-50px;opacity:0}
}
.w3-bar-block .w3-bar-item {
width:100%;
display:block;
padding:8px 16px;
text-align:left;
border:none;
white-space:normal;
float:none;
outline:0
}
.w3-show-block,.w3-show {
display:block!important
}
.w3-dropdown-content.w3-hide {
animation:animateToBottom 0.6s
}
.w3-button {
float: right;
}
<button onclick="myFunction()" class="w3-button">Click Me!</button>
<div class="w3-container">
<div class="w3-dropdown-click">
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<div class="user_menu_item">
<a href="/account">
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu_item">
<a href="ordini">
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu_item">
<a href="libreria">
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu_item">
<a href="impostazioni">
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu_item">
<a href="wp-login.php?action=logout">
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>

You can create a container div to put both the menu and the button themselves into and then give that container absolute positioning properties like you're doing with your menu. You'll have to adjust your menu position so when it appears it's not overlapping the button but I took care of that in the code. Also, you'll need to modify the position on the menu itself if you want the button and the menu to be on the absolute right and not offset and overflowing the right side of the screen.
See: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className += " w3-hide";
setTimeout(function() {
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");
}, 500)
}
}
.container {
display: block;
margin: 0 0;
position: absolute;
top: 10px;
right: 0px;
}
/*Items menu*/
.user_menu_item {
display: flex;
align-items: center;
}
.user_menu_item:hover {
background: whitesmoke;
border-left: 4px solid blue;
transition: 0.3s;
}
.user_menu_item:not(:hover) {
transition: 0.3s;
}
.user_menu_item>a {
display: flex;
align-items: center;
padding: 12px 10px 12px 10px;
width: 100%;
font-size: 14px;
color: #75777D;
}
.w3-container {
position: absolute;
top: 25px;
right: 0px;
}
.w3-dropdown-click {
display: flex;
position: relative;
}
.w3-dropdown-content {
display: none;
background-color: whitesmoke;
min-width: 160px;
overflow: hidden;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
position: relative;
animation: animateFromBottom 0.6s
}
#keyframes animateFromBottom {
from {
bottom: -50px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes animateToBottom {
from {
bottom: 0;
opacity: 1
}
to {
bottom: -50px;
opacity: 0
}
}
.w3-bar-block .w3-bar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0;
}
.w3-show-block,
.w3-show {
display: block !important
}
.w3-dropdown-content.w3-hide {
animation: animateToBottom 0.6s
}
.w3-button {
display: block;
}
<div class="container">
<button onclick="myFunction()" class="w3-button">Click Me!</button>
<div class="w3-container">
<div class="w3-dropdown-click">
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<div class="user_menu_item">
<a href="/account">
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu_item">
<a href="ordini">
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu_item">
<a href="libreria">
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu_item">
<a href="impostazioni">
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu_item">
<a href="wp-login.php?action=logout">
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
</div>

Add popup and button to the same parent element and set its position relative and then set top value of popup value to static value(height of btn)
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className += " w3-hide";
setTimeout(function() {
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");
}, 500);
}
}
.main_container {
position: relative;
}
/*Items menu*/
.user_menu_item {
display: flex;
align-items: center;
}
.user_menu_item:hover {
background: whitesmoke;
border-left: 4px solid blue;
transition: 0.3s;
}
.user_menu_item:not(:hover) {
transition: 0.3s;
}
.user_menu_item>a {
display: flex;
align-items: center;
padding: 12px 10px 12px 10px;
width: 100%;
font-size: 14px;
color: #75777d;
}
.w3-container {
position: absolute;
right: 0;
top: 25px;
}
.w3-dropdown-click {
display: flex;
position: relative;
}
.w3-dropdown-content {
display: none;
background-color: whitesmoke;
min-width: 160px;
overflow: hidden;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
position: relative;
animation: animateFromBottom 0.6s;
}
#keyframes animateFromBottom {
from {
bottom: -50px;
opacity: 0;
}
to {
bottom: 0;
opacity: 1;
}
}
#keyframes animateToBottom {
from {
bottom: 0;
opacity: 1;
}
to {
bottom: -50px;
opacity: 0;
}
}
.w3-bar-block .w3-bar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0;
}
.w3-show-block,
.w3-show {
display: block !important;
}
.w3-dropdown-content.w3-hide {
animation: animateToBottom 0.6s;
}
.w3-button {
float: right;
}
<div class="main_container">
<button onclick="myFunction()" class="w3-button">Click Me!</button>
<div class="w3-container">
<div class="w3-dropdown-click">
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<div class="user_menu_item">
<a href="/account">
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu_item">
<a href="ordini">
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu_item">
<a href="libreria">
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu_item">
<a href="impostazioni">
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu_item">
<a href="wp-login.php?action=logout">
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
</div>

I have a dropdown menu with a fade bottom animation. Everything works fine but there is a problem.
Expected behavior: When I click the button to open the menu, the dropdown content is displayed with a fade animation. It works!
The problem: The animation has a certain speed, 0.4s when I click to open and 0.4s when I click to close the menu. I wish this was the speed, however I am forced to stay at 0.6s when I click to close, because below that time the animation is broken causing the dropdown to behave strangely. That is, visualize it for a moment and then it disappears.
So recap: everything works fine with animation:animateToBottom 0.6s but doesn't work with animation:animateToBottom 0.4s
all this I applied to the class .w3-dropdown-content.w3-hide. You can see for yourself by running the code below, the behavior is not as it should be. But if you try to change from 0.4s to 0.6s or more then it works fine.
Sorry but I'm new, did I do something wrong? I appreciate any response, thanks.
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className += " w3-hide";
setTimeout(function(){
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");
},500)
}
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover > a {
color: #2E323A;
}
/*Icon Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.w3-container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.w3-dropdown-click {
position: absolute;
margin-top: 17px;
}
.w3-dropdown-content {
display: none;
padding: 20px;
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
position:relative;
animation:animateFromBottom 0.4s
}
#keyframes animateFromBottom {
from{bottom:-50px;opacity:0} to{bottom:0;opacity:1}
}
#keyframes animateToBottom {
from{bottom:0;opacity:1} to{bottom:-50px;opacity:0}
}
.w3-show-block,.w3-show {
display:block!important;
}
.w3-dropdown-content.w3-hide {
animation:animateToBottom 0.4s
}
.user_menu_button {
width: 100%;
background: #fbfbfb!important;
font-weight: 500!important;
}
<button onclick="myFunction()" class="user_menu_button">Account</button>
<div class="w3-container">
<div class="w3-dropdown-click">
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<div class="user_menu header">
<span class="display name">Hello user</span>
<span class="display mail">usermail#gmail.com</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user">1</i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping">2</i>
<span class="link_text">My orders</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down">3</i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear">4</i>
<span class="link_text">Settings</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket">5</i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>

var x = document.getElementById("Demo");
function myFunction() {
x.classList.toggle('w3-show')
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777D;
}
.user_menu.item:hover > a {
color: #2E323A;
}
/*Icon Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.w3-container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.w3-dropdown-click {
position: absolute;
margin-top: 17px;
}
.w3-dropdown-content {
visibility: hidden;
z-index: -10;
padding: 20px;
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
position:relative;
top: 30px;
transition: top .4s, z-index .4s, visibility .4s, opacity .4s;
opacity: 0;
}
.w3-show {
visibility: visible;
opacity: 1;
z-index: 1;
top: 0;
}
.user_menu_button {
width: 100%;
background: #fbfbfb!important;
font-weight: 500!important;
}
<button onclick="myFunction()" class="user_menu_button">Account</button>
<div class="w3-container">
<div class="w3-dropdown-click">
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<div class="user_menu header">
<span class="display name">Hello user</span>
<span class="display mail">usermail#gmail.com</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user">1</i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping">2</i>
<span class="link_text">My orders</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down">3</i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear">4</i>
<span class="link_text">Settings</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket">5</i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>

function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className += " w3-hide";
setTimeout(function(){
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");
}, 400) // this duration must be like css duration
}
}

I was trying to create a button(on bottom right) which will open a form after clicking or hovering on it. The form will slide(slowly) open and close after clicking on login, my code is making the button going down as the form is opening.
Also the button should be on the right side, I've tried float:right; and right:0; to fix the button to right but it's not working.
Here's my code:
function showForm(){
document.getElementById('loginForm').style.display = "block";
}
function hideForm(){
document.getElementById('loginForm').style.display = "none";
}
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
.no-show{display:none;}
.form-container {
position:absolute;
bottom:0;
right:0;
float: right;
width:100%;
}
body { font-family: tahoma; }
#loginForm {
display: none;
background: #ccc;
width: 250px;
height: 100px;
padding: 20px;
color: #333;
}
.label {
cursor: pointer;
display:block;
padding: 5px 15px;
font-size: 16px;
font-weight: bold;
}
.form-label {
width: 70px;
font-size: 12px;
font-weight: bold;
}
.form-field {
width: 180px;
}
.form-elements {
font-size: 0px;
margin: 10px 0 0 0;
display: block;
}
.form-label, .form-field {
display: inline-block;
}
.form-field input {
padding: 3px 5px;
}
.submit-btn input {
margin-left: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-container">
<form>
<p id="login" onmouseover="showForm();" onmouseout="hideForm();">
<span class="label">Login</span>
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" /></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" /></span>
</span>
</span>
</p>
</form>
</div>
Here's the working fiddle- https://jsfiddle.net/d5L8bywk/1/
Form should open(up side) slowly with ease and should close after click on login button.
It should look like this:

Check this code. No jQuery needed, you can achieve this with pure css transition in combination with height property.
function showForm() {
document.getElementById('loginForm').classList.add('show');
}
function hideForm() {
document.getElementById('loginForm').classList.remove('show');
}
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: tahoma;
height: 100vh;
}
.no-show{
display:none;
}
.form-container {
position: absolute;
bottom: 40px;
right: 80px;
left: auto;
top: auto;
width: 230px;
}
#loginForm {
background: #ccc;
width: 250px;
color: #333;
height: 0;
overflow: hidden;
transition: all 0.5s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#loginForm.show {
height: 150px;
}
.label {
cursor: pointer;
display:block;
padding: 5px 15px;
font-size: 16px;
font-weight: bold;
}
.form-label {
width: 70px;
font-size: 12px;
font-weight: bold;
}
.form-field {
width: 180px;
}
.form-elements {
font-size: 0px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
}
.form-label, .form-field {
display: inline-block;
width: 100%;
}
.form-field input {
padding: 3px 5px;
}
.submit-btn input {
margin-left: 70px;
}
#login {
text-align: center;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-container">
<form>
<div id="loginForm" onmouseleave="hideForm();">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" /></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" /></span>
</span>
</div>
</form>
<span id="login" class="label" onmouseover="showForm();">Login</span>
</div>

#login{
float:right
}
<div class="form-container">
<form>
<p id="login" onmouseover="showForm();" onmouseout="hideForm()">
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name"></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password"></span>
</span>
</span>
<span class="label">Login</span></p>
</form>
</div>