cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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</h1>
    </main>
            
          
!
            
              *{box-sizing:border-box}*:before,*:after{box-sizing:inherit}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

html {
  font-size: 62.5%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  font-family: @font-family-base;
}

body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.4rem;
    line-height: 1.42857143;
    color: #555;
    background-color: #f7f7f7;
}

a {text-decoration: none}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

header {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 7rem;
    padding: 0 15px;
    position: fixed;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    top: 0;
    width: 100%
}

.site-logo {
    transition: color 200ms cubic-bezier(.55, 0, .1, 1);
    color: #30acff;
    font-size: 3rem;
}

.ok-header__logo:hover {color: #546edb}

main {
    margin-top: 7rem;
    padding: 2%;
    text-align: center;
}
/*
 * We are hiding the invisible nav outside the screen
 * so we need to avoid the horizontal scroll
 */
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 {
  transition: -webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 400ms cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 400ms cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  padding-top: 70px;
  -webkit-transform-origin: 200px 0;
      -ms-transform-origin: 200px 0;
          transform-origin: 200px 0;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.okayNav__nav--invisible a {
  background: #fff;
  width: 240px;
  display: block;
  padding: 15px;
}
.okayNav__nav--invisible.nav-open {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
/* Kebab icon */
.okayNav__menu-toggle {
  position: relative;
  transition: -webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 400ms cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 400ms cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1);
  cursor: pointer;
  width: 40px;
  height: 20px;
  float: left;
  z-index: 1;
  top: 15px;
}
.okayNav__menu-toggle span {
  display: block;
  position: absolute;
  margin: auto;
  height: 4px;
  width: 4px;
  background: #2e2e33;
  border-radius: 50%;
  left: 0;
  right: 0;
  pointer-events: none;
}
.okayNav__menu-toggle span:nth-child(1) {
  top: 0;
}
.okayNav__menu-toggle span:nth-child(2) {
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.okayNav__menu-toggle span:nth-child(3) {
  bottom: 0;
}
.okayNav__menu-toggle.icon--active {
  /* Kebab icon when off-screen nav is open */
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.okayNav__menu-toggle.icon--active span {
  background: #546edb;
}
            
          
!
            
              /*
 * @Name: jquery.okayNav.js - A progressively responsive navigation
 * @Version: 1.0.1
 *
 * @Copyright (c) 2016 Vergil Penkov
 *
 * Licensed under the MIT license: https://opensource.org/licenses/MIT
 * Project home: https://github.com/VPenkov/okayNav
*/

;(function ( $, window, document, undefined ) {

    // Defaults
    var okayNav = 'okayNav',
        defaults = {
            parent : '', // will call nav's parent() by default
            toggle_icon_class : 'okayNav__menu-toggle',
            toggle_icon_content: '<span /><span /><span />',
            beforeopen : function() {}, // Will trigger before the nav gets opened
            open : function() {}, // Will trigger after the nav gets opened
            beforeclose : function() {}, // Will trigger before the nav gets closed
            close : function() {}, // Will trigger after the nav gets closed
        };

    // Begin
    function Plugin( element, options ) {
        this.options = $.extend( {}, defaults, options) ;
        _okayNav = this; // Plugin

        _invisibleNavState = false; // Is the hidden menu open?
        _options = this.options;

        $document = $(document); // for event triggering
        $body = $('body'); // for controlling the overflow
        $navigation = $(element); // jQuery object

        this.options.parent == '' ? this.options.parent = $navigation.parent() : '';

        // At this point, we have access to the jQuery element and the options
        // via the instance, e.g., $navigation and _options. We can access these
        // anywhere in the plugin.
        _okayNav.init();
    }

    Plugin.prototype = {
        init: function () {
            // Some DOM manipulations
            _okayNav.setupElements($navigation);

            // Cache new elements for further use
            $nav_visible = $navigation.children('.okayNav__nav--visible');
            $nav_invisible = $navigation.children('.okayNav__nav--invisible');
            $nav_toggle_icon = $navigation.children('.' + _options.toggle_icon_class);
            _nav_toggle_icon_width = $nav_toggle_icon.outerWidth(true);
            _last_visible_child_width = 0; // We'll define this later

            // Events are up once everything is set
            _okayNav.initEvents();
        },

        /*
         * Let's setup the elements and attach events
         */
        // Elements
        setupElements: function(el) {
            $body.addClass('okayNav-loaded');

            // Add classes
            $navigation
                .addClass('okayNav loaded')
                .children('ul').addClass('okayNav__nav--visible');

            // Append elements
            $navigation
                .append('<ul class="okayNav__nav--invisible" />')
                .append('<a href="#" class="' + _options.toggle_icon_class + '">' + _options.toggle_icon_content + '</a>')
        },

        // Events
        initEvents: function() {
            // Toggle hidden nav when hamburger icon is clicked
            $document.on('click.okayNav', '.' + _options.toggle_icon_class, function(event) {
                event.preventDefault();
                _okayNav.toggleInvisibleNav();
            });

            // Collapse hidden nav on click outside the header
            $document.on('click.okayNav', function(event) {
                if (_invisibleNavState === true) {
                    var _target = $(event.target);
                    if (!_target.parents().hasClass('okayNav'))
                        _okayNav.closeInvisibleNav();
                }
            });

            $(window).on('load.okayNav resize.okayNav', function(event) {
                _okayNav.recalcNav();
            });
        },

        /*
         * A few methods to allow working with elements
         */
        getParent: function () {
            return _options.parent;
        },

        getVisibleNav: function() { // Visible navigation
            return $nav_visible;
        },

        getInvisibleNav: function() { // Hidden behind the kebab icon
            return $nav_invisible;
        },

        getNavToggleIcon: function() { // Kebab icon
            return $nav_toggle_icon;
        },

        /*
         * Operations
         */
        openInvisibleNav: function() {
            _options.beforeopen.call();
            $nav_toggle_icon.addClass('icon--active');
            $nav_invisible.addClass('nav-open');
            _invisibleNavState = true;
            _options.open.call();
            $document.trigger('okayNav:open');
        },

        closeInvisibleNav: function() {
            _options.beforeclose.call();
            $nav_toggle_icon.removeClass('icon--active');
            $nav_invisible.removeClass('nav-open');
            _invisibleNavState = false;
            _options.close.call();
            $document.trigger('okayNav:close');
        },

        toggleInvisibleNav: function() {
            if (!_invisibleNavState) {
                _invisibleNavState = true;
                _okayNav.openInvisibleNav();
            }
            else {
                _invisibleNavState = false;
                _okayNav.closeInvisibleNav();
            }
        },


        /*
         * Math stuff
         */
        getParentWidth: function(el) {
            var parent = el || _options.parent;
            var parent_width = $(parent).outerWidth(true);

            return parent_width;
        },

        getChildrenWidth: function(el) {
            var children_width = 0;
            $(el).children().each(function() {
                children_width += $(this).outerWidth(true);
            });

            return children_width;
        },

        countNavItems: function(el) {
            var $menu = $(el);
            var items = $('li', $menu).length;

            return items;
        },

        recalcNav: function() {
            var wrapper_width = $(_options.parent).outerWidth(true);
            var nav_full_width = $navigation.outerWidth(true);
            var visible_nav_items = _okayNav.countNavItems($nav_visible);

            var collapse_width = $nav_visible.outerWidth(true) + _nav_toggle_icon_width - 1;
            var expand_width = _okayNav.getChildrenWidth(_options.parent) + _last_visible_child_width + _nav_toggle_icon_width;
            /* _okayNav.getChildrenWidth(_options.parent) gets the total
               width of the <nav> element and its siblings. */


            if (visible_nav_items > 0 && nav_full_width <= collapse_width)
                _okayNav.collapseNavItem();

            if (wrapper_width > expand_width)
                _okayNav.expandNavItem();


            // Hide the kebab icon if no items are hidden
            $('li', $nav_invisible).length == 0 ? $nav_toggle_icon.hide() : $nav_toggle_icon.show();
        },

        collapseNavItem: function() {
            var $last_child = $('li:last-child', $nav_visible);
            _last_visible_child_width = $last_child.outerWidth(true);
            $last_child.detach().prependTo($nav_invisible);

            // All nav items are visible by default
            // so we only need recursion when collapsing
            _okayNav.recalcNav();
            $document.trigger('okayNav:collapseItem');
        },


        expandNavItem: function() {
            $('li:first-child', $nav_invisible).detach().appendTo($nav_visible);
            $document.trigger('okayNav:expandItem');
        },

        destroy: function() {
            $('li', $nav_invisible).appendTo($nav_visible);
            $nav_invisible.remove();
            $nav_visible.removeClass('okayNav__nav--visible');
            $nav_toggle_icon.remove();

            $document.unbind('.okayNav');
            $(window).unbind('.okayNav');
        }

    }

    // Plugin wrapper
    $.fn[okayNav] = function ( options ) {
        var args = arguments;

        if (options === undefined || typeof options === 'object') {
            return this.each(function () {
                if (!$.data(this, 'plugin_' + okayNav)) {
                    $.data(this, 'plugin_' + okayNav, new Plugin( this, options ));
                }
            });

        } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {

            var returns;
            this.each(function () {
                var instance = $.data(this, 'plugin_' + okayNav);
                if (instance instanceof Plugin && typeof instance[options] === 'function') {
                    returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
                }

                if (options === 'destroy') {
                  $.data(this, 'plugin_' + okayNav, null);
                }
            });

            return returns !== undefined ? returns : this;
        }
    };

}(jQuery, window, document));


/*
 * @TODO: swipe gestures
*/



var navigation = $('#nav-main').okayNav();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console