I want to create something in which when a user clicks on a picture it would display a set of info and when they click the picture again it would disappear and also if they were to click on a different image when one is already displayed, it would hide that images info and display the info for the recently clicked picture. I'm really new to JQuery and JS so I have problems thinking outside the box haha.
I have the display down, easily done with the .toggleClass(); but I don't know how to do the rest. It's exactly like a simple hover over but with clicks. Also only the first 2 work, since I'm trying to figure out how it works.
Thanks, much love. :)
$(function () {
$('.read').click(function() {
$('.showread').toggleClass('pshow');
});
$('.sew').click(function() {
$('.showsew').toggleClass('pshow');
});
});
.aboutmewrapper {
background: #2F3347;
height: 100vh;
position: absolute;
width: 100%;
}
.imagewrap {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.imagesec {
display: flex;
justify-content: center;
align-items: center;
padding: 0 30px;
flex-direction: column;
}
.imagesec i {
color: #ececec;
font-size: 100px;
}
.showread {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.showsew {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.psections {
position: relative;
bottom: 20%;
font-size: 25px;
}
.showread:before, .showsew:before {
content: '';
width: 5px;
height: 40px;
border-radius: 20px;
background-color: #FE715D;
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
}
.pshow {
opacity: 1;
}
.phide {
opacity: 0;
}
.imagesec img {
height: 200px;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
>
<div class="aboutmewrapper">
<div class="imagewrap">
<div class="imagesec">
<img class="read" src="https://i.imgur.com/3cgLq19.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img class="sew" src="https://i.imgur.com/jnwU44r.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img src="https://i.imgur.com/MoV3QpE.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img src="https://i.imgur.com/yyC2Hjf.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
</div>
<div class="psections">
<p class="showread">Reading makes you smarter. That's why I read.</p>
<p class="showsew">Believe it or not I sew.</p>
</div>
</div>
I had to dummy a message for image3, but hopefully you get the idea.
$(function(){
//put a delegate listener on the wrapper for all image clicks
$('.imagewrap').on('click', 'img', function(e){
//reference the image in a jquery object
var $img = $(e.target);
//get all the messages
var $messages = $('.psections p');
//construct the class of the message you want to show
var messageClass = '.'+ $img.data('message');
//hide any message other than the one we want
$messages.not(messageClass).removeClass('pshow');
//get the message we should change, and toggle the class, so if it already has it, it will be removed
$messages.filter(messageClass).toggleClass('pshow');
});
});
.aboutmewrapper {
background: #2F3347;
height: 100vh;
position: absolute;
width: 100%;
}
.imagewrap {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.imagesec {
display: flex;
justify-content: center;
align-items: center;
padding: 0 30px;
flex-direction: column;
}
.imagesec i {
color: #ececec;
font-size: 100px;
}
.showread {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.showsew {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.psections {
position: relative;
bottom: 20%;
font-size: 25px;
}
.showread:before, .showsew:before {
content: '';
width: 5px;
height: 40px;
border-radius: 20px;
background-color: #FE715D;
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
}
.pshow {
opacity: 1;
}
.phide {
opacity: 0;
}
.imagesec img {
height: 200px;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
>
<div class="aboutmewrapper">
<div class="imagewrap">
<div class="imagesec">
<img class="read" data-message="image1" src="https://i.imgur.com/3cgLq19.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img class="sew" data-message="image2" src="https://i.imgur.com/jnwU44r.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img data-message="image3" src="https://i.imgur.com/MoV3QpE.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img data-message="image4" src="https://i.imgur.com/yyC2Hjf.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
</div>
<div class="psections">
<p class="showread image1">Reading makes you smarter. That's why I read.</p>
<p class="showsew image2">Believe it or not I sew.</p>
<p class="showsew image3">Believe it or not I lift weights.</p>
<p class="showsew image4">Believe it or not I sew.</p>
</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'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 wanted to hide search icon when a user searches for something
even I want to hide ... icon and clear icon to be left x as it is
Problem is shown below:
NOTE: I wanted to maintain the same gap between search icon and Search text
input[type="search"]{
width:400px;
}
.more-symbol-3dots {
transform: translateY(-158%);
color: #676460;
right: 31px;
font-size: 29px;
position: relative;
top: -2px;
}
.more-symbol-3dots::before{
content:"...";
}
.fa-search.s-section{
position: absolute;
left: 13px;
transform: translateY(11%);
top: 10px;
}
.fa-search.s-section::after{
content: "Search";
position: absolute;
left: 30px;
color: #8c8585;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="wrapper" style="position:relative;">
<input type="search">
<i class="fa fa-search s-section" aria-hidden="true"></i>
<i class="more-symbol-3dots" aria-hidden="true"></i>
</div>
Here is codepen: https://codepen.io/eabangalore/pen/Lgrqxo
Hiding the search icon can be done with
[type="search"]:focus ~ .fa-search {display:none}
Hiding the more symbol can be done with
[type="search"]:focus ~ .more-symbol-3dots {display:none}
input[type="search"] {
width: 400px;
}
.more-symbol-3dots {
transform: translateY(-158%);
color: #676460;
right: 31px;
font-size: 29px;
position: relative;
top: -2px;
}
.more-symbol-3dots::before {
content: "...";
}
.fa-search.s-section {
position: absolute;
left: 13px;
transform: translateY(11%);
top: 10px;
}
.fa-search.s-section::after {
content: "Search";
position: absolute;
left: 30px;
color: #8c8585;
}
[type="search"]:focus~.fa-search,
[type="search"]:valid~.fa-search {
display: none
}
[type="search"]:focus~.more-symbol-3dots,
[type="search"]:valid~.more-symbol-3dots {
display: none
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="wrapper" style="position:relative;">
<input type="search" required>
<i class="fa fa-search s-section" aria-hidden="true"></i>
<i class="more-symbol-3dots" aria-hidden="true"></i>
</div>
Style can be changed onclick as shown below:
<input type="search" onclick="this.className='fa'" "/>
<i class="fa fa-search s-section" aria-hidden="true"
onclick="this.className='fa'" ></i>