Why is the button not clickable in this code snippet?
How do I make it clickable?
Is JavaScript needed to make the button clickable? If I use the <button> tag then is it not clickable?
Is the <button> not working because it is on an animated background?
Check .btn-blue; is there any code missing?
#import url('https://fonts.googleapis.com/css?family=Exo:400,700');
* {
margin: 0px;
padding: 0px;
}
body {
font-family: 'Exo', sans-serif;
}
.context {
width: 100%;
position: absolute;
top: 50vh;
}
.context h1 {
text-align: center;
color: #fff;
font-size: 50px;
}
.area {
background: #4e54c8;
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
width: 100%;
height: 100vh;
}
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.bk {
position: relative;
}
.btn-blue {
background-color: red;
border-radius: 12px;
border: 1px transparent solid;
/* transparent border */
color: white;
padding: 13px 30px;
/* remove 2px as we are now using the border */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 19px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover {
opacity: 1;
background-color: blue;
border: 1px #99ccff solid;
}
.btn-blue:active {
background-color: #00CCC0;
border: 1px #000000 solid;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
#keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
<div class="context">
<h1>Pure Css Animated Background</h1>
<center> <a class="btn-blue" href="google.com">Start Now</a></center>
</div>
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Add this to your css file:
.context{
z-index: 2;
}
First, you need to add "http://" or "https://" to the beginning of absolute URLs.
Second, you need to add the CSS in the previous answer.
Third, you need to use target="_blank" in order for the link to work with the code snippet.
* {
margin: 0px;
padding: 0px;
}
body {
font-family: 'Exo', sans-serif;
}
.context {
width: 100%;
position: absolute;
top: 50vh;
}
.context {
z-index: 2;
}
.context h1 {
text-align: center;
color: #fff;
font-size: 50px;
}
.area {
background: #4e54c8;
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
width: 100%;
height: 100vh;
}
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.bk {
position: relative;
}
.btn-blue {
background-color: red;
border-radius: 12px;
border: 1px transparent solid;
/* transparent border */
color: white;
padding: 13px 30px;
/* remove 2px as we are now using the border */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 19px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover {
opacity: 1;
background-color: blue;
border: 1px #99ccff solid;
}
.btn-blue:active {
background-color: #00CCC0;
border: 1px #000000 solid;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
#keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
<div class="context">
<h1>Pure Css Animated Background</h1>
<center> <a class="btn-blue" href="https://google.com" target="_blank">Start Now</a></center>
</div>
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Related
I have a responsive hamburger menu made with a checkbox that works without any issues. What I'd like to be able to do is uncheck the checkbox when going backward or forward (navigating between pages). I would like it so that when I use the backward or forward button on a web browser the box is unchecked and the menu disappears.
This is the Javascript that I've tried but have not been able to get working properly:
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward"){
$('checkbox').removeAttribute('checked');
}
If anyone knows of a way to uncheck a checkbox and have it so a hamburger menu doesn't appear when navigating between web pages I'd appreciate you sharing your knowledge. Thank you.
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward") {
$('checkbox').removeAttribute('checked');
}
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
#media (max-width: 1130px)and (min-width: 280px) {
.responsive-image-container {
display: flex;
flex-direction: column;
text-align: center;
}
img {
width: 85%;
}
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden; padding-bottom: 10px; font-size: 15px;">
<li style="border-bottom: 1px solid lightgray;">ホーム</li>
<li style="border-bottom: 1px solid lightgray;">ブログ</li>
<li style="border-bottom: 1px solid lightgray;">このサイトについて</li>
<li style="border-bottom: 1px solid lightgray;">参考文献</li>
I have a hamburger menu that's made with pure CSS. It works well, but I'd like to be able to have it closed after clicking on one of the links inside it.
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
I've tried to add a closeNav(); function, but haven't been able to get it working. I’d like it so that if I were to go back to a page where the hamburger menu had been opened and used to navigate to another page then it would be closed. If anyone knows how I could close the menu when clicking on a link inside of it I'd appreciate you sharing your knowledge with me. Thank you.
This is my CSS.
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
I'm having an issue were the CSS that I'm applying to a React component, is getting applied to the component above it.
See the example below:
|------------|
| Section 1 | CSS getting applied here
|------------|
| Section 2 | CSS code is in this component
|------------|
Here is a sample of the code in the component:
.area{
background: #4e54c8;
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
width: 100%;
height:100vh;
}
.circles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li{
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2){
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5){
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6){
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7){
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8){
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10){
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
#keyframes animate {
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
I'm not sure what I'm doing wrong, but I cannot see how to fix it. I'm trying to use the example here as a reference.
Thanks in advance!
I have search on the topic about restarting animation and that can be done by remove and add class again. But when I test it myself with the same method, I found that it doesn't work in many browsers. It only work in Edge. Is there something I did wrong?
here is the html:
function(elem) {
elem.classList.remove("animation");
setTimeout(function(){
elem.classList.add("animation");
elem.style.animationName = "transformOuter";
elem.style.webkitAnimationName = "transformOuter";},1)
}
div.wrapperL {
float: left;
width: 40px;
height: 38px;
background: rgb(255, 255, 255);
position: relative;
border: 1px solid white;
margin: 0 1px 5px 0;
}
div.wrapperLeft {
width: 40px;
height: 38px;
background: white;
position: relative;
border: 1px solid lightgrey;
}
div.animation {
-webkit-animation-name: none;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
animation-name: none;
animation-duration: 5s;
animation-iteration-count: 1;
}
#-webkit-keyframes transformOuter {
0% {background-color: #FFFFFF; width: 40px; height: 38px; left: 0px; top: 0px; z-index: 10;}
40% {width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px;}
60% {width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px; transform: rotateY(0deg); }
100% {width: 0px; height: 0px; left: 20px; top: 19px; background-color: #FFFFFF; transform: rotateY(360deg); z-index: 0; font-size: 0px;}
}
<div class = "wrapperL">
<div class= "wrapperLeft" onclick = functionAnime(this)></div>
</div>
I also have another keyframe without -webkit- but same thing inside.The animation do trigger once in chrome but when I click again, nothings happen.
You have to remove style as well same as you did with class see working example: And yes your function name was incorrect I assumed it was a typo.
function functionAnime(elem) {
elem.classList.remove("animation");
elem.style = '';
setTimeout(function(){
elem.classList.add("animation");
elem.style.animationName = "transformOuter";
elem.style.webkitAnimationName = "transformOuter";
},100)
}
div.wrapperL{
float: left ;
width: 40px;
height: 38px;
background: rgb(255, 255, 255);
position: relative;
border: 1px solid white;
margin: 0 1px 5px 0;}
div.wrapperLeft{
width: 40px;
height: 38px;
background: white;
position: relative;
border: 1px solid lightgrey; }
div.animation{
-webkit-animation-name: none;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
animation-name: none;
animation-duration: 5s;
animation-iteration-count: 1;}
#-webkit-keyframes transformOuter{
0% { background-color: #FFFFFF; width: 40px; height: 38px; left: 0px; top: 0px; z-index: 10;}
40% { width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px;}
60% { width: 120px; height: 114px; left: -40px; top: -38px; font-size: 30px; transform: rotateY(0deg); }
100% { width: 0px; height: 0px; left: 20px; top: 19px; background-color: #FFFFFF; transform: rotateY(360deg); z-index: 0; font-size: 0px;}}
<div class = "wrapperL">
<div class= "wrapperLeft animation" onclick = functionAnime(this)></div>
</div>
I'm currently setting up a one page website including a hamburg menu.
The menu is build up with list elements which are linked to a specific tag on that page.
I have only one issue and that's to revert the hamburg icon animation (which becomes a cross on click) back to it's normal state.
Here's the code :
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open').show();
});
$('#overlay li').on('click', function(){
$('#overlay').hide();
$('#toggle').removeClass("active");
});
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #1abc9c;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #1abc9c;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.container a:hover:after, .container a:focus:after, .container a:active:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
font-family: 'Varela Round', serif;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #fd7014;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
.overlay {
position: fixed;
background: #1a1a1a;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-family: 'Varela Round', sans-serif;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: ;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: ;
position: relative;
color: #fd7014;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<div id="toggle" class="button_container">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div id="overlay" class="overlay">
<nav class="overlay-menu">
<ul>
<li class="overlay-li">portfolio</li>
<li>services</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</div>
Does anyone know where how to fix this issue?
I dont have above 50 reputations so cant resolve your problem in comments,...
you just forgot to toggle the 'open' class of overlay when you are clicking on li
so just add the following line in your li click function
$('#overlay').toggleClass('open');
http://jsbin.com/faquzisobi/2/edit?html,css,js,output
everything else seems fine. :)