|
|
| Line 1: |
Line 1: |
| − | {{BU17_template_global}}
| |
| − | <!DOCTYPE html>
| |
| − | <html lang="en" class="no-js">
| |
| − | <head>
| |
| − | <style>
| |
| − | /*STYLE SHEET "ICONS" ABOVE, "INDEX3" BELOW */
| |
| − | *,
| |
| − | *:after,
| |
| − | *::before {
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| | | | |
| − | body {
| |
| − | background: #2980b9;
| |
| − | }
| |
| − |
| |
| − | .container {
| |
| − | padding: 80px;
| |
| − | }
| |
| − |
| |
| − | .bt-menu {
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 0;
| |
| − | border-width: 0px;
| |
| − | border-style: solid;
| |
| − | border-color: #333;
| |
| − | background-color: rgba(0,0,0,0);
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | -webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
| |
| − | transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
| |
| − | }
| |
| − |
| |
| − | .bt-menu.bt-menu-open {
| |
| − | height: 100%;
| |
| − | border-width: 30px 30px 90px 30px;
| |
| − | background-color: rgba(0,0,0,0.3);
| |
| − | -webkit-transition: border-width 0.3s, background-color 0.3s;
| |
| − | transition: border-width 0.3s, background-color 0.3s;
| |
| − | }
| |
| − |
| |
| − | .bt-overlay {
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .bt-menu-open .bt-overlay {
| |
| − | height: 100%;
| |
| − | }
| |
| − |
| |
| − | .bt-menu-trigger {
| |
| − | position: fixed;
| |
| − | bottom: 22px;
| |
| − | left: 50%;
| |
| − | z-index: 100;
| |
| − | display: block;
| |
| − | margin-left: -25px;
| |
| − | width: 50px;
| |
| − | height: 50px;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | .bt-menu-trigger span {
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | left: 0;
| |
| − | display: block;
| |
| − | width: 100%;
| |
| − | height: 8%;
| |
| − | background-color: #fff;
| |
| − | font-size: 0px;
| |
| − | -webkit-transition: background-color 0.3s;
| |
| − | transition: background-color 0.3s;
| |
| − | -webkit-touch-callout: none;
| |
| − | -webkit-user-select: none;
| |
| − | -khtml-user-select: none;
| |
| − | -moz-user-select: none;
| |
| − | -ms-user-select: none;
| |
| − | user-select: none;
| |
| − | }
| |
| − |
| |
| − | .bt-menu-open .bt-menu-trigger span {
| |
| − | background-color: #2980b9;
| |
| − | }
| |
| − |
| |
| − | .bt-menu-trigger span:before,
| |
| − | .bt-menu-trigger span:after {
| |
| − | position: absolute;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background: #fff;
| |
| − | content: '';
| |
| − | -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
| |
| − | transition: transform 0.3s, background-color 0.3s;
| |
| − | }
| |
| − |
| |
| − | .bt-menu-trigger span:before {
| |
| − | -webkit-transform: translateY(-250%);
| |
| − | transform: translateY(-250%);
| |
| − | }
| |
| − |
| |
| − | .bt-menu-trigger span:after {
| |
| − | -webkit-transform: translateY(250%);
| |
| − | transform: translateY(250%);
| |
| − | }
| |
| − |
| |
| − | .bt-menu-open .bt-menu-trigger span:before,
| |
| − | .bt-menu-open .bt-menu-trigger span:after {
| |
| − | background-color: #2980b9;
| |
| − | }
| |
| − |
| |
| − | .bt-menu-open .bt-menu-trigger span:before {
| |
| − | -webkit-transform: translateY(-350%);
| |
| − | transform: translateY(-350%);
| |
| − | }
| |
| − |
| |
| − | .bt-menu-open .bt-menu-trigger span:after {
| |
| − | -webkit-transform: translateY(350%);
| |
| − | transform: translateY(350%);
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul {
| |
| − | position: fixed;
| |
| − | bottom: 0px;
| |
| − | left: 0;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | width: 100%;
| |
| − | list-style: none;
| |
| − | text-align: center;
| |
| − | white-space: nowrap;
| |
| − | height: 0;
| |
| − | -webkit-transition: height 0s 0.3s;
| |
| − | transition: height 0s 0.3s;
| |
| − | }
| |
| − |
| |
| − | .bt-menu.bt-menu-open ul {
| |
| − | height: 90px;
| |
| − | -webkit-transition: none;
| |
| − | transition: none;
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul li,
| |
| − | .bt-menu ul li a {
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul li {
| |
| − | display: inline-block;
| |
| − | margin: 0 2%;
| |
| − | width: 5%;
| |
| − | height: 90px;
| |
| − | line-height: 90px;
| |
| − | opacity: 0;
| |
| − | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
| |
| − | transition: transform 0.3s, opacity 0.3s;
| |
| − | -webkit-transform: translate3d(0,100%,0);
| |
| − | transform: translate3d(0,100%,0);
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul li:nth-child(3) {
| |
| − | margin-right: 70px;
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul li:nth-child(4) {
| |
| − | margin-left: 70px;
| |
| − | }
| |
| − |
| |
| − | .bt-menu.bt-menu-open ul li {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: translate3d(0,0,0);
| |
| − | transform: translate3d(0,0,0);
| |
| − | }
| |
| − |
| |
| − | .bt-menu.bt-menu-open ul li:first-child,
| |
| − | .bt-menu.bt-menu-open ul li:last-child {
| |
| − | -webkit-transition-delay: 0.15s;
| |
| − | transition-delay: 0.15s;
| |
| − | }
| |
| − |
| |
| − | .bt-menu.bt-menu-open ul li:nth-child(2),
| |
| − | .bt-menu.bt-menu-open ul li:nth-last-child(2) {
| |
| − | -webkit-transition-delay: 0.1s;
| |
| − | transition-delay: 0.1s;
| |
| − | }
| |
| − |
| |
| − | .bt-menu.bt-menu-open ul li:nth-child(3),
| |
| − | .bt-menu.bt-menu-open ul li:nth-last-child(3) {
| |
| − | -webkit-transition-delay: 0.05s;
| |
| − | transition-delay: 0.05s;
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul li a {
| |
| − | display: block;
| |
| − | outline: none;
| |
| − | color: #fff;
| |
| − | text-decoration: none;
| |
| − | text-transform: uppercase;
| |
| − | letter-spacing: 1px;
| |
| − | font-size: 1.15em;
| |
| − | -webkit-transition: color 0.2s;
| |
| − | transition: color 0.2s;
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul li a:before {
| |
| − | display: none;
| |
| − | font-size: 32px;
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul li a:hover,
| |
| − | .bt-menu ul li a:focus {
| |
| − | color: #2980b9;
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 65.1em) {
| |
| − | .bt-menu ul li a {
| |
| − | font-size: 90%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 55.5em) {
| |
| − | .bt-menu ul li {
| |
| − | margin: 0 15px;
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul li a {
| |
| − | font-size: 0px;
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul li a:before {
| |
| − | display: block;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 32em) {
| |
| − | .bt-menu-trigger {
| |
| − | width: 40px;
| |
| − | margin-left: -20px;
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul li {
| |
| − | margin: 0 2%;
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul li:nth-child(3) {
| |
| − | margin-right: 50px;
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul li:nth-child(4) {
| |
| − | margin-left: 50px;
| |
| − | }
| |
| − |
| |
| − | .bt-menu ul li a:before {
| |
| − | font-size: 24px;
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − | <div class="container">
| |
| − | <header class="codrops-header">
| |
| − | </header>
| |
| − | <nav id="bt-menu" class="bt-menu">
| |
| − | <a href="#" class="bt-menu-trigger"><span>Menu</span></a>
| |
| − | <ul>
| |
| − | <li><a href="#" class="bt-icon icon-user-outline">About</a></li>
| |
| − | <li><a href="#" class="bt-icon icon-sun">Skills</a></li>
| |
| − | <li><a href="#" class="bt-icon icon-windows">Work</a></li>
| |
| − | <li><a href="#" class="bt-icon icon-speaker">Blog</a></li>
| |
| − | <li><a href="#" class="bt-icon icon-star">Clients</a></li>
| |
| − | <li><a href="#" class="bt-icon icon-bubble">Contact</a></li>
| |
| − | </ul>
| |
| − | </nav>
| |
| − | </div><!-- /container -->
| |
| − | </body>
| |
| − | <script>
| |
| − | (function() {
| |
| − | // http://stackoverflow.com/a/11381730/989439
| |
| − | function mobilecheck() {
| |
| − | var check = false;
| |
| − | (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
| |
| − | return check;
| |
| − | }
| |
| − |
| |
| − | function init() {
| |
| − |
| |
| − | var menu = document.getElementById( 'bt-menu' ),
| |
| − | trigger = menu.querySelector( 'a.bt-menu-trigger' ),
| |
| − | // triggerPlay only for demo 6
| |
| − | triggerPlay = document.querySelector( 'a.bt-menu-trigger-out' ),
| |
| − | // event type (if mobile use touch events)
| |
| − | eventtype = mobilecheck() ? 'touchstart' : 'click',
| |
| − | resetMenu = function() {
| |
| − | classie.remove( menu, 'bt-menu-open' );
| |
| − | classie.add( menu, 'bt-menu-close' );
| |
| − | },
| |
| − | closeClickFn = function( ev ) {
| |
| − | resetMenu();
| |
| − | overlay.removeEventListener( eventtype, closeClickFn );
| |
| − | };
| |
| − |
| |
| − | var overlay = document.createElement('div');
| |
| − | overlay.className = 'bt-overlay';
| |
| − | menu.appendChild( overlay );
| |
| − |
| |
| − | trigger.addEventListener( eventtype, function( ev ) {
| |
| − | ev.stopPropagation();
| |
| − | ev.preventDefault();
| |
| − |
| |
| − | if( classie.has( menu, 'bt-menu-open' ) ) {
| |
| − | resetMenu();
| |
| − | }
| |
| − | else {
| |
| − | classie.remove( menu, 'bt-menu-close' );
| |
| − | classie.add( menu, 'bt-menu-open' );
| |
| − | overlay.addEventListener( eventtype, closeClickFn );
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | if( triggerPlay ) {
| |
| − | triggerPlay.addEventListener( eventtype, function( ev ) {
| |
| − | ev.stopPropagation();
| |
| − | ev.preventDefault();
| |
| − |
| |
| − | classie.remove( menu, 'bt-menu-close' );
| |
| − | classie.add( menu, 'bt-menu-open' );
| |
| − | overlay.addEventListener( eventtype, closeClickFn );
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | init();
| |
| − |
| |
| − | })();
| |
| − | /*!
| |
| − | * classie - class helper functions
| |
| − | * from bonzo https://github.com/ded/bonzo
| |
| − | *
| |
| − | * classie.has( elem, 'my-class' ) -> true/false
| |
| − | * classie.add( elem, 'my-new-class' )
| |
| − | * classie.remove( elem, 'my-unwanted-class' )
| |
| − | * classie.toggle( elem, 'my-class' )
| |
| − | */
| |
| − |
| |
| − | /*jshint browser: true, strict: true, undef: true */
| |
| − | /*global define: false */
| |
| − |
| |
| − | ( function( window ) {
| |
| − |
| |
| − | 'use strict';
| |
| − |
| |
| − | // class helper functions from bonzo https://github.com/ded/bonzo
| |
| − |
| |
| − | function classReg( className ) {
| |
| − | return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
| |
| − | }
| |
| − |
| |
| − | // classList support for class management
| |
| − | // altho to be fair, the api sucks because it won't accept multiple classes at once
| |
| − | var hasClass, addClass, removeClass;
| |
| − |
| |
| − | if ( 'classList' in document.documentElement ) {
| |
| − | hasClass = function( elem, c ) {
| |
| − | return elem.classList.contains( c );
| |
| − | };
| |
| − | addClass = function( elem, c ) {
| |
| − | elem.classList.add( c );
| |
| − | };
| |
| − | removeClass = function( elem, c ) {
| |
| − | elem.classList.remove( c );
| |
| − | };
| |
| − | }
| |
| − | else {
| |
| − | hasClass = function( elem, c ) {
| |
| − | return classReg( c ).test( elem.className );
| |
| − | };
| |
| − | addClass = function( elem, c ) {
| |
| − | if ( !hasClass( elem, c ) ) {
| |
| − | elem.className = elem.className + ' ' + c;
| |
| − | }
| |
| − | };
| |
| − | removeClass = function( elem, c ) {
| |
| − | elem.className = elem.className.replace( classReg( c ), ' ' );
| |
| − | };
| |
| − | }
| |
| − |
| |
| − | function toggleClass( elem, c ) {
| |
| − | var fn = hasClass( elem, c ) ? removeClass : addClass;
| |
| − | fn( elem, c );
| |
| − | }
| |
| − |
| |
| − | var classie = {
| |
| − | // full names
| |
| − | hasClass: hasClass,
| |
| − | addClass: addClass,
| |
| − | removeClass: removeClass,
| |
| − | toggleClass: toggleClass,
| |
| − | // short names
| |
| − | has: hasClass,
| |
| − | add: addClass,
| |
| − | remove: removeClass,
| |
| − | toggle: toggleClass
| |
| − | };
| |
| − |
| |
| − | // transport
| |
| − | if ( typeof define === 'function' && define.amd ) {
| |
| − | // AMD
| |
| − | define( classie );
| |
| − | } else {
| |
| − | // browser global
| |
| − | window.classie = classie;
| |
| − | }
| |
| − |
| |
| − | })( window );
| |
| − |
| |
| − | </script>
| |
| − | </html>
| |
