Auto Menu Responsive

by oktaviardi pratama

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/VPenkov/okayNav/master/app/js/jquery.okayNav.js"></script>
<body>
    <header id="header">
        <a class="site-logo" href="#">
           Logo
        </a>

        <nav role="navigation" id="nav-main" class="okayNav">
            <ul>
                <li><a href="#">Home</a>
                </li>
                <li><a href="#">Shop</a>
                </li>
                <li><a href="#">Blog</a>
                </li>
                <li><a href="#">Services</a>
                </li>
                <li><a href="#">Contacts</a>
                </li>
                <li><a href="#">About us</a>
                </li>
                <li><a href="#">Testimonials</a>
                </li>
            </ul>
        </nav>
    </header>
    <!-- /header -->

    <main>
        <h1>Resize your browser to preview okayNav - HITARTH & CHETAN</h1>
    </main>
</body>

CSS

* {
            box-sizing: border-box
        }
        *:before,
        *:after {
            box-sizing: inherit
        }
        /* Basic styles */
        
        .ok-header__logo:hover {
            color: #546edb
        }
        /* okayNav styles */
        
        body.okayNav-loaded {
            overflow-x: hidden;
        }
        .okayNav:not(.loaded) {
            visibility: hidden;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .okayNav ul {
            /* We want two navigations - one hidden and one visible */
            
            float: left;
        }
        .okayNav a {
            /* Links general styling */
            
            color: #2e2e33;
            font-size: 1.4rem;
            font-weight: bold;
            position: relative;
            z-index: 1;
        }
        .okayNav__nav--visible {
            overflow: hidden;
            white-space: nowrap;
        }
        .okayNav__nav--visible li {
            display: inline-block;
        }
        .okayNav__nav--visible a {
            /* Link styling for the visible part of the nav */
            
            display: block;
            transition: color 200ms cubic-bezier(0.55, 0, 0.1, 1);
            padding: 15px 15px;
        }
        .okayNav__nav--visible a:hover {
            color: #546edb;
        }
        /* Link styling for the off-screen part of the nav */
        
        .okayNav__nav--invisible {
            position: fixed;
            top: 70px;
            bottom: 0;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            background: #fff;
        }
        .okayNav__nav--invisible a {
            background: #fff;
            width: 240px;
            display: block;
            padding: 15px;
        }
        .okayNav__nav--invisible.nav-left {
            left: 0;
            -webkit-transform:...

JavaScript

$(document).ready(function() {

            var navigation = $('#nav-main').okayNav();

        });