Trying to incorporate this menu concept into a friends art exhibition website but I am running into a problem with the menu links being clickable regardless of whether they are visible or not. I have been messing around with pointer-events:none; but can't quite fix the problem. I can make the links totally unclickable even when then menu is shown but that defeats the purpose. Any help would be appreciated.
A link to working demo and code can be found here
console.clear();
var app = function () {
var body = void 0;
var menu = void 0;
var menuItems = void 0;
var init = function init() {
body = document.querySelector('body');
menu = document.querySelector('.menu-icon');
menuItems = document.querySelectorAll('.nav__list-item');
applyListeners();
};
var applyListeners = function applyListeners() {
menu.addEventListener('click', function () {
return toggleClass(body, 'nav-active');
});
};
var toggleClass = function toggleClass(element, stringClass) {
if (element.classList.contains(stringClass)) element.classList.remove(stringClass);else element.classList.add(stringClass);
};
init();
}();
body {
background-color: #1e2023;
font-family: "Fira Sans", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.site-content {
max-width: 1100px;
height: 100vh;
margin-left: auto;
margin-right: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.site-content__headline {
font-weight: 200;
color: #ffffff;
font-size: calc(2vw + 10px);
}
.menu-icon {
height: 30px;
width: 30px;
position: fixed;
z-index: 2;
left: 50px;
top: 30px;
cursor: pointer;
}
.menu-icon__line {
height: 2px;
width: 30px;
display: block;
background-color: #ffffff;
margin-bottom: 4px;
-webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
transition: background-color .5s ease, -webkit-transform .2s ease;
transition: transform .2s ease, background-color .5s ease;
transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
}
.menu-icon__line-left {
width: 15px;
}
.menu-icon__line-right {
width: 15px;
float: right;
}
.nav {
position: fixed;
z-index: 1;
}
.nav:before, .nav:after {
content: "";
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(234, 234, 234, 0.2);
z-index: -1;
-webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
-webkit-transform: translateX(0%) translateY(-100%);
transform: translateX(0%) translateY(-100%);
}
.nav:after {
background: white;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.nav:before {
-webkit-transition-delay: .1s;
transition-delay: .1s;
}
.nav__content {
position: fixed;
top: 50%;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
width: 100%;
text-align: center;
font-size: calc(2vw + 10px);
font-weight: 200;
cursor: pointer;
}
.nav__list-item {
position: relative;
display: inline-block;
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
opacity: 0;
-webkit-transform: translate(0%, 100%);
transform: translate(0%, 100%);
-webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
transition: opacity .2s ease, -webkit-transform .3s ease;
transition: opacity .2s ease, transform .3s ease;
transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
margin-right: 25px;
}
.nav__list-item:before {
content: "";
position: absolute;
background: #000000;
width: 20px;
height: 1px;
top: 100%;
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
-webkit-transition: all .3s ease;
transition: all .3s ease;
z-index: -1;
}
.nav__list-item:hover:before {
width: 100%;
}
body.nav-active .menu-icon__line {
background-color: #000;
-webkit-transform: translateX(0px) rotate(-45deg);
transform: translateX(0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
-webkit-transform: translateX(1px) rotate(45deg);
transform: translateX(1px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
-webkit-transform: translateX(-2px) rotate(45deg);
transform: translateX(-2px) rotate(45deg);
}
body.nav-active .nav {
visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after {
-webkit-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
}
body.nav-active .nav:after {
-webkit-transition-delay: .1s;
transition-delay: .1s;
}
body.nav-active .nav:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
body.nav-active .nav__list-item {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
-webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
transition: opacity .3s ease, transform .3s ease, color .3s ease;
transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav__list-item:nth-child(0) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
body.nav-active .nav__list-item:nth-child(1) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
body.nav-active .nav__list-item:nth-child(2) {
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(3) {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(4) {
-webkit-transition-delay: 0.9s;
transition-delay: 0.9s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Projects</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="menu.css">
<script src="menu.js"></script>
</head>
<body>
<div class="menu-icon">
<span class="menu-icon__line menu-icon__line-left"></span>
<span class="menu-icon__line"></span>
<span class="menu-icon__line menu-icon__line-right"></span>
</div>
<div class="nav">
<div class="nav__content">
<ul class="nav__list">
<a href="https://stackoverflow.com/questions/1401658/html-overlay-which-allows-clicks-to-fall-through-to-elements-behind-it">
<li class="nav__list-item">Home</li></a>
<a href="https://bootsnipp.com/search?q=navigation+">
<li class="nav__list-item">About</li></a>
<li class="nav__list-item">Projects</li>
<li class="nav__list-item">Contact</li>
</ul>
</div>
</div>
<div class="site-content">
<h1 class="site-content__headline">Another menu concept</h1>
</div>
</body>
</html>
Another way to do this is toggle the display of the menu items. I edited your JS code. By using display none it effectively makes the list item elements not clickable. Then you change the display when the items are active.
const applyListeners = () => {
menu.addEventListener('click', () => toggleClass(body, 'nav-active'));
for(let i=0; i<menuItems.length; i++) {
menuItems[i].style.display="";
}
}
const init = () => {
body = document.querySelector('body');
menu = document.querySelector('.menu-icon');
menuItems = document.querySelectorAll('.nav__list-item');
for(let i=0; i<menuItems.length; i++) {
menuItems[i].style.display="none";
}
applyListeners();
}
You can achieve what you're trying to do by toggling pointer-events: none on .nav__content. I'm not sure how experienced you are with the parent selector, but it's useful in this situation.
In your SCSS
&__content{
…
pointer-events: none;
.nav-active & { // <-- parent selector
pointer-events: auto;
}
}
Related
have this problem as stated in description.
I would like, that the :hover effect would be applied only to the parent element and its children, and not to the entire website.
Tried to add pointer-events to none, but it did not help. Also the effect is on the parent but not the sibling, as advised in other questions, but it also did not help.
Here is my code:
App.js:
import "./styles.css";
export default function App() {
return (
<div>
<div className="parent">
<div className="child1">child1</div>
<div className="child2">child2</div>
</div>
<div className="sibling">sibling</div>
</div>
);
}
CSS:
.App {
font-family: sans-serif;
text-align: center;
}
.parent::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3px;
background-color: #1a38e2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
background-color 0.1s, -webkit-transform 0.2s;
transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s,
-webkit-transform 0.2s;
transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
background-color 0.1s;
transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
background-color 0.1s, -webkit-transform 0.2s;
}
.parent:hover::before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
width: 100%;
z-index: -1;
}
I also have an SCSS, but do not know, how to deal with it on codesandbox, but I apply it anyway:
SCSS
.parent::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3px;
background-color: #1a38e2;
transform: scaleY(0);
transition: transform .2s, width .4s cubic-bezier(1, 0, 0, 1) .2s,
background-color .1s;
}
parent::before {
transform: scaleY(1);
width: 100%;
z-index: -1;
}
Link to my codesandbox: link
And am, as always, very happy about any help provided.
Give position relative to div
.parent div {
position: relative;
}
instead of
parent::before
use this
.parent div::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3px;
background-color: #1a38e2;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
background-color 0.1s, -webkit-transform 0.2s;
transition: width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s,
-webkit-transform 0.2s;
transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
background-color 0.1s;
transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
background-color 0.1s, -webkit-transform 0.2s;
}
.parent div:hover::before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
width: 100%;
z-index: -1;
}
I have a mobile slide menu. I want users to click on the body to slide back the mobile menu. I also only want the menu button to have position fixed when the menu is slide opened.
I have the following code used from this codepen: https://codepen.io/ellissei/pen/VvgYjB
I changed it a little but to style the menu button and.
<script>
jQuery(function($)
{
$(".hamburger").click(function()
{
$(".navigation").toggleClass("open");
})
$(document).('body', 'click', function(event) {
$('.open').removeClass('open');
})
});
</script>
<html>
<nav class="navigation">
<div class="hamburger ">
<span class="bars"></span>
</div>
<div class="menu-mobile" style="background-image:url(<?php echo get_template_directory_uri(); ?>/img/ecw-bg-graphic-menu%402x-100.jpg);" >
<?php get_search_form(); ?>
<ul class="menu-mobile-hoofdmenu">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'menu clearfix' ) ); ?>
</ul>
<hr>
<ul class="menu-mobile-topmenu">
<?php wp_nav_menu( array( 'theme_location' => 'menu-top-header' ) ); ?>
</ul>
</div>
</nav>
</html>
</pre>
CSS
<pre>
.navigation {
display:none;
}
.hamburger {
position: fixed;
top: 20px;
right: 30px;
cursor: pointer;
z-index: 1000;
background:white;
height: 30px;
border-radius: 30px;
}
.hamburger span {
vertical-align: middle;
transform: scale(0.5);
margin-top: 13px;
}
.hamburger .bars {
display: block;
position: relative;
width: 30px;
height: 3px;
background-color: #14BADF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hamburger .bars:before, .hamburger .bars:after {
position: absolute;
content: " ";
width: 100%;
height: 3px;
background-color: #14BADF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
border-radius: 10px;
}
.hamburger .bars:before {
top: 10px;
}
.hamburger .bars:after {
bottom: 10px;
}
.open .hamburger .bars {
background-color: transparent;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.open .hamburger .bars::before {
top: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #DA4E29;
}
.open .hamburger .bars::after {
bottom: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #DA4E29;
}
.menu-mobile {
width: 70%;
height: 100%;
padding: 75px 0px 0 0;
background-position: center;
background-size: cover;
position: fixed;
right: -100%;
top: 0;
opacity: 0;
z-index: 999;
margin-top: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menu-mobile a {
color: white;
}
.menu-mobile a:hover {
color: white;
}
.open .menu-mobile {
right: 0;
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menu-mobile:hover {
overflow-y: auto;
}
ul.menu-mobile-hoofdmenu, ul.menu-mobile-topmenu {
padding-left: 0%;
}
</pre>
I can not replicate your code in snippet but as code pen code goes:
Replace jQuery code with:
jQuery(function($)
{
$(".hamburger").click(function()
{
$(".navigation").toggleClass("open");
})
$("body").click(function(e)
{
if ($(e.target).hasClass('bars', "hamburger")) {
return false;
}
$(".navigation").removeClass("open");
})
});
This will target body but exclude bars and hamburger...
Also code pen code is missing tags, add them to test it.
Your problem was that hamburger is inside body, and there for removes class open on click.
EDIT:
jQuery(function($)
{
$(".hamburger").click(function()
{
$(".navigation").toggleClass("open");
})
$("article").click(function()
{
$(".navigation").removeClass("open");
})
});
EDIT -
The correct solution can be found here. Going off of Taplar's suggestion. I made two additional classes that duplicate the active and inactive but with !important property.
Original Post
I am new to the coding world and am going crazy trying to figure this out. I found and am trying to modify this code posted at Codepen.
On load, I would like to have .premium display as 'active' and have .standard and .platinum display as 'inactive'. Then on mouseover(), rearrange the classes so that what is being moused-over would have the 'active' class and the others 'inactive'. Lastly, when mouseleave() is triggered reset each div to the original default active and inactive.
HTML
<section class="pen">
<div class="plans">
<div class="plandis standard inactive"></div>
<div class="plandis premium active"></div>
<div class="plandis platinum inactive"></div>
</div>
</section>
CSS
.pen {
max-width: 635px;
width: 100%;
margin: 50px auto 0;
opacity: 0;
position: relative;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-animation: 1s appear 1 forwards;
-moz-animation: 1s appear 1 forwards;
-o-animation: 1s appear 1 forwards;
animation: 1s appear 1 forwards;
}
.plans {
max-width: 635px;
width: 100%;
height: 400px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis {
width: 202px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
height: inherit;
margin: 0 7px 0 0;
display: inline-block;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.plandis.active {
width: 282px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis.inactive {
width: 162px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
opacity: 0.4;
}
.plandis.premium {
background-color:red;
background-size: cover;
}
.plandis.standard {
background-color:blue;
background-size: cover;
}
.plandis.platinum {
background-color:green;
background-size: cover;
}
.plandis:last-of-type {
margin: 0;
}
#media all and (min-width: 900px) {
.pen {
max-width: 890px;
}
.plandis {
width: 286px;
}
.plandis.inactive {
width: 246px;
}
.plandis.active {
width: 366px;
}
.plans {
max-width: 890px;
height: 600px;
}
}
#media all and (max-width: 660px) {
.pen {
max-width: 335px;
}
.plandis {
width: 101px;
}
.plandis.inactive {
width: 61px;
}
.plandis.active {
width: 181px;
}
.plans {
max-width: 335px;
}
}
#-webkit-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JS
$('.plandis').each(function() {
$(this).mouseover(function() {
$(this).addClass('active');
$('.plans').children('.plandis').not('.active').addClass('inactive');
});
$(this).mouseleave(function() {
$(this).removeClass('active');
$('.plans').children('.plandis').not('.active').removeClass('inactive');
});
});
I have tried to manipulate the code multiple times but to no avail. So hopefully someone will be able to help me out!
I went about this suggested solution slightly different. Rather than toggling the active and inactive classes, I added a third class of "ignore".
.plandis.active:not(.ignore),
.plandis.inactive:hover {
}
The css rule for active was changed to also check that the element does not have the ignore class. Also, the element should be active if it is inactive, but is hovered on.
At that point, we just have to add the ignore class to any active element that we are not currently hovering over.
var $allPlandis = $('.plandis')
.on('mouseenter', function() {
$allPlandis.not(this).filter('.active').addClass('ignore');
})
.on('mouseleave', function() {
$allPlandis.filter('.ignore').removeClass('ignore');
});
.pen {
max-width: 635px;
width: 100%;
margin: 50px auto 0;
opacity: 0;
position: relative;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-animation: 1s appear 1 forwards;
-moz-animation: 1s appear 1 forwards;
-o-animation: 1s appear 1 forwards;
animation: 1s appear 1 forwards;
}
.plans {
max-width: 635px;
width: 100%;
height: 400px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis {
width: 202px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
height: inherit;
margin: 0 7px 0 0;
display: inline-block;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.plandis.active:not(.ignore),
.plandis.inactive:hover {
width: 282px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis.inactive {
width: 162px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
opacity: 0.4;
}
.plandis.premium {
background-color: red;
background-size: cover;
}
.plandis.standard {
background-color: blue;
background-size: cover;
}
.plandis.platinum {
background-color: green;
background-size: cover;
}
.plandis:last-of-type {
margin: 0;
}
#media all and (min-width: 900px) {
.pen {
max-width: 890px;
}
.plandis {
width: 286px;
}
.plandis.inactive {
width: 246px;
}
.plandis.active {
width: 366px;
}
.plans {
max-width: 890px;
height: 600px;
}
}
#media all and (max-width: 660px) {
.pen {
max-width: 335px;
}
.plandis {
width: 101px;
}
.plandis.inactive {
width: 61px;
}
.plandis.active {
width: 181px;
}
.plans {
max-width: 335px;
}
}
#-webkit-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="pen">
<div class="plans">
<div class="plandis standard inactive"></div>
<div class="plandis premium active"></div>
<div class="plandis platinum inactive"></div>
</div>
</section>
The snippet runner here appears to work, however there is some display oddity with the CSS as it appears making the first one active and the second one inactive pushes the third one down on the page, rather than staying on the same line.
The correct solution can be found here. Going off of Taplar's suggestion. I made two additional classes that duplicate the active and inactive classes but with !important property.
HTML
$('.plandis').each(function() {
$(this).mouseover(function() {
$(this).addClass('activejq');
$('.plans').children('.plandis').not('.activejq').addClass('inactivejq');
});
$(this).mouseleave(function() {
$(this).removeClass('activejq');
$('.plans').children('.plandis').not('.activejq').removeClass('inactivejq');
});
});
body {
background: #000000;
}
.pen {
width: 100%;
margin: 50px auto 0;
opacity: 0;
position: relative;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-animation: 1s appear 1 forwards;
-moz-animation: 1s appear 1 forwards;
-o-animation: 1s appear 1 forwards;
animation: 1s appear 1 forwards;
}
.plans {
max-width: 635px;
width: 100%;
height: 400px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
height: inherit;
margin: 0 7px 0 0;
display: inline-block;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.active {
width: 282px;
opacity: 1;
}
.inactive {
width: 162px;
opacity: 0.4;
}
.inactivejq {
width: 246px !important;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
opacity: 0.4;
}
.activejq {
width: 366px !important;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
opacity: 1;
}
.plandis.premium {
background-color: red;
background-size: cover;
}
.plandis.standard {
background-color: blue;
background-size: cover;
}
.plandis.platinum {
background-color: green;
background-size: cover;
}
.plandis:last-of-type {
margin: 0;
}
#media all and (min-width: 900px) {
.pen {
max-width: 890px;
}
.plandis {
width: 286px;
}
.inactive {
width: 246px;
}
.active {
width: 366px;
}
.plans {
max-width: 890px;
height: 600px;
}
}
#media all and (max-width: 660px) {
.pen {
max-width: 335px;
}
.plandis {
width: 101px;
}
.inactive {
width: 61px;
}
.active {
width: 181px;
}
.inactivejq {
width: 61px !important;
}
.activejq {
width: 181px !important;
}
.plans {
max-width: 335px;
}
}
#-webkit-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<section class="pen">
<div class="plans">
<div class="plandis standard inactive"></div>
<div class="plandis premium active"></div>
<div class="plandis platinum inactive"></div>
</div>
</section>
</body>
</html>
Basically what I'm trying to do is have a transition with transform applied on the :hover:before element so that when you hover with your mouse over ava.png the :before element smoothly appears instead of instantly.
I've tried adding the transition code to the :hover:after class (as seen in the code below) and I tried one of the solutions I found on StackOverflow, changing :hover to :before and adding the content + transition to that class. Needless to say none of my attempts worked or I wouldn't be here right now. (:D)
If anyone could take the time to help me out that'd be highly appreciated, thanks!
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:hover:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>
To animate transition you need a to have some kind of a change in the elements properties. This means that the element should be part of the page, displayed (ie no display: none) and visible (no visibility: hidden), but somehow invisible / transparent (opacity: 0 for example).
In your case, you don't create the :before element unless you want to display it. To solve that render the :before with scale(0), and on over change it to scale(1):
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#slide1:hover:before {
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>
Was trying to put a left push menu on my site, but when I try to add more than 4 sidebar-item they just don't follow the animation. Otherwise the last item follow, so how can i fix it?
Click Run code and Full page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Left Push Menu</title>
<style>
/*#import url(https://fonts.googleapis.com/css?family=roboto); */
body, html {
height: 100%;
padding: 0;
margin: 0;
font-family: 'roboto', sans-serif;
}
h1 { text-align:center; margin:50px auto; color:#fff;}
main {
z-index: 2;
position: relative;
height: 100%;
background-color: #2D3142;
-webkit-transition: transform .7s ease-in-out;
-moz-transition: transform .7s ease-in-out;
-ms-transition: transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
}
.sidebar {
height: 100%;
width: 400px;
position: fixed;
top: 0;
z-index: 1;
left: 0;
background-color: #000000;
}
.bar {
display: block;
height: 5px;
width: 50px;
background-color: #008e00;
margin: 10px auto;
}
.button {
cursor: pointer;
display: inline-block;
width: auto;
margin: 0 auto;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-left{
position: fixed;
left: 40px;
top: 20px;
}
.nav-right.visible-xs { z-index: 3; }
.hidden-xs { display: none; }
.middle { margin: 0 auto; }
/*nada*/
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
/*nada*/
.nav-right.visible-xs .active .bar {
background-color: #000;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
/*nada*/
.button.active .top {
-webkit-transform: translateY(15px) rotateZ(45deg);
-moz-transform: translateY(15px) rotateZ(45deg);
-ms-transform: translateY(15px) rotateZ(45deg);
-o-transform: translateY(15px) rotateZ(45deg);
transform: translateY(15px) rotateZ(45deg);
}
/*nada*/
.button.active .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
/*nada*/
.button.active .middle { width: 0; }
.move-to-right {
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
-ms-transform: translateX(400px);
-o-transform: translateX(400px);
transform: translateX(400px);
}
nav { padding-top: 30px; }
.sidebar-list {
padding: 0;
margin: 0;
list-style: none;
position: relative;
margin-top: 150px;
text-align: center;
}
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
}
/*-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);*/
.sidebar-item:first-child {
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
.sidebar-item:nth-child(2) {
-webkit-transition: all .7s .4s ease-in-out;
-moz-transition: all .7s .4s ease-in-out;
-ms-transition: all .7s .4s ease-in-out;
-o-transition: all .7s .4s ease-in-out;
transition: all .7s .4s ease-in-out;
}
.sidebar-item:nth-child(3) {
-webkit-transition: all .7s .6s ease-in-out;
-moz-transition: all .7s .6s ease-in-out;
-ms-transition: all .7s .6s ease-in-out;
-o-transition: all .7s .6s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item:last-child {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item.active {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.sidebar-anchor {
color: #008E00;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
position: relative;
padding-bottom: 7px;
}
.sidebar-anchor:before {
content: "";
width: 0;
height: 2px;
position: absolute;
bottom: 0;
right: 0;
background-color: #008e00;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.sidebar-anchor:hover:before { width: 100%; }
#media (min-width: 480px) {
.nav-list { display: block; }
}
#media (min-width: 768px) {
.nav-right { position: absolute; }
.hidden-xs { display: block; }
.visible-xs { display: none; }
}
</style>
</head>
<body>
<!--<div class="nav-left visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>-->
<!-- nav-right -->
<main>
<nav>
<div class="nav-left hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
<h1>Left Push Menu</h1>
<div class="jquery-script-ads" align="center">
</div>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Home</li>
<li class="sidebar-item">Consumption</li>
<li class="sidebar-item">Historic</li>
<li class="sidebar-item">About</li>
<li class="sidebar-item">About</li>
<li class="sidebar-item">About</li>
<li class="sidebar-item">About</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-right");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</body>
</html>
You have just applied only for 1st,2nd, 3rd and the last element in the css styling.
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
Just add the above remove the others
The transition styling explicitly applies to only the following "child" elements:
.sidebar-item:first-child {
/*...*/
}
.sidebar-item:nth-child(2) {
/*...*/
}
.sidebar-item:nth-child(3) {
/*...*/
}
.sidebar-item:last-child {
/*...*/
}
So if there's, say an nth-child(4), and nth-child(5), and so on then those don't have any transitions applied to them.
Add them:
.sidebar-item:nth-child(4) {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .8s ease-in-out;
}
/* and so on, changing values as necessary... */