Skip to content

Instantly share code, notes, and snippets.

@englishextra

englishextra/index.html

Last active April 26, 2017 20:53
Show Gist options
  • Save englishextra/76206ce67897113f5520e31a766fc5ce to your computer and use it in GitHub Desktop.
Save englishextra/76206ce67897113f5520e31a766fc5ce to your computer and use it in GitHub Desktop.
Download ZIP
modified navbar.js - Minimal navigation script
Raw
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex,nofollow" />
<meta name="description" content="Страница не найдена" /><title>Страница не найдена</title>
<style>
body{color:transparent;background-color:#F0F0F0;}a,ul,li,.panel-nav-menu li a,.holder-panel-menu-more{color:inherit;}ul{list-style-type:none;}.panel-nav-menu,.panel-nav-top{background-color:transparent;}.panel-nav-menu,.holder-panel-menu-more,.panel-nav-top,.btn-nav-menu,.btn-menu-more,.btn-show-vk-like,.share-buttons,.holder-search-form,.holder-contents-select,.location-qr-code,.contacts-qr-code,.cd-prev,.cd-next,.pswp,.superbox,.github-fork-ribbon a,template{display:none;}.ya-site-form.ya-site-form_inited_no{visibility:hidden;}.page{opacity:0;}
</style><noscript><link rel="stylesheet" href="./css/bundle.min.css" /><style>.page{opacity:1;}</style></noscript>
<script>
(function(){return function templatePolyfill(){"use strict";if("content"in document.createElement("template")){return false;}var templates=document.getElementsByTagName("template");var plateLen=templates.length;for(var x=0;x<plateLen;++x){var template=templates[x];var content=template.childNodes;var fragment=document.createDocumentFragment();while(content[0]){fragment.appendChild(content[0]);}template.content=fragment;}}();}());
var imagesPreloaded=!1;(function(m){m="[object Array]"===Object.prototype.toString.apply(m)?m:[m];var t=function(){imagesPreloaded=!0;},f=function(){imagesPreloaded=!1;},c=[];for(var i=0,l=m.length;i<l;i++){c[i]=new Image();c[i].onabort=f;c[i].onerror=f;c[i].onload=t;c[i].src=m[i];}})(["./img/hero-1920x1080.jpg"]);
</script>
<!-- <script src="./cdn/sw-toolbox/3.4.0/js/companion.fixed.min.js" data-service-worker="service-worker.js"></script> -->
</head>
<body>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="navbar-icon-ChevronLeft" viewBox="0 0 32 32">
<title>ChevronLeft</title>
<path d="M23.953 30.547l-1.406 1.406-15.969-15.953 15.969-15.953 1.406 1.406-14.531 14.547 14.531 14.547z"></path>
</symbol>
<symbol id="navbar-icon-ChevronRight" viewBox="0 0 32 32">
<title>ChevronRight</title>
<path d="M8.047 30.547l14.531-14.547-14.531-14.547 1.406-1.406 15.969 15.953-15.969 15.953-1.406-1.406z"></path>
</symbol>
<symbol id="navbar-icon-Up" viewBox="0 0 32 32">
<title>Up</title>
<path d="M30.704 14.743l-1.407 1.407-12.296-12.296v28.093h-2v-28.093l-12.296 12.296-1.407-1.407 14.704-14.702 14.704 14.702z"></path>
</symbol>
<symbol id="navbar-icon-ChevronDownSmall" viewBox="0 0 32 32">
<title>ChevronDownSmall</title>
<path d="M28.109 6.171l3.782 3.766-15.891 15.891-15.891-15.891 3.782-3.766 12.109 12.111 12.109-12.111z"></path>
</symbol>
<symbol id="navbar-icon-ChevronRightSmall" viewBox="0 0 32 32">
<title>ChevronRightSmall</title>
<path d="M9.934 0.109l15.889 15.891-15.891 15.891-3.766-3.782 12.111-12.109-12.109-12.109 3.766-3.782z"></path>
</symbol>
<symbol id="navbar-icon-englishextra" viewBox="0 0 32 32">
<title>englishextra</title>
<path d="M21.87 30.143c-0.446 0-0.886-0.071-1.325-0.216-1.896-0.63-2.755-2.163-2.361-4.2 0.305-1.568 0.93-3.029 1.538-4.438 0.434-1.009 0.837-1.973 1.239-2.943 0.289-0.693 0.579-1.387 0.871-2.080 0.004-0.009 0.009-0.021 0.014-0.030-0.264 0.243-0.529 0.491-0.789 0.752-0.679 0.707-1.355 1.423-2.032 2.141-1.118 1.184-2.277 2.407-3.443 3.586-0.809 0.829-1.813 1.759-3.109 2.355-0.77 0.37-1.473 0.464-2.145 0.293-1.245-0.323-1.907-1.35-1.816-2.813 0.054-1.216 0.43-2.336 0.982-3.643 0.48-1.113 0.993-2.227 1.489-3.305 0.25-0.541 0.496-1.079 0.741-1.62l0.607-1.334c0.707-1.543 1.414-3.088 2.098-4.643 0.195-0.443 0.33-0.934 0.461-1.407 0.045-0.168 0.093-0.336 0.141-0.502-0.1 0.098-0.193 0.195-0.268 0.3-0.895 1.279-1.804 2.557-2.714 3.821-0.277 0.38-0.552 0.766-0.825 1.15-0.684 0.959-1.395 1.952-2.136 2.902-0.452 0.555-1.014 1.043-1.636 1.405-0.589 0.357-1.241 0.423-1.834 0.184-0.623-0.252-1.107-0.816-1.327-1.545-0.354-1.13 0.029-2.148 0.398-2.909 0.354-0.727 0.745-1.452 1.118-2.157 0.329-0.618 0.661-1.236 0.975-1.862 0.32-0.648 0.63-1.343 0.579-2.093-0.025-0.459-0.218-0.834-0.58-1.111-0.193-0.146-0.421-0.143-0.782 0.025-0.754 0.345-1.291 0.952-1.714 1.5-0.325 0.438-0.78 0.568-1.186 0.343-0.266-0.157-0.436-0.379-0.491-0.627-0.054-0.236-0.004-0.482 0.143-0.714 0.727-1.168 1.645-1.966 2.729-2.375 1.3-0.491 2.514-0.027 3.334 1.279 0.57 0.893 0.704 1.918 0.386 2.959-0.296 0.954-0.709 1.873-1.075 2.648-0.246 0.529-0.516 1.052-0.784 1.577-0.268 0.523-0.537 1.050-0.784 1.579-0.145 0.318-0.191 0.679-0.237 1.059l-0.016 0.114c-0.004 0.037 0.027 0.118 0.082 0.191 0.050-0.018 0.109-0.045 0.13-0.068 0.132-0.143 0.261-0.277 0.391-0.407 0.391-0.405 0.796-0.821 1.12-1.28 0.618-0.898 1.225-1.807 1.83-2.72 0.536-0.805 1.073-1.616 1.623-2.418 0.629-0.902 1.271-1.743 1.911-2.493 0.579-0.657 1.145-1.018 1.786-1.136 0.546-0.105 1.102 0.043 1.555 0.409 0.479 0.388 0.779 0.979 0.825 1.62 0.075 0.843-0.030 1.634-0.318 2.414l-0.179 0.479c-0.527 1.402-1.073 2.854-1.668 4.243-0.516 1.2-1.050 2.387-1.586 3.577-0.539 1.195-1.075 2.393-1.595 3.595-0.286 0.673-0.486 1.4-0.679 2.105-0.054 0.195-0.107 0.393-0.162 0.587-0.016 0.045-0.023 0.098-0.029 0.155 0.182-0.102 0.341-0.193 0.477-0.295 1.17-0.879 2.182-1.971 3.164-3.030 1.543-1.691 3.2-3.493 4.875-5.229 0.627-0.664 1.321-1.15 2.064-1.445 0.755-0.298 1.518-0.271 2.139 0.071 0.604 0.334 1.027 0.943 1.202 1.714 0.159 0.736 0.039 1.477-0.082 2.041-0.3 1.355-0.839 2.65-1.366 3.902-0.136 0.33-0.275 0.657-0.409 0.991-0.67 1.695-1.177 3.018-1.648 4.288-0.082 0.223-0.12 0.47-0.163 0.73-0.020 0.141-0.043 0.279-0.073 0.414l0.113 0.030c0.282-0.009 0.571-0.020 0.795-0.114 0.941-0.377 1.702-1.073 2.436-1.75 0.505-0.47 1.009-0.977 1.495-1.466l0.123-0.123c0.543-0.536 1.048-0.538 1.577-0.016 0.384 0.37 0.718 0.693 1.052 1.048 0.218 0.23 0.332 0.491 0.329 0.752-0.002 0.245-0.109 0.48-0.305 0.68l-0.198 0.195c-1.33 1.316-2.704 2.68-4.429 3.598-0.943 0.502-1.805 0.754-2.639 0.754z"></path>
</symbol>
<symbol id="navbar-icon-odnoklassniki" viewBox="0 0 32 32">
<title>odnoklassniki</title>
<path d="M16 16.196c-2.238 0-4.148-0.791-5.732-2.375s-2.375-3.488-2.375-5.714c0-2.237 0.791-4.148 2.375-5.732s3.495-2.375 5.732-2.375 4.148 0.791 5.732 2.375 2.375 3.495 2.375 5.732c0 2.227-0.791 4.13-2.375 5.714s-3.495 2.375-5.732 2.375zM16 4.107c-1.095 0-2.032 0.389-2.813 1.17s-1.17 1.723-1.17 2.83c0 1.095 0.389 2.032 1.17 2.813s1.718 1.17 2.813 1.17 2.032-0.389 2.813-1.17c0.78-0.78 1.17-1.718 1.17-2.813 0-1.107-0.389-2.050-1.17-2.83s-1.718-1.17-2.813-1.17zM25.339 17.179c0.155 0.321 0.245 0.616 0.268 0.884s-0.004 0.509-0.080 0.723-0.236 0.443-0.473 0.688-0.491 0.464-0.759 0.661-0.634 0.443-1.098 0.741c-1.37 0.87-3.245 1.429-5.625 1.679l1.304 1.286 4.768 4.768c0.357 0.37 0.536 0.809 0.536 1.321s-0.179 0.946-0.536 1.304l-0.214 0.232c-0.37 0.357-0.809 0.536-1.321 0.536s-0.952-0.179-1.321-0.536c-0.798-0.809-2.387-2.405-4.768-4.786l-4.768 4.786c-0.37 0.357-0.809 0.536-1.321 0.536s-0.946-0.179-1.304-0.536l-0.214-0.232c-0.37-0.357-0.554-0.791-0.554-1.304s0.184-0.952 0.554-1.321l6.054-6.054c-2.416-0.25-4.304-0.809-5.661-1.679-0.464-0.298-0.83-0.545-1.098-0.741s-0.521-0.416-0.759-0.661-0.396-0.473-0.473-0.688-0.104-0.455-0.080-0.723 0.112-0.563 0.268-0.884c0.12-0.238 0.286-0.446 0.5-0.625s0.464-0.309 0.75-0.393 0.62-0.071 1 0.036c0.38 0.107 0.768 0.316 1.161 0.625 0.059 0.048 0.148 0.113 0.268 0.196s0.375 0.229 0.768 0.438 0.804 0.389 1.232 0.545 0.977 0.298 1.643 0.429 1.339 0.196 2.018 0.196c1.084 0 2.12-0.152 3.107-0.455s1.702-0.604 2.143-0.902l0.679-0.446c0.393-0.309 0.78-0.518 1.161-0.625s0.714-0.12 1-0.036 0.536 0.214 0.75 0.393 0.38 0.387 0.5 0.625z"></path>
</symbol>
<symbol id="navbar-icon-vkontakte" viewBox="0 0 32 32">
<title>vkontakte</title>
<path d="M27 21.436c0 1.379-0.259 2.614-0.766 3.675-0.518 1.050-1.207 1.925-2.093 2.614-1.046 0.82-2.179 1.421-3.407 1.75-1.252 0.35-2.804 0.525-4.734 0.525h-11v-28h9.716c2.016 0 3.559 0.077 4.584 0.241 1.046 0.154 2.016 0.482 2.934 0.984 0.993 0.536 1.725 1.27 2.2 2.166s0.734 1.936 0.734 3.118c0 1.368-0.334 2.58-1.014 3.643-0.657 1.061-1.596 1.848-2.782 2.352v0.154c1.704 0.371 3.041 1.105 4.066 2.22 1.045 1.125 1.541 2.655 1.563 4.559v0zM18.146 9.92c0-0.448-0.107-0.92-0.334-1.379-0.216-0.47-0.571-0.82-1.068-1.029-0.464-0.207-0.993-0.318-1.618-0.339s-1.543-0.032-2.782-0.032h-0.475v5.939h0.884c1.175 0 1.995-0.021 2.48-0.032 0.475-0.032 0.948-0.154 1.466-0.393 0.55-0.262 0.938-0.613 1.132-1.082 0.216-0.47 0.313-1.007 0.313-1.62v0l0.002-0.034zM19.904 21.316c0-0.875-0.163-1.532-0.518-2.034-0.345-0.482-0.863-0.864-1.543-1.105-0.421-0.164-0.993-0.262-1.725-0.284s-1.725-0.032-2.955-0.032h-1.262v7h0.368c1.802 0 3.041-0.021 3.721-0.032 0.702-0.032 1.391-0.186 2.104-0.504 0.625-0.284 1.079-0.668 1.38-1.214 0.291-0.527 0.43-1.116 0.43-1.795z"></path>
</symbol>
</defs>
</svg>
<div class="page" id="page" role="document">
<div class="ui-panel-top"></div>
<div class="ui-panel-navigation"></div>
<div class="container-navbar">
<div class="holder-navbar">
<ul class="navbar" data-function="navbar">
<li>
<a href="/">
<svg class="navbar-icon logo">
<use xlink:href="#navbar-icon-englishextra"></use>
</svg> </a>
</li>
<li>
<a href="javascript:void(0);">Demos&#160;
<svg class="navbar-icon pointer">
<use xlink:href="#navbar-icon-ChevronDownSmall"></use>
</svg> </a>
<ul id="navbar_links_local"></ul>
</li>
<li>
<a href="javascript:void(0);">Navigate&#160;
<svg class="navbar-icon pointer">
<use xlink:href="#navbar-icon-ChevronDownSmall"></use>
</svg> </a>
<ul>
<li>
<a href="javascript:void(0);">Rentals&#160;
<svg class="navbar-icon pointer">
<use xlink:href="#navbar-icon-ChevronRightSmall"></use>
</svg> </a>
<ul>
<li>
<a href="javascript:void(0);">Locations&#160;
<svg class="navbar-icon pointer">
<use xlink:href="#navbar-icon-ChevronRightSmall"></use>
</svg> </a>
<ul>
<li>
<a href="javascript:void(0);">Rentals</a>
</li>
<li>
<a href="javascript:void(0);">Integrate</a>
</li>
<li>
<a href="javascript:void(0);">Options</a>
</li>
<li>
<a href="javascript:void(0);">Account</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Services&#160;
<svg class="navbar-icon pointer">
<use xlink:href="#navbar-icon-ChevronRightSmall"></use>
</svg> </a>
<ul>
<li>
<a href="javascript:void(0);">Rentals</a>
</li>
<li>
<a href="javascript:void(0);">Integrate</a>
</li>
<li>
<a href="javascript:void(0);">Options</a>
</li>
<li>
<a href="javascript:void(0);">Account</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Personal Info&#160;
<svg class="navbar-icon pointer">
<use xlink:href="#navbar-icon-ChevronRightSmall"></use>
</svg> </a>
<ul>
<li>
<a href="javascript:void(0);">Rentals</a>
</li>
<li>
<a href="javascript:void(0);">Integrate</a>
</li>
<li>
<a href="javascript:void(0);">Options</a>
</li>
<li>
<a href="javascript:void(0);">Account</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Соцсети&#160;
<svg class="navbar-icon pointer">
<use xlink:href="#navbar-icon-ChevronDownSmall"></use>
</svg> </a>
<ul id="share" class="dropdown-menu">
<li>
<a href="https://vk.com/sergeydavydow" target="_blank">Вконтакте редактора&#160;
<svg class="navbar-icon action">
<use xlink:href="#navbar-icon-vkontakte"></use>
</svg> </a>
</li>
<li>
<a href="https://ok.ru/sergueishimanski" target="_blank">Одноклассники редактора&#160;
<svg class="navbar-icon action">
<use xlink:href="#navbar-icon-odnoklassniki"></use>
</svg> </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="container" id="container" role="main">
<div class="holder-hero">
<div class="hero">
<div class="hero-heading">Английский без регистрации</div>
<div class="hero-figcaption"><a href="https://unsplash.com/photos/2yB0ilQgkxs" target="_blank">London Expedition 001, by Clem Onojeghuo, Leake Street, London, United Kingdom, on Unsplash</a></div>
</div>
</div>
<div id="app-content"></div>
<div class="holder-b-carousel">
<div class="b-carousel js-carousel">
<div class="b-carousel__wrap js-carousel__wrap">
<div class="b-carousel__item">
<img src="https://images.unsplash.com/photo-1472136481627-4914370bca38?w=500" alt="" class="b-carousel__img">
</div>
<div class="b-carousel__item">
<img src="https://images.unsplash.com/photo-1443981257024-40c63080b3ed?w=500" alt="" class="b-carousel__img">
</div>
<div class="b-carousel__item">
<img src="https://images.unsplash.com/photo-1422303497846-57188833cbe1?w=500" alt="" class="b-carousel__img">
</div>
<div class="b-carousel__item">
<img src="https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?w=500" alt="" class="b-carousel__img">
</div>
</div>
<a class="b-carousel__prev js-carousel__prev">
<svg class="b-carousel-icon">
<use xlink:href="#navbar-icon-ChevronLeft"></use>
</svg>
</a>
<a class="b-carousel__next js-carousel__next">
<svg class="b-carousel-icon">
<use xlink:href="#navbar-icon-ChevronRight"></use>
</svg>
</a>
</div>
</div>
</div>
<div class="container-footer">
<div class="footer">
<a href="https://unsplash.com/photos/2yB0ilQgkxs" target="_blank">London Expedition 001, by Clem Onojeghuo, Leake Street, London, United Kingdom, on Unsplash</a>
</div>
</div>
</div>
<template id="template-navbar_links_local">
{{@navbar_links_local}}
<li>
<a href="{{%_val.url}}">{{=_val.text}}</a>
</li>
{{/@navbar_links_local}}
</template>
<!-- <script type="text/x-handlebars-template" id="template-navbar_links_local">
{{@navbar_links_local}}
<li>
<a href="{{%_val.url}}">{{=_val.text}}</a>
</li>
{{/@navbar_links_local}}
</script> -->
<script>
;(function(){var loadJS=function(_src,callback){"use strict";var ref=document.getElementsByTagName("script")[0];var script=document.createElement("script");script.src=_src;script.async=true;ref.parentNode.insertBefore(script,ref);if(callback&&"function"===typeof callback){script.onload=callback;}return script;};("undefined"!==typeof window?window:this).loadJS=loadJS;}());
;(function(){var loadCSS=function(_href,callback,media,before){"use strict";var doc=document;var ss=doc.createElement("link");var ref;if(before){ref=before;}else{var refs=(doc.body||doc.getElementsByTagName("head")[0]).childNodes;ref=refs[refs.length-1];}var sheets=doc.styleSheets;ss.rel="stylesheet";ss.href=_href;ss.media="only x";if(callback&&"function"===typeof callback){ss.onload=callback;}function ready(cb){if(doc.body){return cb();}setTimeout(function(){ready(cb);});}ready(function(){ref.parentNode.insertBefore(ss,(before?ref:ref.nextSibling));});var onloadcssdefined=function(cb){var resolvedHref=ss.href;var i=sheets.length;while(i--){if(sheets[i].href===resolvedHref){return cb();}}setTimeout(function(){onloadcssdefined(cb);});};function loadCB(){if(ss.addEventListener){ss.removeEventListener("load",loadCB);}ss.media=media||"all";}if(ss.addEventListener){ss.addEventListener("load",loadCB);}ss.onloadcssdefined=onloadcssdefined;onloadcssdefined(loadCB);return ss;};("undefined"!==typeof window?window:this).loadCSS=loadCSS;}());
if(/^(localhost|127.0.0.1)/.test(window.location.hostname||"")){loadCSS("./css/bundle.css");}else{loadCSS("./css/bundle.min.css");}
</script>
<script>
if (!window.requestAnimationFrame
|| !window.matchMedia
|| ("undefined" === typeof window.Element && !("dataset" in document.documentElement))
|| !("classList" in document.createElement("_"))
|| document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg", "g"))
/* ||!document.importNode */
/* ||!("content"in document.createElement("template")) */
|| (window.attachEvent && !window.addEventListener)
|| !("onhashchange" in window)
|| !Array.prototype.indexOf
|| !window.Promise
|| !window.fetch
|| !document.querySelectorAll
|| !document.querySelector) {
if(/^(localhost|127.0.0.1)/.test(window.location.hostname||"")){loadJS("./js/polyfills.js");}else{loadJS("./js/polyfills.min.js");}
}
</script>
<script>
if(/^(localhost|127.0.0.1)/.test(window.location.hostname||"")){loadJS("./js/bundle.js");}else{loadJS("./js/bundle.min.js");}
</script>
</body>
</html>
Raw
navbar.fixed.css
/*! @import "navbar.fixed"; */
/*!
* @see {@link https://github.com/thednp/navbar.js/issues/2}
*/
.navbar,
.navbar ul {
list-style: none;
padding: 0;
}
.navbar,
.navbar ol,
.navbar ul {
margin: 0;
}
.navbar li {
position: relative;
vertical-align: middle;
}
.navbar li > ul {
width: 18.133rem;
position: absolute;
background-color: #000000;
opacity: 0;
}
@media (max-width: 768px) {
.navbar li > ul {
width: auto;
}
}
.navbar li a {
display: block;
height: 3.200rem;
font-size: 0.933rem;
line-height: 3.200rem;
text-decoration: none;
color: #FFFFFF;
background-color: #1F1F1F;
padding: 0 1.333rem;
}
.navbar li a .navbar-icon.pointer {
float: right;
width: 0.533rem;
height: 0.533rem;
margin-top: 1.333rem;
}
.navbar li a .navbar-icon.action {
float: right;
width: 1.333rem;
height: 1.333rem;
margin-top: 0.933rem;
}
.navbar li a .navbar-icon.logo {
float: right;
width: 1.333rem;
height: 1.333rem;
margin-top: 0.933rem;
}
@media (max-width: 768px) {
.navbar li a .navbar-icon.logo {
float: left;
}
}
.navbar a svg {
display: block;
padding: 0;
}
.navbar li li a {
color: #FFFFFF;
background-color: #1F1F1F;
}
.navbar li li a .navbar-icon.pointer > *,
.navbar li li a .navbar-icon.action > * {
fill: #FFFFFF;
}
.navbar li a .navbar-icon.pointer > *,
.navbar li li.is-open > a .navbar-icon.pointer > *,
.navbar li li:hover > a .navbar-icon.pointer > *,
.navbar li li.is-active > a .navbar-icon.pointer > *,
.navbar li li.is-active:hover > a .navbar-icon.pointer > *,
.navbar li a .navbar-icon.action > *,
.navbar li li.is-open > a .navbar-icon.action > *,
.navbar li li:hover > a .navbar-icon.action > *,
.navbar li li.is-active > a .navbar-icon.action > *,
.navbar li li.is-active:hover > a .navbar-icon.action > * {
fill: #FFFFFF;
}
.navbar li a .navbar-icon.logo > * {
fill: #FFFFFF;
}
.navbar li li.is-open > a,
.navbar li li:hover > a {
color: #FFFFFF;
background-color: #A82934;
}
.navbar li li.is-active > a,
.navbar li li.is-active:hover > a {
color: #FFFFFF;
background-color: #000000;
}
.navbar li.is-open > ul {
opacity: 1;
}
.navbar > li.is-open > a,
.navbar > li:hover > a,
.navbar > li.is-active > a,
.navbar > li.is-active:hover > a {
color: #FFFFFF;
background-color: #000000;
}
.navbar > li > a {
float: left;
}
@media (max-width: 768px) {
.navbar > li > a {
float: none;
}
}
.navbar > li {
position: relative;
float: left;
}
@media (max-width: 768px) {
.navbar > li {
float: none;
}
}
.navbar li > ul,
.navbar li li > ul {
top: -999em;
left: 85%;
transition: top 0s, opacity .2s ease;
}
.navbar li li.is-open > ul {
left: 100%;
}
.navbar li li.is-repositioned > ul {
top: 0;
}
.navbar li.is-open > ul {
top: 100%;
}
.navbar li.is-repositioned > ul {
left: 0;
}
@media (max-width: 768px) {
.navbar li.is-repositioned > ul {
position: static;
}
}
Raw
navbar.fixed.js
/*!
* modified navbar.js - Minimal navigation script
* by dnp_theme
* Licensed under MIT-License
* @see {@link https://gist.github.com/englishextra/76206ce67897113f5520e31a766fc5ce}
* @see {@link https://github.com/thednp/navbar.js/blob/master/navbar.js}
* passes jshint
*/
(function () {
"use strict";
var bar = '[data-function="navbar"]',
containerClass = ".container",
rootStyle = document.documentElement.style || "",
supportTransitions = function () {
return "WebkitTransition" in rootStyle || "transition" in rootStyle || "OTransition" in rootStyle || "MsTransition" in rootStyle || "MozTransition" in rootStyle ? !0 : !1;
}
(),
on = function (element, eventName, handler) {
element.addEventListener(eventName, handler, false);
},
openClass = "is-open",
isPositioned = "is-repositioned",
close = function (element) {
if (element.classList.contains(openClass)) {
element.classList.remove(openClass);
setTimeout(function () {
element.classList.remove(isPositioned);
}, (supportTransitions ? 200 : 0));
}
},
Navbar = function (el, outsideClass) {
var menu = (typeof el === "object") ? el : document.querySelector(el);
if (menu) {
var items = menu.getElementsByTagName("li") || "";
if (items) {
var enterHandler = function () {
var that = this;
clearTimeout(that.timer);
if (!that.classList.contains(openClass)) {
that.timer = setTimeout(function () {
that.classList.add(openClass);
that.classList.add(isPositioned);
var siblings = that.parentNode.getElementsByTagName("li");
for (var h = 0; h < siblings.length; h++) {
if (siblings[h] !== that) {
close(siblings[h]);
}
}
}, 100);
}
},
closeHandler = function () {
for (var i = 0, itemsLength = items.length; i < itemsLength; i++) {
if (items[i].getElementsByTagName("ul").length) {
close(items[i]);
}
}
};
for (var i = 0, itemsLength = items.length; i < itemsLength; i++) {
if (items[i].getElementsByTagName("ul").length) {
on(items[i], "click", enterHandler);
}
}
window.addEventListener("hashchange", closeHandler);
var outside = document.querySelector(outsideClass) || "";
if (outside) {
outside.addEventListener("click", closeHandler);
}
}
}
};
return Navbar(bar, containerClass);
}
());
@englishextra
Copy link
Author

See the demo repo https://github.com/englishextra/navbar.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment