tutorials.de - Awesome Font und Navigation

by SpiceLab

HTML

<script src="https://use.fontawesome.com/316b11cd9d.js"></script>
<header>
    <figure>
        <img src="/static/img/layout/logo.png" alt="logo">
    </figure>
 
    <button class="fa fa-bars" id="toggle"></button>
   
    <section class="overlay" id="overlay">
      <div>
         <nav class="overlay-menu">
           <a href="/" title="Start"><span class="fa fa-home">Home</span></a>
           <a href="/about/" title="About"><span class="fa fa-user">About</span></a>
           <a href="/farming/" title="Farming"><span class="fa fa-user">Farming</span></a>
           <a href="/energy/" title="Energy"><span class="fa fa-user">Energy</span></a>
           <a href="/contact/" title="Contact"><span class="fa fa-envelope-o">Contact</span></a>
         </nav>
       </div>            
    </section>
</header>

CSS

header#main {
    @include outer-container(100%);
    @include clearfix;
    position: relative;
 
    figure {
        padding: 1em;
    }
 
    button.fa-bars {
       position: fixed;
       cursor: pointer;
       z-index: 100;
       background: none;
       border: none;
       top: 1em;
       right: 1em;
       display: block;
       outline: 0;
       font-size: 2em;
       color: $light-gray;
    }
 
    nav {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
 
    nav a {
        color: $light-gray;
        display: block;
 
        &:hover {
            color: white;
        }
    }  
} 
section.overlay {
    position: fixed;
    background: darkgray;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: hidden;
} 
.overlay.open {
    opacity: .9;
    visibility: visible;
    height: 100%;
}
.overlay div {
  float:right;
  right:50%;
  top:50%;
  position:relative;
}
.overlay nav {
  float:right;
  right:-50%;
  top:50%;
  position:relative;
  height:70%;
  text-align:left;
  -webkit-transform:translateY(-50%);
  transform:translateY(-50%);
}
.overlay nav a {display:block;}
.fa-home::before {margin-right:11.0667px;}
.fa-user::before {margin-right:13.2167px;}
.fa-envelope-o::before {margin-right:10px;}

JavaScript

$('#toggle').click(function() {
   $(this).toggleClass('active');
   $('#overlay').toggleClass('open');
});