We Keep Coding

How to do reverse animation in CSS?

So for the following code, I have a circular notification that animates, opening up left and displaying information and a profile image. I would like to be able to reverse the animation back by having the circle go forward covering up the info and fading out (which I already have inputed). However, I'm not sure how to implement this. I've tried a couple of ways like switching the animation around but it doesn't seem to work. Any suggestions?
You can click the "CLOSE ME" button to close the notification and the "OPEN ME" to open it as well.
$(document).ready(function() {
$(".open").click(function(e) {
$(".pgn-wrapper").fadeIn(250);
});
$(".close").click(function(e) {
$(".pgn-wrapper").fadeOut(500);
});
});
/* Circle Animation
------------------------------------
*/
.pgn-circle .alert {
border-radius: 300px;
animation: fadeInCircle 0.3s ease forwards,
resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
-webkit-animation: fadeInCircle 0.3s ease forwards,
resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
height: 50px;
overflow: hidden;
padding: 6px 55px 6px 6px;
-webkit-transform: translateZ(0);
position: relative;
}
.pgn-wrapper[data-position$='-right'] .pgn-circle .alert {
float: right;
}
.pgn-wrapper[data-position$='-left'] .pgn-circle .alert {
float: left;
}
.pgn-circle .alert > div > div.pgn-thumbnail > div {
border-radius: 50%;
overflow: hidden;
width: 48px;
height: 48px;
}
.pgn-circle .alert > div > div.pgn-thumbnail > div > img {
width: 100%;
height: 100%;
}
.pgn-circle .alert > div > div.pgn-message > div {
opacity: 0;
height: 47px;
padding-left: 9px;
animation: fadeIn .3s .5s ease forwards;
-webkit-animation: fadeIn .3s .5s ease forwards;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
word-wrap: break-word;
}
.pgn-circle .alert > div > div.pgn-message > div p:only-child {
padding: 12px 0;
}
.pgn-circle .alert .close {
margin-top: -12px;
position: absolute;
right: 18px;
top: 50%;
opacity: 0;
animation: fadeIn .3s .5s ease forwards;
-webkit-animation: fadeIn .3s .5s ease forwards;
}
.pgn-circle .alert p {
margin-bottom: 0;
}
.pgn-circle .alert > div {
display: table;
height: 100%;
}
.pgn-circle .alert > div > div {
display: table-cell;
vertical-align: middle;
}
#keyframes fadeInCircle {
0% {
opacity: 0;
width: 60px;
}
100% {
opacity: 1;
width: 60px;
}
}
#-webkit-keyframes fadeInCircle {
0% {
opacity: 0;
width: 60px;
}
100% {
opacity: 1;
width: 60px;
}
}
#keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
#-webkit-keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.close:target {
animation: resizeCircle2 1s all;
animation-direction: alternate;
}
#keyframes resizeCircle2 {
0% {
width: 300px;
}
100% {
width: 60px;
}
}
/* Headings
------------------------------------
*/
p {
display: block;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.01em;
line-height: 22px;
margin: 0px 0px 10px 0px;
font-style: normal;
white-space: normal;
}
.bold {
font-weight: bold !important;
}
/* Alert
------------------------------------
*/
.alert {
background-image: none;
box-shadow: none;
text-shadow: none;
padding: 9px 19px 9px 15px;
border-radius: 3px;
font-size: 13px;
border-width: 0;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.alert-danger, .alert-error {
background-color: #c42827;
color: white;
border-color: #933432;
}
.alert-danger .close, .alert-error .close {
background-position: -95px -10px !important;
}
/*------------------------------------------------------------------
Notifications
--------------------------------------------------
*/
.pgn-wrapper[data-position='top'] {
top: 0;
left: 0;
right: 0;
}
.pgn {
position: relative;
margin: 10px;
}
.pgn .alert {
margin: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div class="pgn-wrapper" data-position="top-right">
<div class="pgn push-on-sidebar-open pgn-circle">
<div class="alert alert-danger">
<div>
<div class="pgn-thumbnail">
<div>
<img width="40" height="40" style="display: inline-block;" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
</div>
</div>
<div class="pgn-message">
<div>
<p class="bold" style="color:white">John Doe</p>
<p>Logging out in <b>60</b> second(s).</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="open" href="#">OPEN ME</a>
<a class="close" href="#">CLOSE ME</a>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Well, you've got a ton of code and I didn't parse through all of it, but I can say that when you have an animation like this:
#keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
You are indicating where the width should start and end so to reverse that, you'd want to either ensure that this animation is tied to a temporary state, like a hover with a selector like this:
element:hover {
animation:resizeCircle 1s all;
}
Then, the animation would only apply when the element is being hovered and when it isn't the element will animate back to its original state.
Or, you could set up a separate animation that specifies the reverse property values:
#keyframes resizeCircle2 {
0% {
width: 300px;
}
100% {
width: 60px;
}
}
and apply that to a "trigger" selector, such as:
element:target {
animation:resizeCircle2 1s all;
}
Which would (in this case) apply the reverse animation when the element is the target of a click.

Here's an example:
<div class="expandable"></div>
div.expandable {
background-color: green;
width: 30px;
height: 25px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
div.expandable:hover {
width: 300px;
}
You can give that a run here: https://plnkr.co/edit/wa5Ny6vmluJv6xeDs7qt?p=preview

switching out link text on hover - transition

Looking for a simple solution to replacing text on a link on :Hover. I want a slight transition (text comes up from underneath) and just replace regular if java is turned off.
HTML
<div class="bot-text">
Go here
Or go here
</div>
CSS
.bot-text a {
font: 600 15px/20px 'Open Sans', sans-serif;
color: #383737;
position: relative;
display: inline-block;
border: 2px solid #383737;
padding: 25px;
margin: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
This creates a text button with a border and padding. on hover I want the text to change to something else (will always be less text). I want the text to replace the current link text with a slide up from the bottom on hover.

Try utilizing :after pseudo element
.bot-text a {
font: 600 15px/20px 'Open Sans', sans-serif;
color: #383737;
position: relative;
display: inline-block;
border: 2px solid #383737;
padding: 25px;
margin: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.bot-text a:hover {
color:transparent;
}
.bot-text a:hover:after {
opacity:0;
position:absolute;
left:40%;
color:blue !important;
content:"abc";
animation: slideup 1s ease-in 0s forwards;
-moz-animation: slideup 1s ease-in 0s forwards;
-webkit-animation: slideup 1s ease-in 0s forwards;
}
#keyframes slideup {
from {
top:50px;
}
to {
top:25px;
opacity:1;
}
}
#-moz-keyframes slideup {
from {
top:50px;
}
to {
top:25px;
opacity:1;
}
}
#-webkit-keyframes slideup {
from {
top:50px;
}
to {
top:25px;
opacity:1;
}
}
<div class="bot-text">
Go here
Or go here
</div>

Make CSS menu items and title expand to correct width

I am stuck trying to expand menu items to full width. For some reason they are indented..
Also if I expand the menu name with more characters, it messes up the formatting. I'm trying to make it expand automatically, but if I remove the 'width' property it becomes messed up.
Thanks!
Fiddle code: http://jsfiddle.net/n877s/5/
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>username</span>
<ul class="dropdown">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
​
CSS
.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
top: 140%;
left: 0;
right: 0;
/* Styles */
background: black;
border-radius: inherit;
border: 1px solid rgba(0,0,0,0.17);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-weight: normal;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-3 .dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}
.wrapper-dropdown-3 .dropdown:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0,0,0,0.1) transparent;
}
.wrapper-dropdown-3 .dropdown li a {
display: block;
padding: 10px;
text-decoration: none;
color: #8aa8bd;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255,255,255,1);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown li i {
float: right;
color: inherit;
}
.wrapper-dropdown-3 .dropdown li:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown li:last-of-type a {
border: none;
border-radius: 0 0 7px 7px;
}
/* Hover state */
.wrapper-dropdown-3 .dropdown li:hover a {
background: #f3f8f8;
}
/* Active state */
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}
/* No CSS3 support */
.no-opacity .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
.no-opacity .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
display: block;
}

