Mobile Navigation Tutorial

index.html

<header class="header">
    <h1 class="header__site-title">Mobile Navigation Tutorial</h1>

    <a href="#" class="nav__trigger"><i class="nav__icon fa fa-bars"></i></a>

    <nav class="nav">
        <ul class="nav__list">
            <li class="nav__list-item"><a href="#" class="nav__link">Home</a></li>
            <li class="nav__list-item"><a href="#" class="nav__link">About</a></li>
            <li class="nav__list-item">
                <a href="#" class="nav__link">Services</a>
            </li>
            <li class="nav__list-item">
                <a href="#" class="nav__link">Portfolio</a>
            </li>
            <li class="nav__list-item">
                <a href="#" class="nav__link">Media</a>
            </li>
            <li class="nav__list-item">
                <a href="#" class="nav__link">Contact</a>
            </li>

        </ul>
    </nav>

</header>

<main class="main">
    <h2>Lorem ipsum dolor.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid hic non nostrum iure id asperiores itaque, similique in omnis maiores placeat error et at quo, deserunt, voluptatem? Esse, excepturi, voluptatum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio mollitia amet harum qui alias. Alias tempora sit aspernatur facere deserunt accusamus, nesciunt? Harum temporibus minima voluptate dolorem iusto. Vero quo ullam maiores quod iure et earum a voluptatibus, temporibus nulla quisquam rem nam provident accusamus, totam inventore quae. Et, inventore.</p>
    <br />
    <h2>Lorem ipsum dolor.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores magni nihil id natus similique nobis minima, dolores, porro perspiciatis nam.</p>
</main>

Mobile Navigation Tutorial.markdown

Mobile Navigation Tutorial

A Pen by David Royer on CodePen.

License.

script.js

(function() {
    
    //Cache Dom Elements
    var navTrigger = $('.nav__trigger');
    var nav = $('.nav');
    
    //Function
    
    function triggerMenu(event) {
        
        event.preventDefault();
        nav.toggleClass('nav--open');
    }
    
    //Bind Function
    
    navTrigger.on('click', triggerMenu);
    
   
})();

scripts

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

// Variables

// Header: #303F9F
// Font: #3A3C48
// Nav: #C5CAE9

// BASE
* {
    box-sizing: border-box;
}
body {
    font-family: "Roboto";
    font-weight: 500;
}



// HEADER

.header {
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #303F9F;
    right: 0;
    z-index: 50;
    
    &__site-title {
        color: white;
        margin: 0 0 0 20px;
        padding: 30px 0;
        font-size: 18px;
        
        @media (min-width: 650px) {
            font-size: 2em;
            padding: 20px 0;
        }

    }
}    



// MAIN

.main {
    
    padding: 100px 60px;
}


// NAVIGATION

.nav {
    
    position: fixed;
    right: 0;
    top: 80px;
    background-color: #C5CAE9;
    width: 200px;
    height: 100%;
    padding: 10px 20px 100px;
    overflow-y: auto;
    
    transition: all .3s ease;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -webkit-transition: all .3s ease;
    
    &--open {
        
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
    
    &__trigger {
        position: fixed;
        top: 25px;
        right: 30px;
        color: white;
        font-size: 28px;
    }
    
    &__list-item {
        list-style-type: none;
        margin: 30px 0;
        text-align: right;
    }
    
    &__link {
        text-decoration: none;
        padding: 10px;
        font-size: 18px;
        font-weight: 700;
        color: #3A3C48;
    }
}