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

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console