<nav class="mainnav">
				<button class="hidden-lg-up mainnav__toggle-button hamburger" type="button"><span class="hamburger__icon"></span>
				</button>

				<div class="navbar-toggleable-md">
					<ul class="nav mainnav__list">
						<li class="mainnav__nav-item">
							<a class="mainnav__nav-link" href="#"><span class="mainnav__nav-text">persönliches</span><span class="mainnav__nav-subtext">Lebenslauf</span></a>
						</li>
						<li class="mainnav__nav-item">
							<a class="mainnav__nav-link" href="#"><span class="mainnav__nav-text">gelerntes</span><span class="mainnav__nav-subtext">Kenntnisse</span></a>
						</li>
						<li class="mainnav__nav-item mainnav__nav-item--active">
							<a class="mainnav__nav-link" href="#"><span class="mainnav__nav-text">geleistetes</span><span class="mainnav__nav-subtext">Referenzen</span></a>
						</li>
				 		<li class="mainnav__nav-item">
							<a class="mainnav__nav-link" href="#"><span class="mainnav__nav-text">gesammeltes</span><span class="mainnav__nav-subtext">Code Snippets</span></a>
						</li>
					</ul>
				</div>
			</nav>

<div class="content">Hallo, ich bin der Content der Seite.<div>
body {
  background: #ACB6BA;
}

.content {
  background-color: #285769;
  padding: 20px;
  color: #FFF;
}

.mainnav {
	font-size: 20px;
	color: #3D3D3D;  
	display: block;
  padding: 0 20px 10px 20px;
	&__nav-item {
		position: relative;
		cursor: pointer;

		&.mainnav__nav-item--active {
			cursor: default;
			.mainnav__nav-link {
				color: #000;
				cursor: default;
			}
		}
	}

	&__nav-link {
		color: #3D3D3D;
		display: block;
	}
	&__nav-text {
		z-index: 2;
	}
	&__nav-subtext {
		z-index: 1;
		padding: 0;
		text-shadow: none;
		text-transform: none;
		font-size: 16px;
			&:before {
				content: ' - ';
			}
	}
}

.nav {
  position: relative;
  &:before {
  content: '';
  display: block;
    position: absolute;
    border-bottom: 1px solid #d4d4d4;
  top: 0;
  background-image: -moz-linear-gradient(top, #FFFFFF 70%, #DDDDDD);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.7, #FFFFFF), color-stop(1.0, #DDDDDD));
  background-color: #DDDDDD;
  width: 300px;
  height: 50%;
  transform: perspective(500px) rotateX(-90deg);
    -webkit-transform-origin-x: 50%;
    -webkit-transform-origin-y: 100%;
    transition: transform 1s;
    transition-delay: 0.5s;
}

&:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  z-index: -1;
background-image: -moz-linear-gradient(top, #FFFFFF 30%, #ddd 0%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.3, #FFFFFF), color-stop(0.00, #ddd));
background-color: #DDDDDD;
  width: 300px;
  height: 50%;
  transform: perspective(500px) rotateX(90deg);
    -webkit-transform-origin-x: 50%;
    -webkit-transform-origin-y: 0%;
  transition: transform 1s;
  transition-delay: 0.5s;
}

}

.mainnav--open .nav:before {
  transform: perspective(500px) rotateX(0deg);
  transition: transform 1s;
}

.mainnav--open .nav:after {
  transform: perspective(500px) rotateX(0deg);
  transition: transform 1s;
}

.mainnav__list {
  padding: 0;
  max-height: 0;
  transition: max-height 1s linear, padding 1s ease-in;
  }
.mainnav__nav-item {
    opacity: 0;
    transition: opacity 0.5s linear;
  }

.mainnav--open {
  .mainnav__list {
    padding: 20px 0;
    max-height: 500px;
    transition: max-height 1s linear,
      padding 1s ease-out;
  }
  .mainnav__nav-item {
    opacity: 1;
    transition: opacity 0.5s linear;
    transition-delay: 0.5s;
  }
}



//Overwrite bootstrap 
.nav>li>a:hover {
  background: none;
}





@mixin transform($transforms) {
	-moz-transform: $transforms;
	-o-transform: $transforms;
	-ms-transform: $transforms;
	-webkit-transform: $transforms;
	transform: $transforms;
}

@mixin transition($transition...) {
    -moz-transition: $transition;
    -o-transition: $transition;
    -ms-transition: $transition;
    -webkit-transition: $transition;
    transition: $transition;
}

@mixin transform-origin ($origin) {
	-moz-transform-origin: $origin;
	-o-transform-origin: $origin;
	-ms-transform-origin: $origin;
	-webkit-transform-origin: $origin;
	transform-origin: $origin;
}

.hamburger {
	width: 30px;
	height: 30px;
	margin: 20px auto;
	padding-top: 10px;
	top: 0;
	left: 0;
  background: none;
	border: none;
	@include transition(.5s ease-in-out);
	@include transform(rotate(0deg));
	cursor: pointer;
  &:focus {
    outline: none;
  }
	&__icon,
	&__icon:before,
	&__icon:after {
			content:'';
			display: block;
			position: absolute;
			height: 3px;
			width: 100%;
			background: #285769;
			border-radius: 3px;
			opacity: 1;
			left: 0;
			@include transition(.25s ease-in-out);
			@include transform(rotate(0deg));
			@include transform-origin(left center);
	}
	&__icon:before {
		top: -9px; 
	}
	&__icon {
		top: 9px;
	}
	&__icon:after {
		top: 9px;
	}
}

.mainnav--open .hamburger {
	.hamburger__icon:before {
		@include transform(rotate(45deg));
		top: -11px;
		left: 4px;
	}
	.hamburger__icon {
		background: 0 0;
	}
	.hamburger__icon:after {
		@include transform(rotate(-45deg));
		top: 10px;
		left: 4px;
	}
}
View Compiled
$(document).ready(function(){
	$('.mainnav__toggle-button').click(function(){
		$(this).closest('.mainnav').toggleClass('mainnav--open');
	});
});
Rerun