0
我正在爲我的網站建立一個基本的菜單系統。關閉菜單通過點擊菜單和ESC
演示：http://jsfiddle.net/k46bm0Lb/
如何編輯我的代碼，以使菜單關閉時，我一）打ESC我的鍵盤上& B）不是放在網頁上任何點擊菜單。
代碼：
\t /*!
\t * classie - class helper functions
\t * from bonzo https://github.com/ded/bonzo
\t *
\t * classie.has(elem, 'my-class') -> true/false
\t * classie.add(elem, 'my-new-class')
\t * classie.remove(elem, 'my-unwanted-class')
\t * classie.toggle(elem, 'my-class')
\t */
\t /*jshint browser: true, strict: true, undef: true */
\t /*global define: false */
\t (function(window) {
\t 'use strict';
\t // class helper functions from bonzo https://github.com/ded/bonzo
\t function classReg(className) {
\t return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
\t }
\t // classList support for class management
\t // altho to be fair, the api sucks because it won't accept multiple classes at once
\t var hasClass, addClass, removeClass;
\t if ('classList' in document.documentElement) {
\t hasClass = function(elem, c) {
\t return elem.classList.contains(c);
\t };
\t addClass = function(elem, c) {
\t elem.classList.add(c);
\t };
\t removeClass = function(elem, c) {
\t elem.classList.remove(c);
\t };
\t }
\t else {
\t hasClass = function(elem, c) {
\t return classReg(c).test(elem.className);
\t };
\t addClass = function(elem, c) {
\t if (!hasClass(elem, c)) {
\t elem.className = elem.className + ' ' + c;
\t }
\t };
\t removeClass = function(elem, c) {
\t elem.className = elem.className.replace(classReg(c), ' ');
\t };
\t }
\t function toggleClass(elem, c) {
\t var fn = hasClass(elem, c) ? removeClass : addClass;
\t fn(elem, c);
\t }
\t var classie = {
\t // full names
\t hasClass: hasClass,
\t addClass: addClass,
\t removeClass: removeClass,
\t toggleClass: toggleClass,
\t // short names
\t has: hasClass,
\t add: addClass,
\t remove: removeClass,
\t toggle: toggleClass
\t };
\t // transport
\t if (typeof define === 'function' && define.amd) {
\t // AMD
\t define(classie);
\t } else {
\t // browser global
\t window.classie = classie;
\t }
\t })(window);
\t /**
\t * main.js
\t * http://www.codrops.com
\t *
\t * Licensed under the MIT license.
\t * http://www.opensource.org/licenses/mit-license.php
\t *
\t * Copyright 2014, Codrops
\t * http://www.codrops.com
\t */
\t (function() {
\t \t var bodyEl = document.body,
\t \t \t content = document.querySelector('.content-wrap'),
\t \t \t openbtn = document.getElementById('open-button'),
\t \t \t closebtn = document.getElementById('close-button'),
\t \t \t isOpen = false;
\t \t function init() {
\t \t \t initEvents();
\t \t }
\t \t function initEvents() {
\t \t \t openbtn.addEventListener('click', toggleMenu);
\t \t \t if(closebtn) {
\t \t \t \t closebtn.addEventListener('click', toggleMenu);
\t \t \t }
\t \t \t // close the menu element if the target it´s not the menu element or one of its descendants..
\t \t \t content.addEventListener('click', function(ev) {
\t \t \t \t var target = ev.target;
\t \t \t \t if(isOpen && target !== openbtn) {
\t \t \t \t \t toggleMenu();
\t \t \t \t }
\t \t \t });
\t \t }
\t \t function toggleMenu() {
\t \t \t if(isOpen) {
\t \t \t \t classie.remove(bodyEl, 'show-menu');
\t \t \t }
\t \t \t else {
\t \t \t \t classie.add(bodyEl, 'show-menu');
\t \t \t }
\t \t \t isOpen = !isOpen;
\t \t }
\t \t init();
\t })();\t \t /************Reset**************/
\t \t *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
\t \t html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }
\t \t html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, fieldset, legend, label, table, header, footer, nav, section {
\t \t \t margin: 0;
\t \t \t padding: 0;
\t \t \t border: 0;
\t \t }
\t \t ol, ul {
\t \t \t list-style: none;
\t \t }
\t \t header, footer, nav, section, article, hgroup, figure {
\t \t \t display: block; \t
\t \t }
\t \t legend {
\t \t \t display: none;
\t \t }
\t \t /************End Reset**************/
\t \t /************Global**************/
\t \t body {
\t \t \t font: 100%/1.5 'Gill Sans', 'Droid Sans', 'Calibri', 'Lucida Grande', 'Trebuchet MS', 'Helvetica Neue', 'Arial', sans-serif;
\t \t \t color: #000;
\t \t \t background: #fff;
\t \t \t text-align: left;
\t \t }
\t \t a {
\t \t \t text-decoration: none;
\t \t \t color: #000;
\t \t }
\t \t a:hover, a:focus {
\t \t \t color: #000;
\t \t }
\t \t img {
\t \t \t max-width: 100%;
\t \t \t height: auto;
\t \t \t border: 0;
\t \t \t outline: 0;
\t \t }
\t \t h1 {
\t \t \t font: normal 14px/1em 'Gill Sans', 'Droid Sans', 'Calibri', 'Lucida Grande', 'Trebuchet MS', 'Helvetica Neue', 'Arial', sans-serif;
\t \t \t text-rendering: optimizeLegibility;
\t \t \t margin-bottom: 0;
\t \t \t text-shadow: 0 2px 0 #fff;
\t \t \t text-transform:lowercase;
\t \t }
\t \t h2 {
\t \t \t font-size: 1.2em;
\t \t \t font-weight: normal;
\t \t \t margin: 0;
\t \t \t text-rendering: optimizeLegibility;
\t \t \t text-shadow: 0 1px 0 #fff;
\t \t }
\t \t h3 {
\t \t \t margin: 0;
\t \t \t font-weight: normal;
\t \t \t text-rendering: optimizeLegibility;
\t \t \t text-shadow: 0 1px 0 #fff;
\t \t }
\t \t p {
\t \t \t margin: 0 0 1em;
\t \t }
\t \t label {
\t \t \t cursor: pointer;
\t \t \t display: inline-block;
\t \t \t background: #fff;
\t \t \t background: rgba(255,255,255,0.5);
\t \t \t -moz-box-sizing: border-box;
\t \t \t -webkit-box-sizing: border-box;
\t \t \t -ms-box-sizing: border-box;
\t \t \t -o-box-sizing: border-box;
\t \t \t box-sizing: border-box;
\t \t \t border: 1px solid #333;
\t \t \t -webkit-border-top-right-radius: 0.5em;
\t \t \t -webkit-border-bottom-right-radius: 0.5em;
\t \t \t -webkit-border-top-left-radius: 0.5em;
\t \t \t -webkit-border-bottom-left-radius: 0.5em;
\t \t \t -moz-border-radius-topright: 0.5em;
\t \t \t -moz-border-radius-bottomright: 0.5em;
\t \t \t -moz-border-radius-topleft: 0.5em;
\t \t \t -moz-border-radius-bottomleft: 0.5em;
\t \t \t border-top-right-radius: 0.5em;
\t \t \t border-bottom-right-radius: 0.5em;
\t \t \t border-top-left-radius: 0.5em;
\t \t \t border-bottom-left-radius: 0.5em;
\t \t \t padding: 0.4em 0.5em;
\t \t \t float: left;
\t \t \t width: 50%;
\t \t \t height: 2.4em;
\t \t \t text-transform: uppercase;
\t \t }
\t \t input,textarea {
\t \t \t display: inline-block;
\t \t \t font-size: 1em;
\t \t \t background: #fff;
\t \t \t background: rgba(255,255,255,0.5);
\t \t \t -webkit-appearance: none;
\t \t \t -moz-box-sizing: border-box;
\t \t \t -webkit-box-sizing: border-box;
\t \t \t -ms-box-sizing: border-box;
\t \t \t -o-box-sizing: border-box;
\t \t \t box-sizing: border-box;
\t \t \t border: 1px solid #333;
\t \t \t border-left: 0;
\t \t \t -webkit-border-radius: 0;
\t \t \t -webkit-border-top-right-radius: 0.5em;
\t \t \t -webkit-border-bottom-right-radius: 0.5em;
\t \t \t -moz-border-radius-topright: 0.5em;
\t \t \t -moz-border-radius-bottomright: 0.5em;
\t \t \t border-top-right-radius: 0.5em;
\t \t \t border-bottom-right-radius: 0.5em;
\t \t \t padding: 0.25em 0.6em;
\t \t \t width: 50%;
\t \t \t float: left;
\t \t \t height: 2.4em;
\t \t }
\t \t input[type=submit] {
\t \t \t cursor: pointer;
\t \t }
\t \t select {
\t \t \t font-size: 1em;
\t \t \t background: #fff;
\t \t \t background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAGCAYAAADOic7aAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTZBOTk1RjMxRjZCMTFFMUFDRjA5NUJCNzg2QTA1OEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTZBOTk1RjQxRjZCMTFFMUFDRjA5NUJCNzg2QTA1OEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxNkE5OTVGMTFGNkIxMUUxQUNGMDk1QkI3ODZBMDU4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxNkE5OTVGMjFGNkIxMUUxQUNGMDk1QkI3ODZBMDU4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtOZMNcAAABeSURBVHjaYmBgYJgGxP8J4JkMIMb//zgxCDAD8XY8hhwAYjZiDAIBfiC+hMWQh0AsClNEjEEgIA3ET5AM+QbEusgKiDWIAarxM9SgEHRJUgwCAT8grsMmgc8ggAADAGY/m1aWUowGAAAAAElFTkSuQmCC) no-repeat 95% 50% rgba(255,255,255,0.5);
\t \t \t -webkit-appearance: none;
\t \t \t -moz-box-sizing: border-box;
\t \t \t -webkit-box-sizing: border-box;
\t \t \t -ms-box-sizing: border-box;
\t \t \t -o-box-sizing: border-box;
\t \t \t box-sizing: border-box;
\t \t \t border: 1px solid #333;
\t \t \t border-left: 0;
\t \t \t padding: 0.25em 0.6em;
\t \t \t height: 2.4em;
\t \t \t width: 49.5%;
\t \t \t -webkit-border-radius: 0;
\t \t \t -webkit-border-top-right-radius: 0.5em;
\t \t \t -webkit-border-bottom-right-radius: 0.5em;
\t \t \t -webkit-border-top-left-radius: 0.5em;
\t \t \t -webkit-border-bottom-left-radius: 0.5em;
\t \t \t -moz-border-radius-topright: 0.5em;
\t \t \t -moz-border-radius-bottomright: 0.5em;
\t \t \t -moz-border-radius-topleft: 0.5em;
\t \t \t -moz-border-radius-bottomleft: 0.5em;
\t \t \t border-top-right-radius: 0.5em;
\t \t \t border-bottom-right-radius: 0.5em;
\t \t \t border-top-left-radius: 0.5em;
\t \t \t border-bottom-left-radius: 0.5em;
\t \t }
\t \t select:focus, input:focus {
\t \t \t background-color: #fff;
\t \t \t outline: none;
\t \t }
\t \t ::-webkit-input-placeholder {
\t \t color: #999;
\t \t }
\t \t :-moz-placeholder {
\t \t color: #999;
\t \t }
\t \t /************End Global**************/
\t \t /************Custom**************/
\t \t footer {
\t \t \t padding:10px;
\t \t \t /*background:#fff;*/
\t \t }
\t \t header {
\t \t \t position:fixed;
\t \t \t top:0;
\t \t \t right:0;
\t \t \t padding:10px;
\t \t }
\t \t /* Navigation Menu - Background */
\t \t .navigation {
\t \t /* critical sizing and position styles */
\t \t width: 100%;
\t \t height: 100%;
\t \t position: fixed;
\t \t top: 0;
\t \t right: 0;
\t \t bottom: 0;
\t \t left: 0;
\t \t z-index: 0;
\t \t overflow:scroll;
\t \t
\t \t /* non-critical appearance styles */
\t \t list-style: none;
\t \t background:#fff;
\t \t text-transform:lowercase;
\t \t font-size:14px;
\t \t }
\t \t /* Navigation Menu - List items */
\t \t .nav-item {
\t \t /* non-critical appearance styles */
\t \t width: 200px;
\t \t padding: 1em;
\t \t }
\t \t .nav-item a {
\t \t /* non-critical appearance styles */
\t \t display: block;
\t \t padding-bottom:0;
\t \t color: #111;
\t \t font-size: 1.2em;
\t \t text-decoration: none;
\t \t }
\t \t .nav-item a:hover {
\t \t color: #000;
\t \t }
\t \t .date {
\t \t \t display:block;
\t \t }
\t \t /* Site Wrapper - Everything that isn't navigation */
\t \t .site-wrap {
\t \t /* Critical position and size styles */
\t \t min-height: 100%;
\t \t min-width: 100%;
\t \t background-color: white; /* Needs a background or else the nav will show through */
\t \t position: relative;
\t \t top: 0;
\t \t bottom: 100%;
\t \t left: 0;
\t \t z-index: 1;
\t \t
\t \t /* non-critical apperance styles */
\t \t padding: 20px;
\t \t }
\t \t /* Nav Trigger */
\t \t .nav-trigger {
\t \t /* critical styles - hide the checkbox input */
\t \t position: absolute;
\t \t clip: rect(0, 0, 0, 0);
\t \t }
\t \t label[for="nav-trigger"] {
\t \t /* critical positioning styles */
\t \t position: fixed;
\t \t left: 15px; top: 15px;
\t \t z-index: 2;
\t \t
\t \t /* non-critical apperance styles */
\t \t height: 30px;
\t \t width: 30px;
\t \t cursor: pointer;
\t \t background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
\t \t background-size: contain;
\t \t }
\t \t /* Make the Magic Happen */
\t \t .nav-trigger + label, .site-wrap {
\t \t transition: left 0.2s;
\t \t }
\t \t .nav-trigger:checked + label {
\t \t left: 215px;
\t \t }
\t \t .nav-trigger:checked ~ .site-wrap,.nav-trigger:checked ~ footer {
\t \t left: 200px;
\t \t }
\t \t body {
\t \t \t /* Without this, the body has excess horizontal scroll when the menu is open */
\t \t overflow-x: hidden;
\t \t }
\t \t /* Additional non-critical styles */
\t \t h1, h3, p {
\t \t max-width: 600px;
\t \t /*margin: 0 auto 1em;*/
\t \t }
\t \t code {
\t \t \t padding: 2px;
\t \t \t background: #ddd;
\t \t }
\t \t a.request {
\t \t \t font-size: 14px;
\t \t \t padding-top:0;
\t \t }
\t \t footer p {
\t \t \t font-size:0.7em;
\t \t \t line-height:1.2em;
\t \t }
\t \t footer i.fa {
\t \t \t font-size:1.3em;
\t \t \t float:left;
\t \t \t margin-right:10px;
\t \t }
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
/* Menu Button */
.menu-button {
position: fixed;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 1em;
height: 1em;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
font-size: 0.75em;
border: none;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 50%;
background: #bdc3c7;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
z-index: 1001;
width: 300px;
height: 100%;
background: #373a47;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
-webkit-transform: translate3d(-320px,0,0);
transform: translate3d(-320px,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.menu,
.icon-list {
height: 100%;
}
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
.icon-list a span {
margin-left: 10px;
font-weight: 700;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list,
.show-menu .icon-list a {
}
.show-menu .icon-list a {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="menu-wrap">
\t \t <nav class="menu">
\t \t \t <ul class="navigation">
\t \t \t \t \t \t \t \t \t <li class="nav-item">
\t \t \t \t \t \t <a href="http://localhost:8888/index.php/news/2015/new-entry-test">New Entry Test</a>
\t \t \t \t \t </li>
\t \t \t \t \t \t \t </ul>
\t \t </nav>
\t \t <i class="close-button fa fa-chevron-left" id="close-button"></i>
\t </div>
\t <button class="menu-button" id="open-button">Open Menu</button>
\t <div class="site-wrap">
<p>hello</p>
\t </div>
因此，像'$（文件）.keyup（函數（E）{ 如果（e.keyCode == 27）{// Esc鍵keycode toggleMenu（）; } }）;'？ http://jsfiddle.net/k46bm0Lb/4/ – michaelmcgurk 2015-03-13 10:25:40
是的..看看，它的工作http://jsfiddle.net/gon250/k46bm0Lb/7/ @michaelmcgurk – gon250 2015-03-13 10:30:06
神奇！是否有可能編碼它，所以你點擊菜單和菜單消失？ – michaelmcgurk 2015-03-13 10:33:45