A Pen by Manfred Kempener

undefined

Layout: Hamburger / Menu Animated by Greensock

Thumbnail
This awesome code was written by mikeK, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mikeK ©
  • HTML
  • CSS
  • JavaScript
    	<nav>
		<ul>
			<li><a href="Einfuehrung.html" id="" class="">ONE</a></li>
			<li><a href="#" id="">TWO</a></li>
			<li><a href="#" id="">THREE</a></li>
			<li><a href="#" id="">Impressum</a></li>
		</ul>

	</nav>
		<div class="menu box-shadow-menu">M</div>

/*Downloaded from https://www.codeseek.co/mikeK/a-pen-by-manfred-kempener-pgdgaY */
    body{background: black}
a {
  text-decoration: none;
}
nav {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: #E8EBEF;
  visibility: hidden;
}

nav ul {
    list-style: none;
    position: absolute;
    left: auto;
    right: 50px;
}

nav ul li {
    display: inline-block;
}

nav ul li:last-child {
    margin-right: 0;
}

nav a {
  position: relative;
  top: 0;
  padding: 10px 8px;
  font-weight: normal;
  font-size: 14px;
  line-height: 58px;
  text-align: center;
  border-radius: 4px;
  color: rgba(64, 64, 64, 1.00);
}

nav a.active {
    top: -4px;
    color: #FFFFFF;

}
.menu {
  position: absolute;
  left: auto;
  right: 0px;
  height: 75px;
  width: 100px !important;
  visibility: visible;
}
.box-shadow-menu {
  width: 20px;
  font-size: 28px;
  color: transparent;
  visibility: visible;
	 
}
.box-shadow-menu:after {
	content: "";
	position: absolute;
	left: 50%;
  top: 50%;
	width: 1em;
	height: 0.12em;
	background: white;
  box-shadow: 0 0.25em 0 0 white, 0 0.5em 0 0 white;
	cursor: pointer;
	visibility: visible;
}


/*Downloaded from https://www.codeseek.co/mikeK/a-pen-by-manfred-kempener-pgdgaY */
    	var navi = new TimelineMax({paused:true});
	navi.to(".box-shadow-menu",0.1, {autoAlpha:0} )
	.to("nav", 0.2, {autoAlpha:1}, 0 )
	

	$('.menu').mouseenter(function(){
		navi.play(1);
		});
	  
	$('nav').mouseleave(function(){
		navi.reverse();
	});

Comments