CSS Challenge Day 039

css-challenge-day-039.markdown

CSS Challenge Day 039

Here's my version for day 39 of the CSS Challenge. I didn't make the cut off time but I finished it none the less. I have fixed the javascript part.

A Pen by Paul on CodePen.

License.

index.html

<div class="frame">
  <div class="center">
		<div class="menu-bar paused">
			<div class="line-top"></div>
			<div class="yoda"></div>
			<div class="line-bottom"></div>
			<div class="vader"></div>
		</div>
		<div class="menu-items">
			<ul>
				<li>Live</li>
				<li>Work</li>
				<li>Create</li>
				<li>Deploy</li>
			</ul>
		</div>
  </div>
</div>

script.js

// jQuery v3.3.1 is supported
lightsaber = document.querySelector('.menu-bar');
menu = document.querySelector('.menu-items');

lightsaber.addEventListener('click', function() {
	setTimeout(lightsaberToggle,200);
	menuToggle();
})

menu.addEventListener('click', function() {
	setTimeout(lightsaberToggle,200);
	menuToggle();
})

function lightsaberToggle() {
	if(lightsaber.classList.contains('paused') === true) {
		lightsaber.classList.replace('paused', 'active');
	} else if(lightsaber.classList.contains('active') === true) {
		lightsaber.classList.remove('active');
		lightsaber.classList.add('inactive');
		} else {
			lightsaber.classList.remove('inactive');
			lightsaber.classList.add('active');
		} 
}

function menuToggle() {
	// if(menu.classList.contains('active') === false) {
	// 	menu.classList.add('active');
	// } else {
	// 	menu.classList.remove('active');
	// }
	menu.classList.toggle('active');
}

scripts

<script src="https://100dayscss.com/codepen/js/jquery.min.js"></script>

style.scss

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #ad5389;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #3c1053, #ad5389);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.menu-bar {
	position: absolute;
	width: 50px;
	height: 25px;
	top: -25px;
	left: -25px;
	cursor: pointer;
	// transition: all 3s ease;
	
	.line-top {
		position: absolute;
		width: 50px;
		height: 10px;
		background: #ddd;
	}
	
	.yoda {
			position: absolute;
			width: 0px;
			height: 8px;
			top: -19px;
			left: -50px;
			border-radius: 25px;
			background: lime;
    	filter: blur(1px);
			transition: all 1s ease-out;
	}
	
	.line-bottom {
		position: absolute;
		width: 50px;
		height: 10px;
		top: initial;
		bottom: 0;
		background: #ddd;
	}
	
	.vader {
			position: absolute;
			width: 0px;
			height: 8px;
			top: 36px;
			right: -49px;
			border-radius: 25px;
			background: #FF1744;
			filter: blur(1px);
			transition: all 1s ease-out;
	}
	
	&.active {
		pointer-events: all;
		
		.line-top {
			animation: line-top-open 3s ease both;
		}
		
		.yoda {
			animation: lightsaber-open .8s ease-in 3s both;
		}
		
		.line-bottom {
			animation: line-bottom-open 3s ease both;
		}
		
		.vader {
			animation: lightsaber-open .8s ease-in 3s both;
		}
	}
	
	&.inactive {
		pointer-events: all;
		
		 .line-top {
			animation: line-top-close 3s ease 1s both;
		}
		 .yoda {
			animation: lightsaber-close .5s ease;
		}
		.line-bottom {
			animation: line-bottom-close 3s ease 1s both;
		}
		.vader {
			animation: lightsaber-close .5s ease;
		}
	}
}

.menu-items {
	position: absolute;
	width: 300px;
	height: 20px;
	top: -45px;
	left: -185px;
	padding: 5px 10px;
	opacity: 0;
	pointer-events: none;
	transition: all 2s ease-in-out;
	
	&.active {
		opacity: 1;
		pointer-events: all;
		transition: all 2s ease-in 2s;
	}
	
	ul {
		list-style: none;
		line-height: 20px;
		font-weight: 600;
		color: #fff;
		text-transform: uppercase;
		width: 280px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		li {
			position: relative;
			display: block;
			flex: 0 1 auto;
			cursor: pointer;
			transition: all .5s ease-in;
			
			&:hover {
				transform: scale(1.2);
			}
		}
	}
}

@keyframes line-top-open {
	0% { transform: translateY(0px) translateX(0px); }
	20% { transform: translateY(-20px); }
	100% { transform: translateX(-100px) translateY(-20px); }
}

@keyframes line-top-close {
	0% { transform: translateX(-100px) translateY(-20px); }
	20% { transform: translateY(-20px); }
	100% { transform: translateX(0px) translateY(0px); }
}

@keyframes line-bottom-open {
	0% { transform: translateY(0px) translateX(0px); }
	20% { transform: translateY(20px); }
	100% { transform: translateX(100px) translateY(20px); }
}

@keyframes line-bottom-close {
	0% { transform: translateX(100px) translateY(20px); }
	20% { transform: translateY(20px); }
	100% { transform: translateX(0px) translateY(0px); }
}

@keyframes lightsaber-open {
	0% { width: 0px; }
	100% { 
		width: 202px; 
		box-shadow: 0 0 8px 2px rgba(0,0,0,0.7);
	}
}

@keyframes lightsaber-close {
	0% { 
		width: 202px; 
		box-shadow: 0 0 8px 2px rgba(0,0,0,0.7);
	}
	100% { width: 0px; }
}