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>
Related
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'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>
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
}
}
If you run the code snippet, you'll see that the output is kind of "bugged".
I have been stuck on this for the past 2 days and can't seem to make it work at all.
I tried several solutions found here on stack, but none seem to do it for me. Basically there is Parent, Child1....n, and Grandchild1....n. Whenever i click on the parent, the list with all children should open. And for every child i click, the list with all grandchildren should open.
My code kinda does that, but not in a visually pleasant way.
PS: I am not a web developer and this whole thing is a request from my boss so everything is in fact new for me.
Thank you all and hope this question does not upset anyone.
$(document).ready(function() {
$("#infrtransp").click(function() {
$("#infrtranspUL").slideToggle(1000, "linear");
$("#infrtransp").toggleClass('fa-book fa-book-open');
if ($("#infrtranspFORM").css("display", "none")) {
$("#infrtranspFORM").css("display", "none");
} else {
$("#infrtranspFORM").slideToggle(1000, "linear");
}
});
$("#infrtranspUL").click(function() {
$("#infrtranspFORM").slideToggle(1000, "linear");
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
});
$("#infrtransp").mouseover(function() {
jQuery('#infrtransp').css('cursor', 'pointer');
});
$("#infrtranspUL").mouseover(function() {
jQuery('#infrtranspUL').css('cursor', 'pointer');
});
});
.flex-grid {
display: flex;
align-items: center;
justify-content: center;
background-color: #eceef1;
border-radius: 10px;
font-size: 15px;
-webkit-box-shadow: 0px 0px 7px 1px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 7px 1px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 7px 1px #ccc;
}
.flex-grid .col2 {
flex: 1;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col1 {
background: #eceef1;
padding: 20px;
margin-left: 20px;
font-size: 15px;
color: #43597c;
}
.col2 {
background: #eceef1;
padding: 20px;
padding-left: 20px;
color: #43597c;
text-align: justify;
}
.col3 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
.col4 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
#keyframes slideIn {
0% {
transform: translateX(0);
opacity: 0.2;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.maindiv {
animation: 1s ease-out 0s 1 slideIn;
height: 1000px;
overflow: scroll;
padding: 10px;
}
ul,
li {
padding-top: 10px;
margin-bottom: 1px;
margin-top: -10px;
padding-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/9888b57086.js" crossorigin="anonymous"></script>
<div class="maindiv">
<div class="flex-grid">
<div class="fas fa-book col1" id="infrtransp"></div>
<div class="col2">
<b>Infrastructură de transport</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza firmele)
</div>
</div>
<ul style="list-style-type: none;">
<li style="display: none; padding-left: 20px;" id="infrtranspUL">
<div class="flex-grid">
<div class="fas fa-book col1"></div>
<div class="col2"><b>AndConsult</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza formularul)
</div>
</div>
</li>
<ul>
<li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
<div class="flex-grid">
<div class="fas fa-file col1"></div>
<div class="col2">Formular - AndConsult
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza sau descarca formularul)
</div>
<a href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
<div class="fas fa-eye col3"></div>
</a>
<a download href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" <div class="fas fa-download col4"></div>
</a>
</div>
</li>
</ul>
</ul>
</div>
First I congratulate you , despite you're not a developer , you did a great work
If I could understand you issue ,
First, in HTML code you have to move the id #infrtranspUL from the li to the child .fa-book div element,
then your condition of showing li child was wrong replace it ony
from
if ($("#infrtranspFORM").css("display", "none")) {
$("#infrtranspFORM").css("display", "none");
} else {
$("#infrtranspFORM").slideToggle(1000, "linear");
}
to
if (!($("#infrtranspFORM").css("display") === "none")) {
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
$("#infrtranspFORM").slideToggle(1000, "linear");
}
And now it should work :
See below snippet :
$(document).ready(function() {
$("#infrtransp").click(function() {
$("#infrtranspUL").parents("li").slideToggle(1000, "linear");
$("#infrtransp").toggleClass('fa-book fa-book-open');
if (!($("#infrtranspFORM").css("display") === "none")) {
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
$("#infrtranspFORM").slideToggle(1000, "linear");
}
});
$("#infrtranspUL").click(function() {
$("#infrtranspFORM").slideToggle(1000, "linear");
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
});
});
.flex-grid {
display: flex;
align-items: center;
justify-content: center;
background-color: #eceef1;
border-radius: 10px;
font-size: 15px;
-webkit-box-shadow: 0px 0px 7px 1px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 7px 1px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 7px 1px #ccc;
}
.flex-grid .col2 {
flex: 1;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col1 {
background: #eceef1;
padding: 20px;
margin-left: 20px;
font-size: 15px;
color: #43597c;
}
.col2 {
background: #eceef1;
padding: 20px;
padding-left: 20px;
color: #43597c;
text-align: justify;
}
.col3 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
.col4 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
#keyframes slideIn {
0% {
transform: translateX(0);
opacity: 0.2;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.maindiv {
animation: 1s ease-out 0s 1 slideIn;
height: 1000px;
overflow: scroll;
padding: 10px;
}
ul,
li {
padding-top: 10px;
margin-bottom: 1px;
margin-top: -10px;
padding-right: 5px;
}
#infrtransp:hover,
#infrtranspUL:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/9888b57086.js" crossorigin="anonymous"></script>
<div class="maindiv">
<div class="flex-grid">
<div class="fas fa-book col1" id="infrtransp"></div>
<div class="col2">
<b>Infrastructură de transport</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza firmele)
</div>
</div>
<ul style="list-style-type: none;">
<li style="display: none; padding-left: 20px;">
<div class="flex-grid">
<div class="fas fa-book col1" id="infrtranspUL"></div>
<div class="col2"><b>AndConsult</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza formularul)
</div>
</div>
</li>
<ul>
<li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
<div class="flex-grid">
<div class="fas fa-file col1"></div>
<div class="col2">Formular - AndConsult
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza sau descarca formularul)
</div>
<a href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
<div class="fas fa-eye col3"></div>
</a>
<a download href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf">
<div class="fas fa-download col4"></div>
</a>
</div>
</li>
</ul>
</ul>
</div>
Not too sure of what you expect, but , font-awsome uses <i> tags, maybe you can stick to it to easily read the code & avoid confusion .
You toggle a class (for an icone) on an element that does not hold it at first : $("#infrtranspUL").toggleClass('fa-book fa-book-open'); , you can update the selector $("#infrtranspUL i.fa").toggleClass('fa-book fa-book-open');.
height + overflow does not seem necessary here .
possible result you are expecting:
$(document).ready(function() {
$("#infrtransp").click(function() {
$("#infrtranspUL").slideToggle(1000, "linear");
$("#infrtransp ").toggleClass('fa-book fa-book-open');
if ($("#infrtranspFORM").css("display", "none")) {
$("#infrtranspFORM").css("display", "none");
} else {
$("#infrtranspFORM").slideToggle(1000, "linear");
}
});
$("#infrtranspUL").click(function() {
$("#infrtranspFORM").slideToggle(1000, "linear");
$("#infrtranspUL i.fa").toggleClass('fa-book fa-book-open');
});
$("#infrtransp").mouseover(function() {
jQuery('#infrtransp').css('cursor', 'pointer');
});
$("#infrtranspUL").mouseover(function() {
jQuery('#infrtranspUL').css('cursor', 'pointer');
});
});
.flex-grid {
display: flex;
align-items: center;
justify-content: center;
background-color: #eceef1;
border-radius: 10px;
font-size: 15px;
-webkit-box-shadow: 0px 0px 7px 1px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 7px 1px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 7px 1px #ccc;
}
.flex-grid .col2 {
flex: 1;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col1 {
background: #eceef1;
padding: 20px;
margin-left: 20px;
font-size: 15px;
color: #43597c;
}
.col2 {
background: #eceef1;
padding: 20px;
padding-left: 20px;
color: #43597c;
text-align: justify;
}
.col3 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
.col4 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
#keyframes slideIn {
0% {
transform: translateX(0);
opacity: 0.2;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.maindiv {
animation: 1s ease-out 0s 1 slideIn;
padding: 10px;
}
ul,
li {
padding-top: 10px;
margin-bottom: 1px;
margin-top: -10px;
padding-right: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="maindiv">
<div class="flex-grid">
<div class="fa fa-book col1" id="infrtransp"></div>
<div class="col2">
<b>Infrastructură de transport</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza firmele)
</div>
</div>
<ul style="list-style-type: none;">
<li style="display: none; padding-left: 20px;" id="infrtranspUL">
<div class="flex-grid">
<i class="fa fa-book col1"></i>
<div class="col2"><b>AndConsult</b>
<br>(Click pe <i class="fas fa-book"></i> pentru a vizualiza formularul)
</div>
</div>
</li>
<ul>
<li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
<div class="flex-grid">
<i class="fas fa-file col1"></i>
<div class="col2">Formular - AndConsult
<br>(Click pe <i class="fas fa-book"></i> pentru a vizualiza sau descarca formularul)
</div>
<a href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
<i class="fas fa-eye col3"></i>
</a>
<a download href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf">
<i class="fas fa-download col4"></i>
</a>
</div>
</li>
</ul>
</ul>
</div>