I am making an app with React and CSS. I have a navigation menu that becomes visible after the user clicks a button. I want to add a transition or animation to make the navigation menu slide in from the left rather than just appear suddenly.
My navigation menu looks for a context value nav to determine which classes to apply.
import React, { useContext, useEffect } from "react";
import { Link } from "react-router-dom";
import style from "./Navigation.module.css";
// Context
import { NavContext } from "../../context/navContext";
export const Navigation = () => {
const { nav, setNav } = useContext(NavContext);
useEffect(() => {
console.log(nav);
}, [nav]);
return (
<div
className={`${style.navigationBody} ${
nav ? style.openNav : style.closeNav
}`}
>
<div
className={style.navigationCancel}
tabIndex="0"
onClick={() => setNav(false)}
>
X
</div>
<ul className={style.navigationList}>
<li className={style.navigationItem}>
<a href={"/"}>Home</a>
</li>
<li className={style.navigationItem}>
<a href={"/"}>Menu</a>
</li>
<li className={style.navigationItem}>
<a href={"/"}>Gallery</a>
</li>
<li className={style.navigationItem}>
<a href={"/"}>Contact</a>
</li>
<li className={style.navigationItem}>
<a href={"/"}>Order</a>
</li>
</ul>
</div>
);
};
If nav is true than the openNav styles are applied
<div
className={`${style.navigationBody} ${
nav ? style.openNav : style.closeNav
}`}
I am using css and want to add a slide in transition but so far have not been successful.
.navigationBody {
height: 100vh;
width: 0vw;
position: fixed;
top: 0;
right: 0;
background-color: rgba(100, 100, 100, 0.95);
z-index: 999;
display: none;
will-change: transform;
}
.navigationBody.openNav {
-webkit-transition: 10s;
-moz-transition: 10s;
-ms-transition: 10s;
-o-transition: 10s;
transition: 10s;
display: block;
width: 85vw;
}
I am not sure what I am missing.
Related
Well what I want to do is to toggle a menu when is clicked but it's not smooth and it feels tough, I'm a newbie in JS but I do know CSS and HTML well enough, so is there a way to smooth this toggle function?
menu unclicked:
menu clicked:
const toggleButton = document.getElementsByClassName("nav__toggle-button")[0];
const navbarLinks = document.getElementsByClassName("nav__links")[0];
toggleButton.addEventListener("click", () => {
console.log("clicked");
navbarLinks.classList.toggle("active");
toggleButton.classList.toggle("open");
});
If you want to solve this with CSS you can 'animate' the two divs with the transitions property: https://www.w3schools.com/css/css3_transitions.asp
close state:
div {
opacity: 0;
transition: opacity 1s;
}
open state:
div.active {
opacity: 1;
transition: opacity 1s;
}
Two minors:
don't use BEM classes to trigger an event listener, use instead a proper class (js-click or something..)
a small refactor for your first two lines:
const [toggleButton] = document.querySelectorAll(".nav__toggle-button")
const [navbarLinks] = document.querySelectorAll(".nav__links")
You can apply transition and transform properties to the element through CSS.
For example, if you are using a drop down menu and controlling the slide and the opacity:
transform: translateY(-10px);
transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
You could check out:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
All you need is a transition and transform property that you can toggle. Transform CSS property is used for handling dimensions, orientation etc of a DOM element. Adding transition adds an effect where the transform properties if changed, change gradually.
const closeButton = document.getElementById("close")
closeButton.addEventListener("click", () => {
const menu = document.getElementById("nav-links")
menu.classList.toggle("closed-list");
})
ol {
width: 100%;
list-style-type: none;
background: gray;
transition: all 0.4s ease-in-out;
}
.closed-list {
transform: scaleY(0);
transform-origin: top;
}
li {
text-align: center;
padding: 12px 0px;
color: white;
font-weight: 700;
font-size: 18px;
}
#close-container {
text-align: right;
}
<div>
<div id="close-container">
<button id="close">
open/close
</button>
</div>
<ol id="nav-links">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ol>
</div>
I'd like to accomplish the following with my drop down menu.
1 - Show it upon click
2 -Hide it on second click
3 - Hide it when clicking anywhere outside of it.
4 - Do all that with a slide effect
I've got 1-3 covered. I'm blocked on 4.
How would I create a slide effect along with the following click event happening bellow?
I've got a working proof of concept using jQuery's slideToggle (not shown here)... however, I'd like to learn how to do it in the react way.
in case you'd like to see the full the code:
react drop-down nav bar
// CASE 1 Show Hide on click, no slide effect yet
class ServicesDropdown extends Component {
constructor() {
super();
this.state = {
dropdown: false
};
}
handleClick = () => {
if (!this.state.dropdown) {
// attach/remove event handler
document.addEventListener('click', this.handleOutsideClick, false);
} else {
document.removeEventListener('click', this.handleOutsideClick, false);
}
this.setState(prevState => ({
dropdown: !prevState.dropdown,
}));
}
handleOutsideClick = (e) => {
// ignore clicks on the component itself
if (this.node.contains(e.target)) {
return;
}
this.handleClick();
}
render() {
return (
<li ref={node => { this.node = node; }}>
<a href="#!" onClick={this.handleClick}>Services +</a>
{this.state.dropdown &&
(
<ul className="nav-dropdown" ref={node => { this.node = node; }}>
<li>Web Design</li>
<li>Web Development</li>
<li>Graphic Design</li>
</ul>
)}
</li>
)
}
}
A while ago I figured out how to apply a slide-down effect to a React component, it's not exactly the same behavior but you might find my code & description useful. See my answer to a different, related question here: https://stackoverflow.com/a/48743317/1216245 [Edit: It was deleted since then, so I'm pasting the description below.]
The blog post is here: http://blog.lunarlogic.io/2018/slidedown-menu-in-react/. Feel free to steal any part of the code.
Here's a short description of the most important parts of the solution.
As for the React/JSX part, you wrap the component that you'd like to slide in a CSSTransitionGroup. (You can read more about this React Add-on here: https://reactjs.org/docs/animation.html#high-level-api-reactcsstransitiongroup and here: https://reactcommunity.org/react-transition-group/.)
<div className="component-container">
<CSSTransitionGroup
transitionName="slide"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
>
{ this.state.showComponent && <Component /> }
</CSSTransitionGroup>
</div>
Note that it's all wrapped in a container, which you'll need for the animation to work like you'd like it to.
And here is the CSS I used for the slide animation effect:
/*
Slide animation styles.
You may need to add vendor prefixes for transform depending on your desired browser support.
*/
.slide-enter {
transform: translateY(-100%);
transition: .3s cubic-bezier(0, 1, 0.5, 1);
&.slide-enter-active {
transform: translateY(0%);
}
}
.slide-leave {
transform: translateY(0%);
transition: .3s ease-in-out;
&.slide-leave-active {
transform: translateY(-100%);
}
}
/*
CSS for the submenu container needed to adjust the behavior to our needs.
Try commenting out this part to see how the animation looks without the container involved.
*/
.component-container {
height: $component-height; // set to the width of your component or a higher approximation if it's not fixed
min-width: $component-width; // set to the width of your component or a higher approximation if it's not fixed
}
For the full example & demo check out http://blog.lunarlogic.io/2018/slidedown-menu-in-react/.
What aboot using CSS transitions?
UI Animations with React — The Right Way
As an example I found this slide effect that could be implemented on your navbar.
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#slide {
position: absolute;
left: -100px;
width: 100px;
height: 100px;
background: blue;
-webkit-animation: slide 0.5s forwards;
-webkit-animation-delay: 2s;
animation: slide 0.5s forwards;
animation-delay: 2s;
}
#-webkit-keyframes slide {
100% { left: 0; }
}
#keyframes slide {
100% { left: 0; }
}
<div class="wrapper">
<img id="slide" src="https://cdn.xl.thumbs.canstockphoto.com/-drawings_csp14518596.jpg" />
</div>
I hope it helps :)
I have code that switches between menu and submenu on hover, but I want short slide-left animation on mouse-in and slide-right on mouse-out.
My template contain this animations (.mk-vm-animate-out-1 and .mk-vm-animate-in-1) so i'd like to use them (but it's not necessary).
My idea was to add class with animation and some dealy and then add classes that shows submenu... but everything that i tried wasnt working... :/
Here is my code:
$(function() {
$('#menu-item-155').hover(
function(){
$(this).parent().addClass("mk-vm-animate-out-1");
$(this).addClass("mk-vm-subviewopen");
$(this).parent().addClass("mk-vm-subview");
},
function(){
$(this).removeClass("mk-vm-subviewopen");
$(this).parent().removeClass("mk-vm-animate-out-1");
$(this).parent().removeClass("mk-vm-subview");
}
);
});
<ul id="menu-main-menu">
<li id="menu-item-4673"> <a><span>ITEM 1</span></a></li>
<li id="menu-item-155" class="menu-item"><a><span>ITEM with submenu</span></a>
<ul class="sub-menu ">
<li id="menu-item-4792"><a><span>submenu item1</span></a></li>
<li id="menu-item-4718"><a><span>submenu item2</span></a></li>
<li id="menu-item-4718"><a><span>submenu item3</span></a></li></ul>
</li>
<li id="menu-item-159"><a><span>ITEM 3</span></a></li>
<li id="menu-item-159"><a><span>ITEM 4</span></a></li>
</ul>
You can use transform and transition for this
.before-hover {
left:15px;
opacity: 0;
z-index:-1;
visibility: hidden;
transition: all 0.4s;
}
.before-hover:hover {
opacity:1;
z-index:1;
visibility:visible;
transform: translateY(-15px);
}
I've got not displayed block with JS toggle performance on mouseover/mouseout(http://jsfiddle.net/4bytz20h/2/):
html:
<div id="menu" onmouseover="toggle_extra_panel()" onmouseout="toggle_extra_panel()">
<a>hover me</a>
<div id="list">
Some Text
</div>
</div>
js:
function toggle_extra_panel() {
var sys_val = document.getElementById('list');
sys_val.style.display = (sys_val.style.display == 'none' ||
sys_val.style.display == '') ? 'block' : 'none';
}
css:
#menu #list {
display: none;
}
Trying to add some animation effects(by CSS transictions)(http://jsfiddle.net/4bytz20h/1/):
html(without changes):
<div id="menu" onmouseover="toggle_extra_panel()" onmouseout="toggle_extra_panel()">
<a>hover me</a>
<div id="list">
Some Text
</div>
</div>
JS:
<!-- empty here -->
CSS:
#menu #list {
height: 0;
width: 0;
transition: all 1.5s ease-out;
background: #d5d5d5;
}
#menu:hover #list {
height: 250px;
width: 250px;
transition: all 2.5s ease-in;
}
But I lost (forgot to use) my JS toggle code. In next example I'm trying to combine JS logic(display form 'none' to 'block' when mouseover) and CCS transiction effect(height and width from '0' to 'auto' when mouseover). Here not wroking well code(http://jsfiddle.net/4bytz20h/):
html(without changes):
<div id="menu" onmouseover="toggle_extra_panel()" onmouseout="toggle_extra_panel()">
<a>hover me</a>
<div id="list">
Some Text
</div>
</div>
js(without changes):
function toggle_extra_panel() {
var sys_val = document.getElementById('list');
sys_val.style.display = (sys_val.style.display == 'none' ||
sys_val.style.display == '') ? 'block' : 'none';
}
css:
#menu #list {
height: 0;
width: 0;
transition: height 1.5s ease-out;
transition: width 1.5s ease-out;
background: #d5d5d5;
display: none;
}
#menu:hover #list {
height: 250px;
width: 250px;
transition: height 2.5s ease-in;
transition: width 2.5s ease-in;
}
Better way to execute all desires using only by ccs transictions.
But how about this combine way: in one moment JS makes the item to be displayed and in this same moment ccs tries to draw rectangle-text-area from 0 to bigger gabarite
I think this may be what you're trying to do.
.hide {
height: 0px;
width: 0px;
transition: all 2.5s ease-in;
background: #d5d5d5;
opacity: 0;
}
.current:hover .hide {
height: 250px;
width: 250px;
opacity: 1;
}
<div class="current">HOVER ME
<div class="hide">SOME TEXT</div>
</div>
I made a vertical drop down menu and the menu hides with Jquery, the problem is now that I can not link my pages with my menu in my li items my #href is not clickable, but the link is there.
Thanks in advance
http://68625.glr-imd.nl/motiongraphic.html# <---- url webpage
HTML:
<a id="arrow" href="#"></a>
<div id="sidemenu" class="sidemenu">
<img id="side_menu_img" src="styling/img/logo_no_letters.png" width="auto" height="40" style="margin-left:40px; margin-top:250px;">
<ul id="side_menu" class="menu">
<li style="margin-top:10px;">A b o u t
</li>
<li style="margin-top:10px;"> <a id="portfolio" href="#">P o r t f o l i o</a>
<ul>
<li style="font-size:12px; margin-top:10px;">Web-Design
</li>
<li style="font-size:12px;">Brand Identity's
</li>
<li style="font-size:12px;">Projects
<ul>
<li style="font-size:10px; margin-top:10px;">For the birds: The story continues
</li>
<li style="font-size:10px;">Gia - The biography
</li>
<li style="font-size:10px;">Glr Viral
</li>
<li style="font-size:10px;">The Round Interface
</li>
<li style="font-size:10px; margin-bottom:10px;">Shang Xia - Coming Soon
</li>
</ul>
</li>
<li style="font-size:12px;">+ Motion Graphic Design
</li>
<li style="font-size:12px;">3D Illustration
</li>
</ul>
</li>
<li style="margin-top:10px;"> O f f - B o o k s
<ul class="depth2">
<li style="font-size:12px;">Photography
</li>
<li style="font-size:12px;">Drawings + Paintings
</li>
</ul>
<li style="margin-top:10px;">c o n t a c t
</li>
</li>
</ul>
<div class="iconbar">
<img class="icon" src="styling/Icons/facebook.png">
<img class="icon" src="styling/Icons/linkedin.png">
<img class="icon" src="styling/Icons/tumblr.png">
<img class="icon" src="styling/Icons/Youtube.png">
<img class="icon" src="styling/Icons/meel.png">
</div>
</div>
CSS:
.menu {
width: 300px;
height: 152px;
padding: 0;
position: absolute;
top: 50%;
margin-top: -76px;
margin-left: 25px;
text-transform: uppercase;
}
.menu li {
margin:0;
}
.menu li {
display:block;
color:#000;
overflow:hidden;
}
.menu li a {
display:block;
padding:5px;
text-decoration:none;
font-family:'quicksandlight';
font-weight:900;
color:#000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
cursor:auto;
}
.menu li > ul {
display:none;
overflow:hidden;
padding:10;
}
.menu p ul.depth2 li a {
color:#fff;
display:block;
}
.menu li a:hover {
display:block;
padding:5px;
text-decoration:none;
font-family:'quicksandlight';
font-weight:900;
color:#999;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidemenu {
position:fixed;
height:100%;
left:0px;
top:0;
z-index:1500;
width:375px;
background-color:#FFF;
margin-left:-375px;
}
::-webkit-scrollbar {
width: 0px;
}
#arrow {
width:30px;
height:100px;
background-image:url(../img/arrow_l.png);
position:fixed;
left:0;
top:50%;
margin-top:-50px;
z-index:2000;
margin-left:0px;
rotateZ:0;
}
#font-face {
font-family:'quicksandlight';
src: url('../fonts/quicksand-light-webfont.eot');
src: url('../fonts/quicksand-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/quicksand-light-webfont.woff') format('woff'), url('../fonts/quicksand-light-webfont.ttf') format('truetype'), url('../fonts/quicksand-light-webfont.svg#quicksandlight') format('svg');
font-weight:normal;
font-style:normal;
}
.iconbar {
height:32px;
width:auto;
position:absolute;
top:100%;
margin-top:-32px;
left:25px;
}
.iconbar img {
width:auto;
height:16px;
margin-right:15px;
opacity:0.5;
}
.iconbar img:hover {
opacity:1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
JS:
<script>
$("#portfolio").click(function() {
if ($("#side_menu").css("margin-top") == "-76px") {
$("#side_menu").animate({
"margin-top": "-166px"
}, 2500);
} else {
$("#side_menu").animate({
"margin-top": "-76px"
}, 500);
}
});
$("#portfolio").click(function() {
if ($("#side_menu_img").css("margin-top") == "250px") {
$("#side_menu_img").animate({
"margin-top": "160px"
}, 2500);
} else {
$("#side_menu_img").animate({
"margin-top": "250px"
}, 500);
}
});
$("#arrow").click(function() {
if ($("#sidemenu").css("margin-left") == "0px") {
$("#sidemenu").animate({
"margin-left": "-375px"
}, 500);
} else {
$("#sidemenu").animate({
"margin-left": "-0px"
}, 500);
}
});
$("#arrow").click(function() {
if ($("#arrow").css("margin-left") == "0px") {
$("#arrow").animate({
"margin-left": "335px"
}, 500);
} else {
$("#arrow").animate({
"margin-left": "-0px"
}, 500);
}
});
swfobject.registerObject("FLVPlayer");
</script>
Looking at the source code on your website, below code prevents you from clicking a link inside your menu:
$('.menu a').click(function( e ){
//e.preventDefault(); // disable this to click enable the links
$(this).parent('li').find('ul:first').slideToggle();
});
What you better do, is refine your selector $('.menu a') to a better one, in order to select the items that need to toggle a submenu. about and contact for example needs to remain an ordinary link if I have understood you correctly.
HTML:
<li>
P o r t f o l i o
<!-- optionally add a class or data-attribute here to properly select in jquery -->
<!-- $('.menu ul') -->
<ul>
<li>Brand Identity's</li>
<li>Projects
</ul>
</li>
JS:
Find all the a elements prior to the ul elements inside .menu.
This should avoid selecting about and contact so they keep their default behavior to answer your question.
$('.menu ul').prev("a").click(function(e){
e.preventDefault();
// continue
});
some hints to clean up your code:
On te jquery part, don't select the same items twice and don't bind it twice to the same event. Sounds like overkill, don't you think?
$("#portfolio").click() // 3 times
$("#arrow").click() // 2 times
On the css + jquery part, instead of animating margin-top you might want to try the height of the .submenu or switch to a toggle function in jquery. Submenus are positioned fixed so it's better to avoid margin here and use top, bottom, left, right to adjust the position.
example of improvement
var mainmenu = $("#sidemenu"), // confuses with #side_menu so -> mainmenu
arrow = $("#arrow");
arrow.click(function () {
var mainmenuleft = parseInt(mainmenu.css("left"), 10),
arrowleft = parseInt(arrow.css("margin-left"), 10);
mainmenuleft = mainmenuleft === 0 ? -375 : 0;
arrowleft = arrowleft === 0 ? 335 : 0;
mainmenu.animate({ left: mainmenuleft }, 500);
arrow.animate({ marginLeft: arrowleft }, 500);
});
FIDDLE:
http://jsfiddle.net/tive/ez7WG/