Angular2 full-screen menu/navigation

angular2-full-screen-menu-navigation.markdown

Angular2 full-screen menu/navigation

A Pen by rafszul on CodePen.

License.

index.pug

html
  head
    script(src='https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js')
    script(src='https://code.angularjs.org/tools/system.js')
    script(src='https://code.angularjs.org/2.0.0-beta.17/Rx.js')
    script(src='https://code.angularjs.org/2.0.0-beta.17/angular2.js')
    script(src='https://code.angularjs.org/2.0.0-beta.17/http.js')
    script.
      System.config({
      map: {
      app: 'http://codepen.io/curt_puckett/pen/rLjPPQ.js'
      },
      meta: {
      '*.js': {
      format: 'cjs'
      }
      },
      packages: {
      app: {
      format: 'register',
      defaultExtension: 'js'
      }
      }
      });
      System.import('app')
      .catch(console.error.bind(console));
  body
    my-app Loading...

script.typescript

import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
<div id="toggle" (click)="toggleNav()" [class.toggled]="navToggle === true">
	<ul>
		<li>
			<a href="#" >
				<span class="line l1"></span><span class="line l2"></span>
				<span class="line l3"></span>
			</a>
		</li>
	</ul>
</div>

<section id="full-screen-nav" class="panel" [class.active]="navToggle === true">
	<nav id="nav">
		<ul>
			<li>
				<a href="#">About Us
					<span class="desc">
						what we do, &amp; 
						why we do it
					</span>
				</a>
			</li>
			<li>
				<a href="#">Development
					<span class="desc">
						we are passionate about clean 
						code
					</span>
				</a>
			</li>
			<li>
				<a href="#">Design Services
					<span class="desc">
						we are lovers of fresh 
						aesthetics &amp; clean code
					</span>
				</a>
			</li>
			<li>
				<a href="#">Chief Exports
					<span class="desc">
						we only export goods that we 
						would use
					</span>
				</a>
			</li>
			<li>
				<a href="#">Let's Chat
					<span class="desc">
						let's chat about your next 
						project?
					</span>
				</a>
			</li>
		</ul>
	</nav>
</section>

<section id="intro" class="panel">
  <article>
    <header>
      <h1>Angular 2 Full-Screen</h1>
      <h2>menu / navigation</h2>
    </header>
  </article>
</section>

  `,
  directives: []
})
export class App {
	
  public title:string;
	public subTitle:string;
	public navToggle: boolean = false;
 
  constructor() { }

	ngOnInit(){
    this.title = 'Angular 2 Full-Screen';
    this.subTitle = 'menu / navigation';
	}
	
	toggleNav(){
		this.navToggle = !this.navToggle;
	}

}

bootstrap(App, [])
  .catch(err => console.error(err));

style.scss

html, body{
	height: 100%;
}
body{
  margin: 0px;
  padding: 0px;
  background-color: #1d1d1d;
  font-family: 'Merriweather', serif;
}
a, a:active, a:focus{
	text-decoration: none;
	outline: none;
	transition: all .2s ease;
}
h1{
  font-weight: 900;
  font-size: 32px;
  line-height: 32px;
  margin-bottom: 14px;
}

h2{
  font-family: 'Merriweather', serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 16px;
  margin-top: 0px;
}

#toggle{
  position: absolute;
  right: 50px;
  top: 50px;
  width: 50px;
  height: 50px;
  z-index: 150;
}

#toggle ul{
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  width: 17px;
  height: 50px;
}

#toggle ul li{
  position: relative;
  width: 17px;
  height: 12px;
  cursor: pointer;
}

#toggle ul li a{
	display: block;
	width: 100%;
	height: 100%;
}

#toggle ul li a:hover span{
	transition: all .4s ease;
	background-color: #fff;
}

#toggle.toggled ul li a span{
	background-color: #444;
}


#toggle ul li span{
  position: absolute;
  left: 0px;
  width: 17px;
  height: 2px;
  background-color: #999;
  &.line.l2{
    top: 50%;
  }
  &.line.l3{
    top: 100%;
  }
}

#toggle ul li span.line {
    transition: all .4s ease;
}

#toggle.toggled ul li span.l1 {
    transform: translateY(6px) translateX(0px) rotate(45deg);
}

#toggle.toggled ul li span.l2 {
    opacity: 0
}

#toggle.toggled ul li span.l3 {
    transform: translateY(-6px) translateX(0px) rotate(-45deg);
}

section.panel#full-screen-nav{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  opacity: 0;
  transition: all 800ms;
  pointer-events: none;
	&.active{
		opacity: 1;
		pointer-events: auto;
		nav#nav{
			ul li{
				opacity: 1;
				transform:translateY(0px);
				transition: all .5s ease;
				&:nth-child(2){
					transition-delay: .2s;
				}
				&:nth-child(3){
					transition-delay: .4s;
				}
				&:nth-child(4){
					transition-delay: .6s;
				}
				&:nth-child(5){
					transition-delay: .8s;
				}
			}
		}
	}
}

nav#nav{
	position: relative;
	height: 100%;
	overflow: scroll;
	ul{
		position: absolute;
		top: 100px;
		left: 100px;
		margin: 0px;
		padding: 0px;
		list-style-type: none;
		li{
			border-bottom: 1px solid #ddd;
			padding-bottom: 25px;
			opacity: 0;
			transform:translateY(-20px);
			&:not(:first-child){
				padding-top: 25px;
			}
			a{
				color: #444;
				font-weight: 700;
				font-size: 32px;
				span{
					display: block;
					font-size: 16px;
					color: #777;
					font-weight: 300;
					transition: all .2s ease;
				}
				&:hover{
					color: #dd727d;
					span{
						color: #444;
					}
				}
			}
		}
	}
}

section.panel#intro{
  width: 100%;
  height: 100vh;
  article{
    display: table;
    text-align: center;
    width: 100%;
    height: 100%;
  }
  article header{
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: middle;
    h1{
      color: #fff;
    }
    h2{
       color: #999;
    }
  }
}