I hope this is what u need. Changed just a few things like left padding from dropdown class (spacing fix), changed width to auto on .wrapper-dropdown-3, and added some spacing around carret.
http://jsfiddle.net/n877s/8/
I added dummy text in button,just for testing purposes, and it works well.

Indentation is caused by ULs default left padding (or in any browsers padding), it´s 40px. So, set
.wrapper-dropdown-3 {margin-left: 0; padding-left: 0;}
If you have longer items in submenu and don't want set the width, you can force one-line items using
white-space: nowrap;

How to get Mouse Out effect in CSS

I have created a transition effect on a div. I have written the following code and its working fine, when I hover on the div, the color smoothly changes, but when I remove the mouse the color backs to its original state abruptly.
I want to know the method of changing the color slowly on Mouse out Event as well.
Kindly check my code and guide me.
<nav>
<ul>
<li id="skills" class="navText" >Work -Experience</li>
<li id="web" class="navText">Skills </li>
</ul>
</nav>
CSS
nav ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}

It is changing back suddenly because you have the transitions in the :hover rule. The transitions only works when the mouse is over the element.
Do it like this instead:
nav ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
}
See? The transitions are applied only when the mouse is over the element because it is in the :hover rule. Thus, it cannot fade back out after the mouse leaves because the transitions are no longer applied. If the transitions are applied to the elements style, it will fade in and out every time the mouse moves over it.
Here is a JSFiddle to show what I mean.
Hope this helps!

It should work if you only have transition on the non-hovered element, according to CSS-tricks
av ul #skills
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color:white;
border-radius: 150px;
line-height:150px;
font-size: 15px;
#background-color: EA7079;
background-color: #1A1A1A;
color: white;
left:370px;
/* CSS3 */
-webkit-transition: all 1000ms ;
-moz-transition: all 1000ms ;
-ms-transition: all 1000ms ;
-o-transition: all 1000ms ;
transition: all 1000ms ;
}
nav ul #skills:hover
{
position:absolute;
width: 150px;
height: 150px;
border:6px solid;
border-color: #DCDEE0;
border-radius: 150px;
line-height:150px;
font-size: 15px;
background-color: EA7079;
color: white;
left:370px;
}

Accordion/Drawer menu with Javascript? please advise

Sorry to bother, I want to create a menu like this one: sample menu could you please guide me? point me in the right direction? what would be the correct name of this kind of menu? what kind of language could I use? any similar examples out there? thanks a lot for your time.
Biz

Check this out,
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
Cherry pick the one which suits your need.

try this menu(basic)
markup:
<div class="mainMenu" >
<div class="main-meu-nav" >
<ul>
<li data-id="cat1" >menu 1</li>
<li data-id="cat2">menu 2</li>
<li data-id="cat3">menu 3</li>
<li data-id="cat4">menu 4</li>
</ul>
</div>
<div class="mainmenu-category" >
<div class="category-row" id="cat1" >menu 1 list item</div>
<div class="category-row" id="cat2" >menu 2 list item</div>
<div class="category-row" id="cat3" >menu 3 list item</div>
<div class="category-row" id="cat4" >menu 4 list item</div>
</div>
</div>
Style:
.mainMenu
{
width:1024px;
height:auto;
margin:auto;
}
.main-meu-nav
{
width:100%;
height:auto;
float:left;
}
.main-meu-nav ul
{
width:100%;
height:auto;
float:left;
list-style:none;
}
.main-meu-nav ul li
{
width:auto;
display:block;
height:auto;
float:left;
list-style:none;
margin:0px 10px;
padding:10px ;
border:1px solid red
}
.mainmenu-category
{
width:100%;
height:auto;
float:left;
display:none
}
.category-row
{
width:90%;
height:auto;
float:left;
padding:5%;
background:#cccccc;
}
Script:
$(document).ready(function() {
$(".main-meu-nav > ul >li").on("click" , function() {
$(".mainmenu-category").fadeIn();
var catId = $(this).attr("data-id");
$(".mainmenu-category").find(".category-row").slideUp(100);
$(".mainmenu-category").find("#"+catId).slideDown(1000)
});
});

Try
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>

<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="utf-8">
<title>Teste Menu c Javascript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
nav {
background-color:#414956;
height: 100%;
position: fixed;
right: -220px;
top: 0;
-moz-transition: right 0.2s linear;
-o-transition: right 0.2s linear;
-webkit-transition: right 0.2s linear;
transition: right 0.2s linear;
width: 220px;
z-index: 9001;/* IT'S OVER 9000! */
padding-top: 4em;
}
#menuToggle {
background: #e3117c;
display: block;
position: fixed;
height: 40px;
right: 15%;
top: 33px;
width: 46px;
z-index:9999;
border-radius: 5px;
}
#menuToggle span {
background: white;
display: block;
height:6%;
left: 20%;
position: absolute;
top: 45%;
width: 60%;
}
#menuToggle span:before,
#menuToggle span:after {
background: white;
content: '';
display: block;
height: 100%;
position: absolute;
top: -250%;
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
width: 100%;
}
#menuToggle span:after { top: 250%; }
nav a {
color: #fff;
display: block;
font-size: 20px;
margin: 0 0 0 30px;
font-weight: 300;
letter-spacing: 1px;
}
nav a:after {
background: #e3117c;
content: '';
display: block;
height: 2px;
-moz-transition: width 0.5s;
-o-transition: width 0.5s;
-webkit-transition: width 0.5s;
transition: width 0.5s;
width: 0;
margin-top: 0.2em;
}
n
.menu nav a:hover,.menu nav a:focus {
color: #e3117c;
}
.open nav {
right: 0;
}
.open #menuToggle span {
background: transparent;
left: 20%;
top: 45%;
}
.open #menuToggle span:before,
.open #menuToggle span:after {
background: white;
top: 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.open #menuToggle span:after {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menuToggle .navClosed {
-moz-transition: background 0.1s linear;
-o-transition: background 0.1s linear;
-webkit-transition: background 0.1s linear;
transition: background 0.1s linear;
}
#menuToggle .navClosed:before,
#menuToggle .navClosed:after {
-moz-transition: top 0.2s linear 0.1s, -moz-transform 0.2s linear 0.1s;
-o-transition: top 0.2s linear 0.1s, -o-transform 0.2s linear 0.1s;
-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
-webkit-transition-delay: 0.1s, 0.1s;
transition: top 0.2s linear 0.1s, transform 0.2s linear 0.1s;
}
#menuToggle .navOpen {
-moz-transition: background 0.1s linear 0.2s;
-o-transition: background 0.1s linear 0.2s;
-webkit-transition: background 0.1s linear;
-webkit-transition-delay: 0.2s;
transition: background 0.1s linear 0.2s;
}
#menuToggle .navOpen:before,
#menuToggle .navOpen:after {
-moz-transition: top 0.2s linear, -moz-transform 0.2s linear;
-o-transition: top 0.2s linear, -o-transform 0.2s linear;
-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
transition: top 0.2s linear, transform 0.2s linear;
}
/*-- //menu-navigation --*/
</style>
<script>
$('#show-hide-menu').click(function() {
if ($('#sidebar').hasClass('visible')) {
$('#sidebar').removeClass('visible');
} else {
$('#sidebar').addClass('visible');
}
});
</script>
</head>
<body>
</head>
<body>
<div class="menu">
<span class="navClosed"></span>
<nav>
Home
About
Services
Gallery
News
price
Contact
</nav>
</div>
<script>
(function($){
// Menu Functions
$(document).ready(function(){
$('#menuToggle').click(function(e){
var $parent = $(this).parent('.menu');
$parent.toggleClass("open");
var navState = $parent.hasClass('open') ? "hide" : "show";
$(this).attr("title", navState + " navigation");
// Set the timeout to the animation length in the CSS.
setTimeout(function(){
console.log("timeout set");
$('#menuToggle > span').toggleClass("navClosed").toggleClass("navOpen");
}, 200);
e.preventDefault();
});
});
})(jQuery);
</script>
<!--// navbar-->
</body>
</html>
</body>
</html>

**<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="utf-8">
<title>Teste Menu c Javascript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body{padding:0; margin:0; font-family: 'Roboto', sans-serif;}
h1{margin:0; color:#ddd; padding:10px; border-bottom:1px solid #666;}
button:focus{outline:none}
aside{background:#1a1d23; width:250px;height:100vh; position:fixed; transition:.3s;left:-250px;top:0;transition-timing-function: cubic-bezier(0.9,0,1,1);}
aside.close{left:0;transition:.3s;transition-timing-function: cubic-bezier(0.9,0,1,1);}
nav a{display: block; color:#ddd; text-decoration:none;padding:10px;}
nav a:hover{background:#313640;}
aside button{border:none; background:none; position: absolute;right:-40px; top:7px; font-size:30px; transform:rotate(90deg); display:inline-block; cursor:pointer}/style>
<body>
<header></header>
<div class="container">
<aside>
<button class="toggle">|||</button>
<h1>Menu</h1>
<nav>
<ul>
<li>
Home
<div class="collapse" id="menu1">
Subitem 1
<div class="collapse" id="menu1sub1">
Subitem 1 a
Subitem 2 b
Subitem 3 c
<div class="collapse" id="menu1sub1sub1">
Subitem 3 c.1
Subitem 3 c.2
</div>
Subitem 4 d
Subitem 5 e
<div class="collapse" id="menu1sub1sub2">
Subitem 5 e.1
Subitem 5 e.2
</div>
</div>
Subitem 2
Subitem 3
</div>
</li>
</li>
About Us
Services
Portfolio
<a `href`="#">Contact Us</a>
</nav>
</aside>
</div>
</ul>
<script>
$(document).ready(function(){
$(".toggle").click(function(){
$("aside").toggleClass("close")
});
});
// click outside
$(document).mouseup(function(e){
var container = $("aside");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
$("aside").remove Class("close")
}
});
</script>**