├── README.md ├── bubble.html ├── cornerbox.html ├── cornerbox_nested.html ├── cornermorph.html ├── css ├── demo.css ├── menu_bubble.css ├── menu_cornerbox.css ├── menu_cornerbox_nested.css ├── menu_cornermorph.css ├── menu_elastic.css ├── menu_sideslide.css ├── menu_topexpand.css ├── menu_topside.css ├── menu_wave.css └── normalize.css ├── elastic.html ├── fonts ├── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt └── font-awesome-4.2.0 │ ├── css │ └── font-awesome.min.css │ └── fonts │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ └── fontawesome-webfont.woff ├── img ├── related │ ├── PerspectiveNavigation.png │ └── sidebartransitions.png └── user1.png ├── index.html ├── js ├── classie.js ├── main.js ├── main2.js ├── main3.js ├── main4.js └── snap.svg-min.js ├── sideslide.html ├── topexpand.html └── wave.html /README.md: -------------------------------------------------------------------------------- 1 | Off-Canvas Menu Effects 2 | ========= 3 | 4 | Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations. 5 | 6 | [Article on Codrops](http://tympanus.net/codrops/?p=20100) 7 | 8 | [Demo](http://tympanus.net/Development/OffCanvasMenuEffects/) 9 | 10 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 11 | 12 | Read more here: [License](http://tympanus.net/codrops/licensing/) 13 | 14 | [© Codrops 2014](http://www.codrops.com) -------------------------------------------------------------------------------- /bubble.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Off-Canvas Menu Effects - Bubble 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 |

23 | 41 | 42 |

43 |

44 |

45 |

46 | Previous Demo 47 | Back to the Codrops Article 48 |

49 |

Off-Canvas Menu Effects Showing (off-canvas) menus stylishly

50 | 61 |

62 | 63 | 74 |

75 |

76 |

77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /cornerbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Off-Canvas Menu Effects - Corner Box 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |

22 | 34 | 35 |

36 |

37 |

38 |

39 | Previous Demo 40 | Back to the Codrops Article 41 |

42 |

Off-Canvas Menu Effects Showing (off-canvas) menus stylishly

43 | 54 |

55 | 56 | 67 |

68 |

69 |

70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /cornerbox_nested.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Off-Canvas Menu Effects - Nested Corner Box 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |

22 | 39 | 47 | 48 |

49 |

50 |

51 |

52 | Previous Demo 53 | Back to the Codrops Article 54 |

55 |

Off-Canvas Menu Effects Showing (off-canvas) menus stylishly

56 | 67 |

68 | 69 | 80 |

81 |

82 |

83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /cornermorph.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Off-Canvas Menu Effects - Corner Morph 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |

22 | 38 | 39 |

40 |

41 |

42 |

43 | Previous Demo 44 | Back to the Codrops Article 45 |

46 |

Off-Canvas Menu Effects Showing (off-canvas) menus stylishly

47 | 58 |

59 | 60 | 71 |

72 |

73 |

74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Raleway:200,400,700,800); 2 | @font-face { 3 | font-weight: normal; 4 | font-style: normal; 5 | font-family: 'codropsicons'; 6 | src:url('../fonts/codropsicons/codropsicons.eot'); 7 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 9 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 10 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 11 | } 12 | 13 | *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } 14 | .clearfix:before, .clearfix:after { content: ''; display: table; } 15 | .clearfix:after { clear: both; } 16 | 17 | body { 18 | background: #b4bad2; 19 | color: #fffce1; 20 | font-weight: 400; 21 | font-size: 1em; 22 | font-family: 'Raleway', Arial, sans-serif; 23 | } 24 | 25 | a { 26 | color: #4e4a46; 27 | text-decoration: none; 28 | outline: none; 29 | } 30 | 31 | a:hover, a:focus { 32 | color: #c94e50; 33 | outline: none; 34 | } 35 | 36 | button:focus { 37 | outline: none; 38 | } 39 | 40 | section { 41 | padding: 1em; 42 | text-align: center; 43 | } 44 | 45 | /* Header */ 46 | .codrops-header { 47 | margin: 0 auto; 48 | padding: 3em 2em; 49 | text-align: center; 50 | } 51 | 52 | .codrops-header h1 { 53 | margin: 0 auto; 54 | font-weight: 800; 55 | font-size: 3.75em; 56 | line-height: 1; 57 | } 58 | 59 | .codrops-header h1 span { 60 | display: block; 61 | font-size: 50%; 62 | font-weight: 400; 63 | padding-top: 0.325em; 64 | } 65 | 66 | .codrops-links { 67 | text-transform: uppercase; 68 | font-weight: 700; 69 | font-size: 0.69em; 70 | line-height: 2.2; 71 | padding: 1.61em 5em; 72 | } 73 | 74 | .codrops-links a { 75 | display: inline-block; 76 | padding: 0 1em; 77 | text-decoration: none; 78 | letter-spacing: 1px; 79 | } 80 | 81 | .codrops-icon:before { 82 | margin: 0 4px; 83 | text-transform: none; 84 | font-weight: normal; 85 | font-style: normal; 86 | font-variant: normal; 87 | font-family: 'codropsicons'; 88 | line-height: 1; 89 | speak: none; 90 | -webkit-font-smoothing: antialiased; 91 | } 92 | 93 | .codrops-icon-drop:before { 94 | content: "\e001"; 95 | } 96 | 97 | .codrops-icon-prev:before { 98 | content: "\e004"; 99 | } 100 | 101 | /* Demo Buttons Style */ 102 | .codrops-demos { 103 | font-size: 1em; 104 | max-width: 1200px; 105 | margin: 3em auto 5em; 106 | padding: 2em 10em 0; 107 | } 108 | 109 | .codrops-demos > a { 110 | display: inline-block; 111 | margin: 0.75em; 112 | padding: 1.35em 1.1em; 113 | width: 15em; 114 | background: #fffce1; 115 | outline: none; 116 | text-decoration: none; 117 | text-transform: uppercase; 118 | letter-spacing: 1px; 119 | font-weight: 800; 120 | border-radius: 20px/50px; 121 | } 122 | 123 | .codrops-demos > a.current-demo { 124 | background: #c94e50; 125 | color: #fffce1; 126 | } 127 | 128 | /* Related demos */ 129 | .related { 130 | margin-top: 5em; 131 | padding: 0 3em 5em; 132 | } 133 | 134 | .related p { 135 | font-size: 1.5em; 136 | font-weight: 700; 137 | } 138 | 139 | .related > a { 140 | display: inline-block; 141 | text-align: center; 142 | margin: 20px 10px; 143 | padding: 25px; 144 | border-radius: 35px/200px; 145 | background: #fffce1; 146 | max-width: 100%; 147 | } 148 | 149 | .related a img { 150 | max-width: 100%; 151 | opacity: 0.8; 152 | border-radius: 20px/100px; 153 | } 154 | 155 | .related a:hover img, 156 | .related a:active img { 157 | opacity: 1; 158 | } 159 | 160 | .related a h3 { 161 | margin: 0; 162 | padding: 0.5em 0.75em 0.3em; 163 | max-width: 300px; 164 | text-align: left; 165 | } 166 | 167 | @media screen and (max-width: 40em) { 168 | body { 169 | font-size: 80%; 170 | } 171 | .codrops-header h1 { 172 | font-size: 2.5em; 173 | } 174 | .codrops-demos { 175 | max-width: 900px; 176 | padding: 2em 2em 0; 177 | } 178 | .related > a { 179 | margin: 20px 0; 180 | } 181 | } 182 | 183 | @media screen and (max-width: 25em) { 184 | 185 | .codrops-icon { 186 | font-size: 250%; 187 | } 188 | 189 | .codrops-icon span { 190 | display: none; 191 | } 192 | 193 | } 194 | -------------------------------------------------------------------------------- /css/menu_bubble.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | .container, 4 | .content-wrap { 5 | overflow: hidden; 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | .container { 11 | background: #373a47; 12 | } 13 | 14 | .menu-wrap a { 15 | color: #b8b7ad; 16 | } 17 | 18 | .menu-wrap a:hover, 19 | .menu-wrap a:focus { 20 | color: #c94e50; 21 | } 22 | 23 | .content-wrap { 24 | overflow-y: scroll; 25 | -webkit-overflow-scrolling: touch; 26 | -webkit-transition: -webkit-transform 0.4s; 27 | transition: transform 0.4s; 28 | } 29 | 30 | .content { 31 | position: relative; 32 | background: #b4bad2; 33 | } 34 | 35 | .content::before { 36 | position: absolute; 37 | top: 0; 38 | left: 0; 39 | z-index: 10; 40 | width: 100%; 41 | height: 100%; 42 | background: rgba(0,0,0,0.3); 43 | content: ''; 44 | opacity: 0; 45 | -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s; 46 | transition: opacity 0.4s, transform 0s 0.4s; 47 | -webkit-transform: translate3d(100%,0,0); 48 | transform: translate3d(100%,0,0); 49 | } 50 | 51 | /* Menu Button */ 52 | .menu-button { 53 | position: fixed; 54 | z-index: 1000; 55 | margin: 1em; 56 | padding: 0; 57 | width: 2.5em; 58 | height: 2.25em; 59 | border: none; 60 | text-indent: 2.5em; 61 | font-size: 1.5em; 62 | color: transparent; 63 | background: transparent; 64 | } 65 | 66 | .menu-button::before { 67 | position: absolute; 68 | top: 0.5em; 69 | right: 0.5em; 70 | bottom: 0.5em; 71 | left: 0.5em; 72 | background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%); 73 | content: ''; 74 | } 75 | 76 | .menu-button:hover { 77 | opacity: 0.6; 78 | } 79 | 80 | /* Close Button */ 81 | .close-button { 82 | width: 16px; 83 | height: 16px; 84 | position: absolute; 85 | right: 1em; 86 | top: 1em; 87 | overflow: hidden; 88 | text-indent: 16px; 89 | border: none; 90 | z-index: 1001; 91 | background: transparent; 92 | color: transparent; 93 | } 94 | 95 | .close-button::before, 96 | .close-button::after { 97 | content: ''; 98 | position: absolute; 99 | width: 2px; 100 | height: 100%; 101 | top: 0; 102 | left: 50%; 103 | background: #888; 104 | } 105 | 106 | .close-button::before { 107 | -webkit-transform: rotate(45deg); 108 | transform: rotate(45deg); 109 | } 110 | 111 | .close-button::after { 112 | -webkit-transform: rotate(-45deg); 113 | transform: rotate(-45deg); 114 | } 115 | 116 | /* Menu */ 117 | .menu-wrap { 118 | position: absolute; 119 | z-index: 1001; 120 | width: 280px; 121 | height: 100%; 122 | font-size: 1.15em; 123 | -webkit-transform: translate3d(-280px,0,0); 124 | transform: translate3d(-280px,0,0); 125 | -webkit-transition: -webkit-transform 0.4s; 126 | transition: transform 0.4s; 127 | } 128 | 129 | .menu { 130 | position: relative; 131 | z-index: 1000; 132 | padding: 3em 1em 0; 133 | } 134 | 135 | .menu, 136 | .close-button { 137 | opacity: 0; 138 | -webkit-transform: translate3d(-160px,0,0); 139 | transform: translate3d(-160px,0,0); 140 | -webkit-transition: opacity 0s 0.3s, -webkit-transform 0s 0.3s; 141 | transition: opacity 0s 0.3s, transform 0s 0.3s; 142 | -webkit-transition-timing-function: cubic-bezier(.17,.67,.1,1.27); 143 | transition-timing-function: cubic-bezier(.17,.67,.1,1.27); 144 | } 145 | 146 | .icon-list a { 147 | display: block; 148 | padding: 0.8em; 149 | } 150 | 151 | .icon-list i { 152 | font-size: 1.5em; 153 | vertical-align: middle; 154 | color: #282a35; 155 | } 156 | 157 | .icon-list a span { 158 | margin-left: 10px; 159 | font-size: 0.85em; 160 | font-weight: 700; 161 | vertical-align: middle; 162 | } 163 | 164 | /* Morph Shape */ 165 | .morph-shape { 166 | position: absolute; 167 | width: 100%; 168 | height: 100%; 169 | top: 0; 170 | right: 0; 171 | fill: #373a47; 172 | } 173 | 174 | /* Shown menu */ 175 | .show-menu .menu-wrap, 176 | .show-menu .content::before { 177 | -webkit-transition-delay: 0s; 178 | transition-delay: 0s; 179 | } 180 | 181 | .show-menu .menu-wrap, 182 | .show-menu .menu, 183 | .show-menu .close-button, 184 | .show-menu .morph-shape, 185 | .show-menu .content::before { 186 | -webkit-transform: translate3d(0,0,0); 187 | transform: translate3d(0,0,0); 188 | } 189 | 190 | .show-menu .menu, 191 | .show-menu .close-button { 192 | opacity: 1; 193 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 194 | transition: opacity 0.3s, transform 0.3s; 195 | -webkit-transition-delay: 0.4s; 196 | transition-delay: 0.4s; 197 | } 198 | 199 | .show-menu .content::before { 200 | opacity: 1; 201 | -webkit-transition: opacity 0.4s; 202 | transition: opacity 0.4s; 203 | } -------------------------------------------------------------------------------- /css/menu_cornerbox.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | .container, 4 | .content-wrap { 5 | overflow: hidden; 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | .container { 11 | background: #373a47; 12 | } 13 | 14 | .content-wrap { 15 | overflow-y: scroll; 16 | -webkit-overflow-scrolling: touch; 17 | -webkit-transition: -webkit-transform 0.3s; 18 | transition: transform 0.3s; 19 | } 20 | 21 | .content { 22 | position: relative; 23 | background: #b4bad2; 24 | } 25 | 26 | /* Overlay */ 27 | .content::before { 28 | position: absolute; 29 | top: 0; 30 | left: 0; 31 | z-index: 10; 32 | width: 100%; 33 | height: 100%; 34 | background: rgba(0,0,0,0.3); 35 | content: ''; 36 | opacity: 0; 37 | -webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s; 38 | transition: opacity 0.3s, transform 0s 0.3s; 39 | -webkit-transform: translate3d(100%,0,0); 40 | transform: translate3d(100%,0,0); 41 | } 42 | 43 | /* Menu Button */ 44 | .menu-button { 45 | position: fixed; 46 | z-index: 1000; 47 | margin: 1em; 48 | padding: 0; 49 | width: 2.5em; 50 | height: 2.25em; 51 | border: none; 52 | text-indent: 2.5em; 53 | font-size: 1.5em; 54 | color: transparent; 55 | background: transparent; 56 | } 57 | 58 | .menu-button::before { 59 | position: absolute; 60 | top: 0.5em; 61 | right: 0.5em; 62 | bottom: 0.5em; 63 | left: 0.5em; 64 | background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%); 65 | content: ''; 66 | } 67 | 68 | .menu-button:hover { 69 | opacity: 0.6; 70 | } 71 | 72 | /* Close Button */ 73 | .close-button { 74 | width: 1em; 75 | height: 1em; 76 | position: absolute; 77 | right: 1em; 78 | top: 1em; 79 | overflow: hidden; 80 | text-indent: 1em; 81 | border: none; 82 | background: transparent; 83 | color: transparent; 84 | } 85 | 86 | .close-button::before, 87 | .close-button::after { 88 | content: ''; 89 | position: absolute; 90 | width: 2px; 91 | height: 100%; 92 | top: 0; 93 | left: 50%; 94 | background: #b8b7ad; 95 | } 96 | 97 | .close-button::before { 98 | -webkit-transform: rotate(45deg); 99 | transform: rotate(45deg); 100 | } 101 | 102 | .close-button::after { 103 | -webkit-transform: rotate(-45deg); 104 | transform: rotate(-45deg); 105 | } 106 | 107 | /* Menu */ 108 | .menu-wrap { 109 | position: absolute; 110 | z-index: 1001; 111 | width: 320px; 112 | height: 320px; 113 | background: #fdfdf8; 114 | color: #373a47; 115 | padding: 2em; 116 | -webkit-transform: translate3d(-320px,-320px,0); 117 | transform: translate3d(-320px,-320px,0); 118 | -webkit-transition: -webkit-transform 0.3s; 119 | transition: transform 0.3s; 120 | } 121 | 122 | .profile { 123 | display: inline-block; 124 | line-height: 42px; 125 | margin-bottom: 1em; 126 | font-weight: 700; 127 | } 128 | 129 | .profile img { 130 | float: left; 131 | border-radius: 50%; 132 | margin-right: 10px; 133 | } 134 | 135 | .icon-list a { 136 | display: block; 137 | color: #b8b7ad; 138 | font-weight: 700; 139 | padding: 0.8em 0.55em; 140 | } 141 | 142 | .icon-list a:hover, 143 | .icon-list a:focus { 144 | color: #c94e50; 145 | } 146 | 147 | .icon-list a i { 148 | opacity: 0.5; 149 | color: #c94e50; 150 | } 151 | 152 | .icon-list a span { 153 | margin-left: 10px; 154 | } 155 | 156 | /* Shown menu */ 157 | .show-menu .menu-wrap { 158 | -webkit-transform: translate3d(0,0,0); 159 | transform: translate3d(0,0,0); 160 | } 161 | 162 | .show-menu .content-wrap { 163 | -webkit-transform: translate3d(80px,80px,0); 164 | transform: translate3d(80px,80px,0); 165 | } 166 | 167 | .show-menu .content::before { 168 | opacity: 1; 169 | -webkit-transition: opacity 0.3s; 170 | transition: opacity 0.3s; 171 | -webkit-transform: translate3d(0,0,0); 172 | transform: translate3d(0,0,0); 173 | } -------------------------------------------------------------------------------- /css/menu_cornerbox_nested.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | .container, 4 | .content-wrap { 5 | overflow: hidden; 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | .container { 11 | background: #373a47; 12 | } 13 | 14 | .menu-wrap { 15 | color: #64697d; 16 | } 17 | 18 | .menu-wrap a { 19 | color: #b8b7ad; 20 | } 21 | 22 | .menu-wrap a:hover, 23 | .menu-wrap a:focus { 24 | color: #c94e50; 25 | } 26 | 27 | .content-wrap { 28 | overflow-y: scroll; 29 | -webkit-overflow-scrolling: touch; 30 | -webkit-transition: -webkit-transform 0.5s; 31 | transition: transform 0.5s; 32 | } 33 | 34 | .content { 35 | position: relative; 36 | background: #b4bad2; 37 | } 38 | 39 | .content::before, 40 | .menu-wrap::before { 41 | position: absolute; 42 | top: 0; 43 | left: 0; 44 | z-index: 10; 45 | width: 100%; 46 | height: 100%; 47 | background: rgba(0,0,0,0.5); 48 | content: ''; 49 | opacity: 0; 50 | -webkit-transition: opacity 0.5s, -webkit-transform 0s 0.5s; 51 | transition: opacity 0.5s, transform 0s 0.5s; 52 | -webkit-transform: translate3d(100%,0,0); 53 | transform: translate3d(100%,0,0); 54 | } 55 | 56 | /* Menu Button */ 57 | .menu-button { 58 | position: fixed; 59 | z-index: 1000; 60 | margin: 0.5em; 61 | padding: 0; 62 | border: none; 63 | font-size: 3em; 64 | color: #373a47; 65 | background: transparent; 66 | } 67 | 68 | .menu-button span { 69 | display: none; 70 | } 71 | 72 | .menu-button:hover, 73 | .close-button:hover { 74 | opacity: 0.6; 75 | } 76 | 77 | /* Close Button */ 78 | .close-button { 79 | width: 1em; 80 | height: 1em; 81 | position: absolute; 82 | right: 1em; 83 | top: 1em; 84 | overflow: hidden; 85 | text-indent: 1em; 86 | border: none; 87 | background: transparent; 88 | color: transparent; 89 | } 90 | 91 | .close-button::before, 92 | .close-button::after { 93 | content: ''; 94 | position: absolute; 95 | width: 2px; 96 | height: 100%; 97 | top: 0; 98 | left: 50%; 99 | background: #bdc3c7; 100 | } 101 | 102 | .close-button::before { 103 | -webkit-transform: rotate(45deg); 104 | transform: rotate(45deg); 105 | } 106 | 107 | .close-button::after { 108 | -webkit-transform: rotate(-45deg); 109 | transform: rotate(-45deg); 110 | } 111 | 112 | /* Menu */ 113 | .menu-wrap { 114 | position: absolute; 115 | z-index: 1001; 116 | width: 50vw; 117 | height: 50vw; 118 | max-height: 80%; 119 | min-height: 360px; 120 | min-width: 320px; 121 | background: #fff; 122 | padding: 3em; 123 | overflow: hidden; 124 | -webkit-transform: translate3d(-100%,-100%,0); 125 | transform: translate3d(-100%,-100%,0); 126 | -webkit-transition: -webkit-transform 0.5s; 127 | transition: transform 0.5s; 128 | } 129 | 130 | .menu-wrap[data-level="2"] { 131 | height: 30vw; 132 | } 133 | 134 | .menu { 135 | height: 100%; 136 | } 137 | 138 | .menu h2 { 139 | margin: 0 0 0.5em 0; 140 | } 141 | 142 | .menu h2 span { 143 | padding-right: 1em; 144 | } 145 | 146 | .menu h2 span:last-child { 147 | font-size: 0.5em; 148 | padding: 0.25em 0.5em; 149 | display: inline-block; 150 | vertical-align: middle; 151 | color: rgb(218,73,97); 152 | border: 2px solid black; 153 | border-color: initial; 154 | } 155 | 156 | /* Calendario style http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-plugin/ */ 157 | .fc-calendar-container { 158 | height: 80%; 159 | height: calc(100% - 4.5em); 160 | margin-top: 2em; 161 | width: 100%; 162 | position: relative; 163 | } 164 | 165 | .fc-calendar { 166 | width: 100%; 167 | height: 100%; 168 | } 169 | 170 | .fc-calendar .fc-head { 171 | height: 35px; 172 | text-transform: uppercase; 173 | line-height: 30px; 174 | letter-spacing: 1px; 175 | font-size: 0.75em; 176 | } 177 | 178 | .fc-calendar .fc-row > div, 179 | .fc-calendar .fc-head > div { 180 | float: left; 181 | height: 100%; 182 | width: 14%; 183 | position: relative; 184 | text-align: center; 185 | font-weight: bold; 186 | } 187 | 188 | .fc-calendar .fc-head > div { 189 | border-bottom: 1px solid #000; 190 | border-bottom-color: initial; 191 | } 192 | 193 | .fc-calendar .fc-body, 194 | .content-edit { 195 | position: relative; 196 | width: 100%; 197 | height: 100%; 198 | height: calc(100% - 35px); 199 | } 200 | 201 | .content-edit { 202 | height: calc(100% - 80px); 203 | border: 1px solid #000; 204 | border-color: initial; 205 | padding: 2em; 206 | } 207 | 208 | .content-edit:focus { 209 | outline: none; 210 | } 211 | 212 | .default-button { 213 | border: none; 214 | color: #fff; 215 | background: #64697d; 216 | padding: 1em 1.25em; 217 | font-weight: 700; 218 | font-size: 0.75em; 219 | text-transform: uppercase; 220 | letter-spacing: 1px; 221 | margin-top: 0.75em; 222 | float: right; 223 | } 224 | 225 | .fc-calendar .fc-row { 226 | width: 100%; 227 | } 228 | 229 | .fc-five-rows .fc-row { 230 | height: 20%; 231 | } 232 | 233 | .fc-calendar .fc-row > div { 234 | cursor: pointer; 235 | padding: 4px; 236 | overflow: hidden; 237 | position: relative; 238 | } 239 | 240 | .fc-calendar .fc-row > div:not(:empty):hover { 241 | background: rgba(180,186,210,0.3); 242 | } 243 | 244 | .fc-calendar .fc-row > div > span.fc-date { 245 | position: absolute; 246 | width: 30px; 247 | height: 20px; 248 | font-size: 20px; 249 | line-height: 20px; 250 | color: #686a6e; 251 | bottom: 5px; 252 | right: 5px; 253 | top: 50%; 254 | left: 50%; 255 | text-align: center; 256 | margin: -10px 0 0 -15px; 257 | } 258 | 259 | .fc-calendar .fc-row > div > span.fc-weekday { 260 | display: none; 261 | } 262 | 263 | /* Shown menu */ 264 | .show-menu .menu-wrap[data-level="1"], 265 | .show-submenu .menu-wrap[data-level="2"], 266 | .show-menu .content::before, 267 | .show-submenu .menu-wrap[data-level="1"]::before { 268 | -webkit-transform: translate3d(0,0,0); 269 | transform: translate3d(0,0,0); 270 | } 271 | 272 | .show-submenu .menu-wrap[data-level="1"], 273 | .show-menu .content-wrap { 274 | -webkit-transform: translate3d(40px,40px,0); 275 | transform: translate3d(40px,40px,0); 276 | } 277 | 278 | .show-submenu .content-wrap { 279 | -webkit-transform: translate3d(120px,120px,0); 280 | transform: translate3d(120px,120px,0); 281 | } 282 | 283 | .show-menu .content::before, 284 | .show-submenu .menu-wrap[data-level="1"]::before { 285 | opacity: 0.5; 286 | -webkit-transition: opacity 0.5s; 287 | transition: opacity 0.5s; 288 | } 289 | 290 | .show-submenu .content::before { 291 | opacity: 1; 292 | } -------------------------------------------------------------------------------- /css/menu_cornermorph.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | .container, 4 | .content-wrap { 5 | overflow: hidden; 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | .container { 11 | background: #373a47; 12 | } 13 | 14 | .content-wrap { 15 | overflow-y: scroll; 16 | -webkit-overflow-scrolling: touch; 17 | } 18 | 19 | .content { 20 | position: relative; 21 | background: #b4bad2; 22 | } 23 | 24 | .content::before { 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | z-index: 10; 29 | width: 100%; 30 | height: 100%; 31 | background: rgba(0,0,0,0.3); 32 | content: ''; 33 | opacity: 0; 34 | -webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s; 35 | transition: opacity 0.3s, transform 0s 0.3s; 36 | -webkit-transform: translate3d(100%,0,0); 37 | transform: translate3d(100%,0,0); 38 | } 39 | 40 | /* Menu Button */ 41 | .menu-button { 42 | position: fixed; 43 | bottom: 0; 44 | z-index: 1000; 45 | margin: 1em; 46 | padding: 0; 47 | width: 2.5em; 48 | height: 2.25em; 49 | border: none; 50 | font-size: 1.5em; 51 | color: #373a47; 52 | background: transparent; 53 | } 54 | 55 | .menu-button span { 56 | display: none; 57 | } 58 | 59 | .menu-button:hover { 60 | opacity: 0.6; 61 | } 62 | 63 | /* Menu */ 64 | .menu-wrap { 65 | position: fixed; 66 | z-index: 999; 67 | background: #ebedf4; 68 | -webkit-transition: width 0.3s, height 0.3s; 69 | transition: width 0.3s, height 0.3s; 70 | width: 0; 71 | height: 0; 72 | font-size: 1.5em; 73 | bottom: 1em; 74 | left: 1em; 75 | -webkit-transform-origin: 0% 100%; 76 | transform-origin: 0% 100%; 77 | } 78 | 79 | @media screen and (max-width: 50em) { 80 | .menu-button { 81 | margin: 0.25em; 82 | } 83 | .menu-wrap { 84 | bottom: 0.25em; 85 | left: 0.25em; 86 | } 87 | } 88 | 89 | .menu { 90 | height: 100%; 91 | opacity: 0; 92 | font-size: 0.65em; 93 | color: #64697d; 94 | text-align: right; 95 | } 96 | 97 | .profile { 98 | display: inline-block; 99 | line-height: 42px; 100 | font-weight: 700; 101 | padding: 1em; 102 | } 103 | 104 | .profile img { 105 | float: right; 106 | border-radius: 50%; 107 | margin-left: 10px; 108 | } 109 | 110 | .link-list { 111 | padding: 1.35em 0; 112 | margin: 0 0.75em; 113 | border-bottom: 3px solid rgba(125,129,148,0.2); 114 | border-top: 3px solid rgba(125,129,148,0.2); 115 | } 116 | 117 | .link-list a { 118 | display: block; 119 | margin: 0.25em 0; 120 | color: #7d8194; 121 | padding: 0.5em 1.5em; 122 | } 123 | 124 | .link-list a:hover, 125 | .link-list a:focus { 126 | color: #64697d; 127 | } 128 | 129 | .link-list a span { 130 | margin-left: 10px; 131 | font-weight: 700; 132 | vertical-align: middle; 133 | } 134 | 135 | .icon-list { 136 | position: absolute; 137 | right: 1em; 138 | bottom: 0.9em; 139 | } 140 | 141 | .icon-list a { 142 | font-size: 1.5em; 143 | margin-left: 0.25em; 144 | color: rgba(125,129,148,0.5); 145 | } 146 | 147 | /* Shown menu */ 148 | .show-menu .content::before { 149 | opacity: 1; 150 | -webkit-transition: opacity 0.3s; 151 | transition: opacity 0.3s; 152 | -webkit-transform: translate3d(0,0,0); 153 | transform: translate3d(0,0,0); 154 | } 155 | 156 | .show-menu .menu-wrap { 157 | width: 280px; 158 | height: 340px; 159 | -webkit-animation: anim-jelly 0.8s linear forwards; 160 | animation: anim-jelly 0.8s linear forwards; 161 | } 162 | 163 | .show-menu .menu { 164 | opacity: 1; 165 | -webkit-transition: opacity 0.3s 0.3s; 166 | transition: opacity 0.3s 0.3s; 167 | } 168 | 169 | /* Generated with Bounce.js. Edit at http://goo.gl/PJ93gs */ 170 | 171 | @-webkit-keyframes anim-jelly { 172 | 0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 173 | 3.333333% { -webkit-transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 174 | 6.666667% { -webkit-transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 175 | 10% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 176 | 13.333333% { -webkit-transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 177 | 16.666667% { -webkit-transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 178 | 20% { -webkit-transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 179 | 23.333333% { -webkit-transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 180 | 26.666667% { -webkit-transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 181 | 30% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 182 | 33.333333% { -webkit-transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 183 | 36.666667% { -webkit-transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 184 | 40% { -webkit-transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 185 | 43.333333% { -webkit-transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 186 | 46.666667% { -webkit-transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 187 | 50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 188 | 53.333333% { -webkit-transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 189 | 56.666667% { -webkit-transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 190 | 60% { -webkit-transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 191 | 63.333333% { -webkit-transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 192 | 66.666667% { -webkit-transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 193 | 70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 194 | 73.333333% { -webkit-transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 195 | 76.666667% { -webkit-transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 196 | 80% { -webkit-transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 197 | 83.333333% { -webkit-transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 198 | 86.666667% { -webkit-transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 199 | 90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 200 | 93.333333% { -webkit-transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 201 | 96.666667% { -webkit-transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 202 | 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);} 203 | } 204 | 205 | @keyframes anim-jelly { 206 | 0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 207 | 3.333333% { -webkit-transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 208 | 6.666667% { -webkit-transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 209 | 10% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 210 | 13.333333% { -webkit-transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 211 | 16.666667% { -webkit-transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 212 | 20% { -webkit-transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 213 | 23.333333% { -webkit-transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 214 | 26.666667% { -webkit-transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 215 | 30% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 216 | 33.333333% { -webkit-transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 217 | 36.666667% { -webkit-transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 218 | 40% { -webkit-transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 219 | 43.333333% { -webkit-transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 220 | 46.666667% { -webkit-transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 221 | 50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 222 | 53.333333% { -webkit-transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 223 | 56.666667% { -webkit-transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 224 | 60% { -webkit-transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 225 | 63.333333% { -webkit-transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 226 | 66.666667% { -webkit-transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 227 | 70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 228 | 73.333333% { -webkit-transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 229 | 76.666667% { -webkit-transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 230 | 80% { -webkit-transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 231 | 83.333333% { -webkit-transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 232 | 86.666667% { -webkit-transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 233 | 90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 234 | 93.333333% { -webkit-transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 235 | 96.666667% { -webkit-transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 236 | 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);} 237 | } 238 | 239 | -------------------------------------------------------------------------------- /css/menu_elastic.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | .container, 4 | .content-wrap { 5 | overflow: hidden; 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | .container { 11 | background: #373a47; 12 | } 13 | 14 | .menu-wrap a { 15 | color: #b8b7ad; 16 | } 17 | 18 | .menu-wrap a:hover, 19 | .menu-wrap a:focus { 20 | color: #c94e50; 21 | } 22 | 23 | .content-wrap { 24 | overflow-y: scroll; 25 | -webkit-overflow-scrolling: touch; 26 | -webkit-transition: -webkit-transform 0.3s; 27 | transition: transform 0.3s; 28 | } 29 | 30 | .content { 31 | position: relative; 32 | background: #b4bad2; 33 | } 34 | 35 | .content::before { 36 | position: absolute; 37 | top: 0; 38 | left: 0; 39 | z-index: 10; 40 | width: 100%; 41 | height: 100%; 42 | background: rgba(0,0,0,0.3); 43 | content: ''; 44 | opacity: 0; 45 | -webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s; 46 | transition: opacity 0.3s, transform 0s 0.3s; 47 | -webkit-transform: translate3d(100%,0,0); 48 | transform: translate3d(100%,0,0); 49 | } 50 | 51 | /* Menu Button */ 52 | .menu-button { 53 | position: fixed; 54 | z-index: 1000; 55 | margin: 1em; 56 | padding: 0; 57 | width: 2.5em; 58 | height: 2.25em; 59 | border: none; 60 | text-indent: 2.5em; 61 | font-size: 1.5em; 62 | color: transparent; 63 | background: transparent; 64 | } 65 | 66 | .menu-button::before { 67 | position: absolute; 68 | top: 0.5em; 69 | right: 0.5em; 70 | bottom: 0.5em; 71 | left: 0.5em; 72 | background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%); 73 | content: ''; 74 | } 75 | 76 | .menu-button:hover { 77 | opacity: 0.6; 78 | } 79 | 80 | /* Close Button */ 81 | .close-button { 82 | width: 16px; 83 | height: 16px; 84 | position: absolute; 85 | right: 1em; 86 | top: 1em; 87 | overflow: hidden; 88 | text-indent: 16px; 89 | border: none; 90 | z-index: 1001; 91 | background: transparent; 92 | color: transparent; 93 | } 94 | 95 | .close-button::before, 96 | .close-button::after { 97 | content: ''; 98 | position: absolute; 99 | width: 2px; 100 | height: 100%; 101 | top: 0; 102 | left: 50%; 103 | background: #95a5a6; 104 | } 105 | 106 | .close-button::before { 107 | -webkit-transform: rotate(45deg); 108 | transform: rotate(45deg); 109 | } 110 | 111 | .close-button::after { 112 | -webkit-transform: rotate(-45deg); 113 | transform: rotate(-45deg); 114 | } 115 | 116 | /* Menu */ 117 | .menu-wrap { 118 | position: absolute; 119 | z-index: 1001; 120 | width: 300px; 121 | height: 100%; 122 | font-size: 1.15em; 123 | -webkit-transform: translate3d(-300px,0,0); 124 | transform: translate3d(-300px,0,0); 125 | -webkit-transition: -webkit-transform 0.3s; 126 | transition: transform 0.3s; 127 | } 128 | 129 | .menu { 130 | background: #373a47; 131 | width: calc(100% - 120px); 132 | height: 100%; 133 | padding: 2em 1em; 134 | } 135 | 136 | .icon-list { 137 | width: 280px; 138 | } 139 | 140 | .icon-list a { 141 | display: block; 142 | padding: 0.8em; 143 | } 144 | 145 | .icon-list a i { 146 | opacity: 0.5; 147 | } 148 | 149 | .icon-list a span { 150 | margin-left: 10px; 151 | text-transform: uppercase; 152 | font-weight: 700; 153 | letter-spacing: 1px; 154 | font-size: 0.75em; 155 | } 156 | 157 | /* Morph Shape */ 158 | .morph-shape { 159 | position: absolute; 160 | width: 120px; 161 | height: 100%; 162 | top: 0; 163 | right: 0; 164 | fill: #373a47; 165 | z-index: 1000; 166 | } 167 | 168 | /* Shown menu */ 169 | .show-menu .menu-wrap { 170 | -webkit-transform: translate3d(0,0,0); 171 | transform: translate3d(0,0,0); 172 | } 173 | 174 | .show-menu .content-wrap { 175 | -webkit-transition-delay: 0.1s; 176 | transition-delay: 0.1s; 177 | -webkit-transform: translate3d(100px,0,0); 178 | transform: translate3d(100px,0,0); 179 | } 180 | 181 | .show-menu .content::before { 182 | opacity: 1; 183 | -webkit-transition: opacity 0.3s; 184 | transition: opacity 0.3s; 185 | -webkit-transform: translate3d(0,0,0); 186 | transform: translate3d(0,0,0); 187 | } -------------------------------------------------------------------------------- /css/menu_sideslide.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | .container, 4 | .content-wrap { 5 | overflow: hidden; 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | .container { 11 | background: #373a47; 12 | } 13 | 14 | .menu-wrap a { 15 | color: #b8b7ad; 16 | } 17 | 18 | .menu-wrap a:hover, 19 | .menu-wrap a:focus { 20 | color: #c94e50; 21 | } 22 | 23 | .content-wrap { 24 | overflow-y: scroll; 25 | -webkit-overflow-scrolling: touch; 26 | } 27 | 28 | .content { 29 | position: relative; 30 | background: #b4bad2; 31 | } 32 | 33 | .content::before { 34 | position: absolute; 35 | top: 0; 36 | left: 0; 37 | z-index: 10; 38 | width: 100%; 39 | height: 100%; 40 | background: rgba(0,0,0,0.3); 41 | content: ''; 42 | opacity: 0; 43 | -webkit-transform: translate3d(100%,0,0); 44 | transform: translate3d(100%,0,0); 45 | -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s; 46 | transition: opacity 0.4s, transform 0s 0.4s; 47 | -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 48 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 49 | } 50 | 51 | /* Menu Button */ 52 | .menu-button { 53 | position: fixed; 54 | z-index: 1000; 55 | margin: 1em; 56 | padding: 0; 57 | width: 2.5em; 58 | height: 2.25em; 59 | border: none; 60 | text-indent: 2.5em; 61 | font-size: 1.5em; 62 | color: transparent; 63 | background: transparent; 64 | } 65 | 66 | .menu-button::before { 67 | position: absolute; 68 | top: 0.5em; 69 | right: 0.5em; 70 | bottom: 0.5em; 71 | left: 0.5em; 72 | background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%); 73 | content: ''; 74 | } 75 | 76 | .menu-button:hover { 77 | opacity: 0.6; 78 | } 79 | 80 | /* Close Button */ 81 | .close-button { 82 | width: 1em; 83 | height: 1em; 84 | position: absolute; 85 | right: 1em; 86 | top: 1em; 87 | overflow: hidden; 88 | text-indent: 1em; 89 | font-size: 0.75em; 90 | border: none; 91 | background: transparent; 92 | color: transparent; 93 | } 94 | 95 | .close-button::before, 96 | .close-button::after { 97 | content: ''; 98 | position: absolute; 99 | width: 3px; 100 | height: 100%; 101 | top: 0; 102 | left: 50%; 103 | background: #bdc3c7; 104 | } 105 | 106 | .close-button::before { 107 | -webkit-transform: rotate(45deg); 108 | transform: rotate(45deg); 109 | } 110 | 111 | .close-button::after { 112 | -webkit-transform: rotate(-45deg); 113 | transform: rotate(-45deg); 114 | } 115 | 116 | /* Menu */ 117 | .menu-wrap { 118 | position: absolute; 119 | z-index: 1001; 120 | width: 300px; 121 | height: 100%; 122 | background: #373a47; 123 | padding: 2.5em 1.5em 0; 124 | font-size: 1.15em; 125 | -webkit-transform: translate3d(-320px,0,0); 126 | transform: translate3d(-320px,0,0); 127 | -webkit-transition: -webkit-transform 0.4s; 128 | transition: transform 0.4s; 129 | -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 130 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 131 | } 132 | 133 | .menu, 134 | .icon-list { 135 | height: 100%; 136 | } 137 | 138 | .icon-list { 139 | -webkit-transform: translate3d(0,100%,0); 140 | transform: translate3d(0,100%,0); 141 | } 142 | 143 | .icon-list a { 144 | display: block; 145 | padding: 0.8em; 146 | -webkit-transform: translate3d(0,500px,0); 147 | transform: translate3d(0,500px,0); 148 | } 149 | 150 | .icon-list, 151 | .icon-list a { 152 | -webkit-transition: -webkit-transform 0s 0.4s; 153 | transition: transform 0s 0.4s; 154 | -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 155 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 156 | } 157 | 158 | .icon-list a:nth-child(2) { 159 | -webkit-transform: translate3d(0,1000px,0); 160 | transform: translate3d(0,1000px,0); 161 | } 162 | 163 | .icon-list a:nth-child(3) { 164 | -webkit-transform: translate3d(0,1500px,0); 165 | transform: translate3d(0,1500px,0); 166 | } 167 | 168 | .icon-list a:nth-child(4) { 169 | -webkit-transform: translate3d(0,2000px,0); 170 | transform: translate3d(0,2000px,0); 171 | } 172 | 173 | .icon-list a:nth-child(5) { 174 | -webkit-transform: translate3d(0,2500px,0); 175 | transform: translate3d(0,2500px,0); 176 | } 177 | 178 | .icon-list a:nth-child(6) { 179 | -webkit-transform: translate3d(0,3000px,0); 180 | transform: translate3d(0,3000px,0); 181 | } 182 | 183 | .icon-list a span { 184 | margin-left: 10px; 185 | font-weight: 700; 186 | } 187 | 188 | /* Shown menu */ 189 | .show-menu .menu-wrap { 190 | -webkit-transform: translate3d(0,0,0); 191 | transform: translate3d(0,0,0); 192 | -webkit-transition: -webkit-transform 0.8s; 193 | transition: transform 0.8s; 194 | -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 195 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 196 | } 197 | 198 | .show-menu .icon-list, 199 | .show-menu .icon-list a { 200 | -webkit-transform: translate3d(0,0,0); 201 | transform: translate3d(0,0,0); 202 | -webkit-transition: -webkit-transform 0.8s; 203 | transition: transform 0.8s; 204 | -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 205 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 206 | } 207 | 208 | .show-menu .icon-list a { 209 | -webkit-transition-duration: 0.9s; 210 | transition-duration: 0.9s; 211 | } 212 | 213 | .show-menu .content::before { 214 | opacity: 1; 215 | -webkit-transition: opacity 0.8s; 216 | transition: opacity 0.8s; 217 | -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 218 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 219 | -webkit-transform: translate3d(0,0,0); 220 | transform: translate3d(0,0,0); 221 | } -------------------------------------------------------------------------------- /css/menu_topexpand.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | .container, 4 | .content-wrap { 5 | overflow: hidden; 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | .container { 11 | background: #fffce1; 12 | } 13 | 14 | .menu-wrap a { 15 | color: #555d7c; 16 | } 17 | 18 | .menu-wrap a:hover, 19 | .menu-wrap a:focus { 20 | color: #fffce1; 21 | } 22 | 23 | .content-wrap { 24 | overflow-y: scroll; 25 | -webkit-overflow-scrolling: touch; 26 | -webkit-transition: -webkit-transform 0.4s; 27 | transition: transform 0.4s; 28 | -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 29 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 30 | } 31 | 32 | .content { 33 | position: relative; 34 | background: #b4bad2; 35 | padding-bottom: 12em; 36 | } 37 | 38 | /* Common styles for menu button and menu-wrap */ 39 | .menu-button, 40 | .menu-wrap { 41 | position: fixed; 42 | width: 2.5em; 43 | height: 2.25em; 44 | font-size: 1.5em; 45 | -webkit-transform: translate3d(1.5em,1.5em,0); 46 | transform: translate3d(1.5em,1.5em,0); 47 | } 48 | 49 | /* Menu Button */ 50 | .menu-button { 51 | z-index: 1000; 52 | margin: 0; 53 | padding: 0; 54 | border: none; 55 | text-indent: 2.5em; 56 | color: transparent; 57 | background: #8a92b3; 58 | } 59 | 60 | .menu-button::before { 61 | position: absolute; 62 | top: 0.5em; 63 | right: 0.5em; 64 | bottom: 0.5em; 65 | left: 0.5em; 66 | background: linear-gradient(#fffce1 20%, transparent 20%, transparent 40%, #fffce1 40%, #fffce1 60%, transparent 60%, transparent 80%, #fffce1 80%); 67 | content: ''; 68 | } 69 | 70 | .menu-button:hover { 71 | opacity: 0.6; 72 | } 73 | 74 | /* Menu */ 75 | .menu-wrap { 76 | z-index: 999; 77 | background: #8a92b3; 78 | -webkit-transition: width 0.4s, height 0.4s, -webkit-transform 0.4s; 79 | transition: width 0.4s, height 0.4s, transform 0.4s; 80 | -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 81 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 82 | } 83 | 84 | .menu { 85 | height: 100%; 86 | overflow: hidden; 87 | font-size: 0.75em; 88 | } 89 | 90 | .icon-list { 91 | float: right; 92 | padding: 2.5em 2em 0 6em; 93 | } 94 | 95 | .icon-list a { 96 | opacity: 0; 97 | display: inline-block; 98 | padding: 0 0.2em; 99 | margin: 0 15px; 100 | text-align: center; 101 | font-size: 1.2em; 102 | } 103 | 104 | .icon-list a span { 105 | display: block; 106 | text-transform: uppercase; 107 | letter-spacing: 1px; 108 | font-size: 0.5em; 109 | font-weight: 700; 110 | padding-top: 0.5em; 111 | } 112 | 113 | @media screen and (max-width: 50em) { 114 | .icon-list a { 115 | padding: 0.5em 0em; 116 | margin: 0 5px; 117 | font-size: 1em; 118 | } 119 | .icon-list a span { 120 | display: none; 121 | } 122 | } 123 | 124 | /* Shown menu */ 125 | .show-menu .content-wrap { 126 | -webkit-transition-delay: 0s; 127 | transition-delay: 0s; 128 | -webkit-transform: translate3d(0,125px,0); 129 | transform: translate3d(0,125px,0); 130 | } 131 | 132 | .show-menu .menu-wrap { 133 | width: 100%; 134 | height: 125px; 135 | -webkit-transform: translate3d(0,0,0); 136 | transform: translate3d(0,0,0); 137 | -webkit-transition-delay: 0s; 138 | transition-delay: 0s; 139 | } 140 | 141 | .show-menu .icon-list a { 142 | opacity: 1; 143 | -webkit-transition: opacity 0.4s 0.4s; 144 | transition: opacity 0.4s 0.4s; 145 | } 146 | 147 | .show-menu .icon-list a:nth-child(2) { 148 | -webkit-transition-delay: 0.42s; 149 | transition-delay: 0.42s; 150 | } 151 | 152 | .show-menu .icon-list a:nth-child(3) { 153 | -webkit-transition-delay: 0.44s; 154 | transition-delay: 0.44s; 155 | } 156 | 157 | .show-menu .icon-list a:nth-child(4) { 158 | -webkit-transition-delay: 0.46s; 159 | transition-delay: 0.46s; 160 | } 161 | 162 | .show-menu .icon-list a:nth-child(5) { 163 | -webkit-transition-delay: 0.48s; 164 | transition-delay: 0.48s; 165 | } 166 | 167 | .show-menu .icon-list a:nth-child(6) { 168 | -webkit-transition-delay: 0.5s; 169 | transition-delay: 0.5s; 170 | } -------------------------------------------------------------------------------- /css/menu_topside.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | .container, 4 | .content-wrap { 5 | overflow: hidden; 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | .container { 11 | background: #373a47; 12 | } 13 | 14 | .menu-wrap a { 15 | color: #b8b7ad; 16 | } 17 | 18 | .menu-wrap a:hover, 19 | .menu-wrap a:focus { 20 | color: #c94e50; 21 | } 22 | 23 | .content-wrap { 24 | overflow-y: scroll; 25 | -webkit-overflow-scrolling: touch; 26 | -webkit-transition: -webkit-transform 0.3s; 27 | transition: transform 0.3s; 28 | } 29 | 30 | .content { 31 | position: relative; 32 | background: #b4bad2; 33 | } 34 | 35 | /* Overlay */ 36 | .content::before { 37 | position: absolute; 38 | top: 0; 39 | left: 0; 40 | z-index: 10; 41 | width: 100%; 42 | height: 100%; 43 | background: rgba(0,0,0,0.3); 44 | content: ''; 45 | opacity: 0; 46 | -webkit-transform: translate3d(100%,0,0); 47 | transform: translate3d(100%,0,0); 48 | -webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s; 49 | transition: opacity 0.3s, transform 0s 0.3s; 50 | } 51 | 52 | /* Menu Button */ 53 | .menu-button { 54 | position: fixed; 55 | z-index: 1000; 56 | margin: 1em; 57 | padding: 0; 58 | width: 2.5em; 59 | height: 2.25em; 60 | border: none; 61 | text-indent: 2.5em; 62 | font-size: 1.5em; 63 | color: transparent; 64 | background: transparent; 65 | -webkit-transition: -webkit-transform 0.3s; 66 | transition: transform 0.3s; 67 | } 68 | 69 | .menu-button::before { 70 | position: absolute; 71 | top: 0.5em; 72 | right: 0.5em; 73 | bottom: 0.5em; 74 | left: 0.5em; 75 | background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%); 76 | content: ''; 77 | } 78 | 79 | .menu-button:hover { 80 | opacity: 0.6; 81 | } 82 | /* Menu */ 83 | .menu-wrap { 84 | position: absolute; 85 | font-weight: 700; 86 | opacity: 0; 87 | -webkit-transition: opacity 1s; 88 | transition: opacity 1s; 89 | } 90 | 91 | .menu-top { 92 | line-height: 58px; 93 | } 94 | 95 | .menu-top .profile { 96 | display: inline-block; 97 | padding: 8px 10px; 98 | line-height: 42px; 99 | } 100 | 101 | .menu-top .profile, 102 | .menu-side { 103 | width: 300px; 104 | } 105 | 106 | .menu-top .profile img { 107 | float: left; 108 | margin-right: 1em; 109 | } 110 | 111 | .icon-list { 112 | display: inline-block; 113 | font-size: 1.25em; 114 | } 115 | 116 | .icon-list a { 117 | margin: 0 1em 0 0; 118 | padding: 0; 119 | } 120 | 121 | @media screen and (max-width: 32em) { 122 | .icon-list { 123 | padding-left: 1em; 124 | } 125 | } 126 | 127 | .menu-side a { 128 | display: block; 129 | padding: 1.2em; 130 | border-bottom: 1px solid rgba(0,0,0,0.1); 131 | } 132 | 133 | .menu-side a:first-child { 134 | border-top: 1px solid rgba(0,0,0,0.1); 135 | } 136 | 137 | /* Shown menu */ 138 | .show-menu .menu-wrap { 139 | opacity: 1; 140 | } 141 | 142 | .show-menu .content-wrap, 143 | .show-menu .menu-button { 144 | -webkit-transform: translate3d(300px,60px,0); 145 | transform: translate3d(300px,60px,0); 146 | } 147 | 148 | .show-menu .content::before { 149 | opacity: 1; 150 | -webkit-transition: opacity 0.3s; 151 | transition: opacity 0.3s; 152 | -webkit-transform: translate3d(0,0,0); 153 | transform: translate3d(0,0,0); 154 | } -------------------------------------------------------------------------------- /css/menu_wave.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | .container, 4 | .content-wrap { 5 | overflow: hidden; 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | .container { 11 | background: #373a47; 12 | } 13 | 14 | .menu-wrap a { 15 | color: #b8b7ad; 16 | } 17 | 18 | .menu-wrap a:hover, 19 | .menu-wrap a:focus { 20 | color: #c94e50; 21 | } 22 | 23 | .content-wrap { 24 | overflow-y: scroll; 25 | -webkit-overflow-scrolling: touch; 26 | } 27 | 28 | .content { 29 | position: relative; 30 | background: #b4bad2; 31 | } 32 | 33 | .content::before { 34 | position: absolute; 35 | top: 0; 36 | left: 0; 37 | z-index: 10; 38 | width: 100%; 39 | height: 100%; 40 | background: rgba(0,0,0,0.3); 41 | content: ''; 42 | opacity: 0; 43 | -webkit-transform: translate3d(100%,0,0); 44 | transform: translate3d(100%,0,0); 45 | -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s; 46 | transition: opacity 0.4s, transform 0s 0.4s; 47 | } 48 | 49 | /* Menu Button */ 50 | .menu-button { 51 | position: fixed; 52 | bottom: 0; 53 | z-index: 1000; 54 | margin: 1em; 55 | padding: 0; 56 | width: 2.5em; 57 | height: 2.25em; 58 | border: none; 59 | text-indent: 2.5em; 60 | font-size: 1.5em; 61 | color: transparent; 62 | background: transparent; 63 | } 64 | 65 | .menu-button::before { 66 | position: absolute; 67 | top: 0.5em; 68 | right: 0.5em; 69 | bottom: 0.5em; 70 | left: 0.5em; 71 | background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%); 72 | content: ''; 73 | } 74 | 75 | .menu-button:hover { 76 | opacity: 0.6; 77 | } 78 | 79 | /* Close Button */ 80 | .close-button { 81 | width: 16px; 82 | height: 16px; 83 | position: absolute; 84 | right: 1em; 85 | top: 1em; 86 | overflow: hidden; 87 | text-indent: 16px; 88 | border: none; 89 | z-index: 1001; 90 | background: transparent; 91 | color: transparent; 92 | } 93 | 94 | .close-button::before, 95 | .close-button::after { 96 | content: ''; 97 | position: absolute; 98 | width: 2px; 99 | height: 100%; 100 | top: 0; 101 | left: 50%; 102 | background: #888; 103 | } 104 | 105 | .close-button::before { 106 | -webkit-transform: rotate(45deg); 107 | transform: rotate(45deg); 108 | } 109 | 110 | .close-button::after { 111 | -webkit-transform: rotate(-45deg); 112 | transform: rotate(-45deg); 113 | } 114 | 115 | /* Menu */ 116 | .menu-wrap { 117 | position: absolute; 118 | bottom: 0; 119 | left: 0; 120 | z-index: 1001; 121 | width: 100%; 122 | height: 160px; 123 | font-size: 1.15em; 124 | -webkit-transform: translate3d(0,160px,0); 125 | transform: translate3d(0,160px,0); 126 | -webkit-transition: -webkit-transform 0.4s; 127 | transition: transform 0.4s; 128 | } 129 | 130 | .menu { 131 | position: absolute; 132 | width: 100%; 133 | z-index: 1000; 134 | text-align: center; 135 | top: 50%; 136 | padding: 0 1.5em; 137 | -webkit-transform: translate3d(0,-50%,0); 138 | transform: translate3d(0,-50%,0); 139 | } 140 | 141 | .icon-list a, 142 | .close-button { 143 | opacity: 0; 144 | -webkit-transform: translate3d(0,200px,0); 145 | transform: translate3d(0,200px,0); 146 | -webkit-transition: opacity 0.4s, -webkit-transform 0.4s; 147 | transition: opacity 0.4s, transform 0.4s; 148 | } 149 | 150 | .icon-list a { 151 | display: inline-block; 152 | padding: 0.8em; 153 | } 154 | 155 | .icon-list a i { 156 | vertical-align: middle; 157 | } 158 | 159 | .icon-list a span { 160 | display: inline-block; 161 | margin-left: 10px; 162 | font-size: 0.75em; 163 | vertical-align: middle; 164 | font-weight: 700; 165 | letter-spacing: 1px; 166 | } 167 | 168 | /* Morph Shape */ 169 | .morph-shape { 170 | position: absolute; 171 | width: 100%; 172 | width: calc(100% + 400px); 173 | height: 100%; 174 | top: 0; 175 | left: 0; 176 | fill: #373a47; 177 | -webkit-transition: -webkit-transform 0.4s; 178 | transition: transform 0.4s; 179 | -webkit-transform: translate3d(-400px,0,0); 180 | transform: translate3d(-400px,0,0); 181 | } 182 | 183 | /* Shown menu */ 184 | .show-menu .menu-wrap, 185 | .show-menu .icon-list a, 186 | .show-menu .close-button, 187 | .show-menu .morph-shape, 188 | .show-menu .content::before { 189 | -webkit-transform: translate3d(0,0,0); 190 | transform: translate3d(0,0,0); 191 | } 192 | 193 | .show-menu .menu-wrap, 194 | .show-menu .content::before { 195 | -webkit-transition-delay: 0s; 196 | transition-delay: 0s; 197 | } 198 | 199 | .show-menu .icon-list a, 200 | .show-menu .close-button, 201 | .show-menu .content::before { 202 | opacity: 1; 203 | } 204 | 205 | .show-menu .icon-list a:nth-child(2) { 206 | -webkit-transition-delay: 0.05s; 207 | transition-delay: 0.05s; 208 | } 209 | 210 | .show-menu .icon-list a:nth-child(3) { 211 | -webkit-transition-delay: 0.1s; 212 | transition-delay: 0.1s; 213 | } 214 | 215 | .show-menu .icon-list a:nth-child(4) { 216 | -webkit-transition-delay: 0.15s; 217 | transition-delay: 0.15s; 218 | } 219 | 220 | .show-menu .icon-list a:nth-child(5) { 221 | -webkit-transition-delay: 0.2s; 222 | transition-delay: 0.2s; 223 | } 224 | 225 | .show-menu .icon-list a:nth-child(6) { 226 | -webkit-transition-delay: 0.25s; 227 | transition-delay: 0.25s; 228 | } 229 | 230 | .show-menu .close-button { 231 | -webkit-transition-delay: 0.3s; 232 | transition-delay: 0.3s; 233 | } 234 | 235 | .show-menu .content::before { 236 | -webkit-transition: opacity 0.4s; 237 | transition: opacity 0.4s; 238 | } -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}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:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}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;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}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;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /elastic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Off-Canvas Menu Effects - Elastic 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 |

23 | 41 | 42 |

43 |

44 |

45 |

46 | Previous Demo 47 | Back to the Codrops Article 48 |

49 |

Off-Canvas Menu Effects Showing (off-canvas) menus stylishly

50 | 61 |

62 | 63 | 74 |

75 |

76 |

77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OffCanvasMenuEffects/f6d9ef2ce7f45c86244b6ff56643ed66f71a2d57/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OffCanvasMenuEffects/f6d9ef2ce7f45c86244b6ff56643ed66f71a2d57/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OffCanvasMenuEffects/f6d9ef2ce7f45c86244b6ff56643ed66f71a2d57/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /fonts/font-awesome-4.2.0/css/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"} -------------------------------------------------------------------------------- /fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OffCanvasMenuEffects/f6d9ef2ce7f45c86244b6ff56643ed66f71a2d57/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OffCanvasMenuEffects/f6d9ef2ce7f45c86244b6ff56643ed66f71a2d57/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OffCanvasMenuEffects/f6d9ef2ce7f45c86244b6ff56643ed66f71a2d57/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /img/related/PerspectiveNavigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OffCanvasMenuEffects/f6d9ef2ce7f45c86244b6ff56643ed66f71a2d57/img/related/PerspectiveNavigation.png -------------------------------------------------------------------------------- /img/related/sidebartransitions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OffCanvasMenuEffects/f6d9ef2ce7f45c86244b6ff56643ed66f71a2d57/img/related/sidebartransitions.png -------------------------------------------------------------------------------- /img/user1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OffCanvasMenuEffects/f6d9ef2ce7f45c86244b6ff56643ed66f71a2d57/img/user1.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Off-Canvas Menu Effects - Top Side 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |

22 | 39 | 40 |

41 |

42 |

43 |

44 | Previous Demo 45 | Back to the Codrops Article 46 |

47 |

Off-Canvas Menu Effects Showing (off-canvas) menus stylishly

48 | 59 |

Based on the Dribble shot by Michael Martinho

60 |

61 | 62 | 73 |

74 |

75 |

76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); 81 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * main.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2014, Codrops 9 | * http://www.codrops.com 10 | */ 11 | (function() { 12 | 13 | var bodyEl = document.body, 14 | content = document.querySelector( '.content-wrap' ), 15 | openbtn = document.getElementById( 'open-button' ), 16 | closebtn = document.getElementById( 'close-button' ), 17 | isOpen = false; 18 | 19 | function init() { 20 | initEvents(); 21 | } 22 | 23 | function initEvents() { 24 | openbtn.addEventListener( 'click', toggleMenu ); 25 | if( closebtn ) { 26 | closebtn.addEventListener( 'click', toggleMenu ); 27 | } 28 | 29 | // close the menu element if the target it´s not the menu element or one of its descendants.. 30 | content.addEventListener( 'click', function(ev) { 31 | var target = ev.target; 32 | if( isOpen && target !== openbtn ) { 33 | toggleMenu(); 34 | } 35 | } ); 36 | } 37 | 38 | function toggleMenu() { 39 | if( isOpen ) { 40 | classie.remove( bodyEl, 'show-menu' ); 41 | } 42 | else { 43 | classie.add( bodyEl, 'show-menu' ); 44 | } 45 | isOpen = !isOpen; 46 | } 47 | 48 | init(); 49 | 50 | })(); -------------------------------------------------------------------------------- /js/main2.js: -------------------------------------------------------------------------------- 1 | /** 2 | * main2.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2014, Codrops 9 | * http://www.codrops.com 10 | */ 11 | (function() { 12 | 13 | /** 14 | * based on from https://github.com/inuyaksa/jquery.nicescroll/blob/master/jquery.nicescroll.js 15 | */ 16 | function hasParent( e, p ) { 17 | if (!e) return false; 18 | var el = e.target||e.srcElement||e||false; 19 | while (el && el != p) { 20 | el = el.parentNode||false; 21 | } 22 | return (el!==false); 23 | }; 24 | 25 | var bodyEl = document.body, 26 | openbtn = document.getElementById( 'open-button' ), 27 | closebtn = document.getElementById( 'close-button' ), 28 | closebtnsub = document.getElementById( 'close-button-sub' ), 29 | caldays = [].slice.call( document.getElementById( 'calendar' ).querySelectorAll( '.fc-body > div.fc-row > div' ) ), 30 | menu = document.querySelector( '.menu-wrap[data-level="1"]' ), 31 | submenu = document.querySelector( '.menu-wrap[data-level="2"]' ), 32 | isMenuOpen = false, isSubMenuOpen = false; 33 | 34 | function init() { 35 | initEvents(); 36 | } 37 | 38 | function initEvents() { 39 | openbtn.addEventListener( 'click', toggleMenu ); 40 | 41 | if( closebtn ) { 42 | closebtn.addEventListener( 'click', toggleMenu ); 43 | } 44 | 45 | caldays.forEach( function( cell ) { 46 | if( cell.hasChildNodes() ) { 47 | cell.addEventListener( 'click', toggleSubMenu ); 48 | } 49 | } ); 50 | 51 | if( closebtnsub ) { 52 | closebtnsub.addEventListener( 'click', toggleSubMenu ); 53 | } 54 | 55 | // close the menu element if the target it´s not the menu element or one of its descendants.. 56 | document.addEventListener( 'mousedown', function(ev) { 57 | var target = ev.target; 58 | 59 | if( isSubMenuOpen ) { 60 | if( target !== submenu && target !== closebtnsub && !hasParent( target, submenu ) ) { 61 | closeMenus(); 62 | } 63 | } 64 | else if( isMenuOpen ) { 65 | if( target !== menu && target !== closebtn && !hasParent( target, menu ) ) { 66 | closeMenus(); 67 | } 68 | } 69 | } ); 70 | } 71 | 72 | function toggleMenu() { 73 | if( isMenuOpen ) { 74 | classie.remove( bodyEl, 'show-menu' ); 75 | } 76 | else { 77 | classie.add( bodyEl, 'show-menu' ); 78 | } 79 | isMenuOpen = !isMenuOpen; 80 | } 81 | 82 | function toggleSubMenu() { 83 | if( isSubMenuOpen ) { 84 | classie.remove( bodyEl, 'show-submenu' ); 85 | } 86 | else { 87 | classie.add( bodyEl, 'show-submenu' ); 88 | } 89 | isSubMenuOpen = !isSubMenuOpen; 90 | } 91 | 92 | function closeMenus() { 93 | if( isSubMenuOpen ) { 94 | toggleSubMenu(); 95 | } 96 | if( isMenuOpen ) { 97 | toggleMenu(); 98 | } 99 | } 100 | 101 | init(); 102 | 103 | })(); -------------------------------------------------------------------------------- /js/main3.js: -------------------------------------------------------------------------------- 1 | /** 2 | * main3.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2014, Codrops 9 | * http://www.codrops.com 10 | */ 11 | (function() { 12 | 13 | var bodyEl = document.body, 14 | content = document.querySelector( '.content-wrap' ), 15 | openbtn = document.getElementById( 'open-button' ), 16 | closebtn = document.getElementById( 'close-button' ), 17 | isOpen = false, 18 | 19 | morphEl = document.getElementById( 'morph-shape' ), 20 | s = Snap( morphEl.querySelector( 'svg' ) ); 21 | path = s.select( 'path' ); 22 | initialPath = this.path.attr('d'), 23 | pathOpen = morphEl.getAttribute( 'data-morph-open' ), 24 | isAnimating = false; 25 | 26 | function init() { 27 | initEvents(); 28 | } 29 | 30 | function initEvents() { 31 | openbtn.addEventListener( 'click', toggleMenu ); 32 | if( closebtn ) { 33 | closebtn.addEventListener( 'click', toggleMenu ); 34 | } 35 | 36 | // close the menu element if the target it´s not the menu element or one of its descendants.. 37 | content.addEventListener( 'click', function(ev) { 38 | var target = ev.target; 39 | if( isOpen && target !== openbtn ) { 40 | toggleMenu(); 41 | } 42 | } ); 43 | } 44 | 45 | function toggleMenu() { 46 | if( isAnimating ) return false; 47 | isAnimating = true; 48 | if( isOpen ) { 49 | classie.remove( bodyEl, 'show-menu' ); 50 | // animate path 51 | setTimeout( function() { 52 | // reset path 53 | path.attr( 'd', initialPath ); 54 | isAnimating = false; 55 | }, 300 ); 56 | } 57 | else { 58 | classie.add( bodyEl, 'show-menu' ); 59 | // animate path 60 | path.animate( { 'path' : pathOpen }, 400, mina.easeinout, function() { isAnimating = false; } ); 61 | } 62 | isOpen = !isOpen; 63 | } 64 | 65 | init(); 66 | 67 | })(); -------------------------------------------------------------------------------- /js/main4.js: -------------------------------------------------------------------------------- 1 | /** 2 | * main4.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2014, Codrops 9 | * http://www.codrops.com 10 | */ 11 | (function() { 12 | 13 | var bodyEl = document.body, 14 | content = document.querySelector( '.content-wrap' ), 15 | openbtn = document.getElementById( 'open-button' ), 16 | closebtn = document.getElementById( 'close-button' ), 17 | isOpen = false, 18 | 19 | morphEl = document.getElementById( 'morph-shape' ), 20 | s = Snap( morphEl.querySelector( 'svg' ) ); 21 | path = s.select( 'path' ); 22 | initialPath = this.path.attr('d'), 23 | steps = morphEl.getAttribute( 'data-morph-open' ).split(';'); 24 | stepsTotal = steps.length; 25 | isAnimating = false; 26 | 27 | function init() { 28 | initEvents(); 29 | } 30 | 31 | function initEvents() { 32 | openbtn.addEventListener( 'click', toggleMenu ); 33 | if( closebtn ) { 34 | closebtn.addEventListener( 'click', toggleMenu ); 35 | } 36 | 37 | // close the menu element if the target it´s not the menu element or one of its descendants.. 38 | content.addEventListener( 'click', function(ev) { 39 | var target = ev.target; 40 | if( isOpen && target !== openbtn ) { 41 | toggleMenu(); 42 | } 43 | } ); 44 | } 45 | 46 | function toggleMenu() { 47 | if( isAnimating ) return false; 48 | isAnimating = true; 49 | if( isOpen ) { 50 | classie.remove( bodyEl, 'show-menu' ); 51 | // animate path 52 | setTimeout( function() { 53 | // reset path 54 | path.attr( 'd', initialPath ); 55 | isAnimating = false; 56 | }, 300 ); 57 | } 58 | else { 59 | classie.add( bodyEl, 'show-menu' ); 60 | // animate path 61 | var pos = 0, 62 | nextStep = function( pos ) { 63 | if( pos > stepsTotal - 1 ) { 64 | isAnimating = false; 65 | return; 66 | } 67 | path.animate( { 'path' : steps[pos] }, pos === 0 ? 400 : 500, pos === 0 ? mina.easein : mina.elastic, function() { nextStep(pos); } ); 68 | pos++; 69 | }; 70 | 71 | nextStep(pos); 72 | } 73 | isOpen = !isOpen; 74 | } 75 | 76 | init(); 77 | 78 | })(); -------------------------------------------------------------------------------- /js/snap.svg-min.js: -------------------------------------------------------------------------------- 1 | // Snap.svg 0.3.0 2 | // 3 | // Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved. 4 | // 5 | // Licensed under the Apache License, Version 2.0 (the "License"); 6 | // you may not use this file except in compliance with the License. 7 | // You may obtain a copy of the License at 8 | // 9 | // http://www.apache.org/licenses/LICENSE-2.0 10 | // 11 | // Unless required by applicable law or agreed to in writing, software 12 | // distributed under the License is distributed on an "AS IS" BASIS, 13 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | // See the License for the specific language governing permissions and 15 | // limitations under the License. 16 | // 17 | // build: 2014-06-03 18 | !function(a){var b,c,d="0.4.2",e="hasOwnProperty",f=/[\.\/]/,g=/\s*,\s*/,h="*",i=function(a,b){return a-b},j={n:{}},k=function(){for(var a=0,b=this.length;b>a;a++)if("undefined"!=typeof this[a])return this[a]},l=function(){for(var a=this.length;--a;)if("undefined"!=typeof this[a])return this[a]},m=function(a,d){a=String(a);var e,f=c,g=Array.prototype.slice.call(arguments,2),h=m.listeners(a),j=0,n=[],o={},p=[],q=b;p.firstDefined=k,p.lastDefined=l,b=a,c=0;for(var r=0,s=h.length;s>r;r++)"zIndex"in h[r]&&(n.push(h[r].zIndex),h[r].zIndex<0&&(o[h[r].zIndex]=h[r]));for(n.sort(i);n[j]<0;)if(e=o[n[j++]],p.push(e.apply(d,g)),c)return c=f,p;for(r=0;s>r;r++)if(e=h[r],"zIndex"in e)if(e.zIndex==n[j]){if(p.push(e.apply(d,g)),c)break;do if(j++,e=o[n[j]],e&&p.push(e.apply(d,g)),c)break;while(e)}else o[e.zIndex]=e;else if(p.push(e.apply(d,g)),c)break;return c=f,b=q,p};m._events=j,m.listeners=function(a){var b,c,d,e,g,i,k,l,m=a.split(f),n=j,o=[n],p=[];for(e=0,g=m.length;g>e;e++){for(l=[],i=0,k=o.length;k>i;i++)for(n=o[i].n,c=[n[m[e]],n[h]],d=2;d--;)b=c[d],b&&(l.push(b),p=p.concat(b.f||[]));o=l}return p},m.on=function(a,b){if(a=String(a),"function"!=typeof b)return function(){};for(var c=a.split(g),d=0,e=c.length;e>d;d++)!function(a){for(var c,d=a.split(f),e=j,g=0,h=d.length;h>g;g++)e=e.n,e=e.hasOwnProperty(d[g])&&e[d[g]]||(e[d[g]]={n:{}});for(e.f=e.f||[],g=0,h=e.f.length;h>g;g++)if(e.f[g]==b){c=!0;break}!c&&e.f.push(b)}(c[d]);return function(a){+a==+a&&(b.zIndex=+a)}},m.f=function(a){var b=[].slice.call(arguments,1);return function(){m.apply(null,[a,null].concat(b).concat([].slice.call(arguments,0)))}},m.stop=function(){c=1},m.nt=function(a){return a?new RegExp("(?:\\.|\\/|^)"+a+"(?:\\.|\\/|$)").test(b):b},m.nts=function(){return b.split(f)},m.off=m.unbind=function(a,b){if(!a)return void(m._events=j={n:{}});var c=a.split(g);if(c.length>1)for(var d=0,i=c.length;i>d;d++)m.off(c[d],b);else{c=a.split(f);var k,l,n,d,i,o,p,q=[j];for(d=0,i=c.length;i>d;d++)for(o=0;od;d++)for(k=q[d];k.n;){if(b){if(k.f){for(o=0,p=k.f.length;p>o;o++)if(k.f[o]==b){k.f.splice(o,1);break}!k.f.length&&delete k.f}for(l in k.n)if(k.n[e](l)&&k.n[l].f){var r=k.n[l].f;for(o=0,p=r.length;p>o;o++)if(r[o]==b){r.splice(o,1);break}!r.length&&delete k.n[l].f}}else{delete k.f;for(l in k.n)k.n[e](l)&&k.n[l].f&&delete k.n[l].f}k=k.n}}},m.once=function(a,b){var c=function(){return m.unbind(a,c),b.apply(this,arguments)};return m.on(a,c)},m.version=d,m.toString=function(){return"You are running Eve "+d},"undefined"!=typeof module&&module.exports?module.exports=m:"function"==typeof define&&define.amd?define("eve",[],function(){return m}):a.eve=m}(this),function(a,b){"function"==typeof define&&define.amd?define(["eve"],function(c){return b(a,c)}):b(a,a.eve)}(this,function(a,b){var c=function(b){var c={},d=a.requestAnimationFrame||a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame||a.oRequestAnimationFrame||a.msRequestAnimationFrame||function(a){setTimeout(a,16)},e=Array.isArray||function(a){return a instanceof Array||"[object Array]"==Object.prototype.toString.call(a)},f=0,g="M"+(+new Date).toString(36),h=function(){return g+(f++).toString(36)},i=Date.now||function(){return+new Date},j=function(a){var b=this;if(null==a)return b.s;var c=b.s-a;b.b+=b.dur*c,b.B+=b.dur*c,b.s=a},k=function(a){var b=this;return null==a?b.spd:void(b.spd=a)},l=function(a){var b=this;return null==a?b.dur:(b.s=b.s*a/b.dur,void(b.dur=a))},m=function(){var a=this;delete c[a.id],a.update(),b("mina.stop."+a.id,a)},n=function(){var a=this;a.pdif||(delete c[a.id],a.update(),a.pdif=a.get()-a.b)},o=function(){var a=this;a.pdif&&(a.b=a.get()-a.pdif,delete a.pdif,c[a.id]=a)},p=function(){var a,b=this;if(e(b.start)){a=[];for(var c=0,d=b.start.length;d>c;c++)a[c]=+b.start[c]+(b.end[c]-b.start[c])*b.easing(b.s)}else a=+b.start+(b.end-b.start)*b.easing(b.s);b.set(a)},q=function(){var a=0;for(var e in c)if(c.hasOwnProperty(e)){var f=c[e],g=f.get();a++,f.s=(g-f.b)/(f.dur/f.spd),f.s>=1&&(delete c[e],f.s=1,a--,function(a){setTimeout(function(){b("mina.finish."+a.id,a)})}(f)),f.update()}a&&d(q)},r=function(a,b,e,f,g,i,s){var t={id:h(),start:a,end:b,b:e,s:0,dur:f-e,spd:1,get:g,set:i,easing:s||r.linear,status:j,speed:k,duration:l,stop:m,pause:n,resume:o,update:p};c[t.id]=t;var u,v=0;for(u in c)if(c.hasOwnProperty(u)&&(v++,2==v))break;return 1==v&&d(q),t};return r.time=i,r.getById=function(a){return c[a]||null},r.linear=function(a){return a},r.easeout=function(a){return Math.pow(a,1.7)},r.easein=function(a){return Math.pow(a,.48)},r.easeinout=function(a){if(1==a)return 1;if(0==a)return 0;var b=.48-a/1.04,c=Math.sqrt(.1734+b*b),d=c-b,e=Math.pow(Math.abs(d),1/3)*(0>d?-1:1),f=-c-b,g=Math.pow(Math.abs(f),1/3)*(0>f?-1:1),h=e+g+.5;return 3*(1-h)*h*h+h*h*h},r.backin=function(a){if(1==a)return 1;var b=1.70158;return a*a*((b+1)*a-b)},r.backout=function(a){if(0==a)return 0;a-=1;var b=1.70158;return a*a*((b+1)*a+b)+1},r.elastic=function(a){return a==!!a?a:Math.pow(2,-10*a)*Math.sin(2*(a-.075)*Math.PI/.3)+1},r.bounce=function(a){var b,c=7.5625,d=2.75;return 1/d>a?b=c*a*a:2/d>a?(a-=1.5/d,b=c*a*a+.75):2.5/d>a?(a-=2.25/d,b=c*a*a+.9375):(a-=2.625/d,b=c*a*a+.984375),b},a.mina=r,r}("undefined"==typeof b?function(){}:b),d=function(){function d(a,b){if(a){if(a.tagName)return y(a);if(f(a,"array")&&d.set)return d.set.apply(d,a);if(a instanceof u)return a;if(null==b)return a=z.doc.querySelector(a),y(a)}return a=null==a?"100%":a,b=null==b?"100%":b,new x(a,b)}function e(a,b){if(b){if("#text"==a&&(a=z.doc.createTextNode(b.text||"")),"string"==typeof a&&(a=e(a)),"string"==typeof b)return"xlink:"==b.substring(0,6)?a.getAttributeNS(W,b.substring(6)):"xml:"==b.substring(0,4)?a.getAttributeNS(X,b.substring(4)):a.getAttribute(b);for(var c in b)if(b[A](c)){var d=B(b[c]);d?"xlink:"==c.substring(0,6)?a.setAttributeNS(W,c.substring(6),d):"xml:"==c.substring(0,4)?a.setAttributeNS(X,c.substring(4),d):a.setAttribute(c,d):a.removeAttribute(c)}}else a=z.doc.createElementNS(X,a);return a}function f(a,b){return b=B.prototype.toLowerCase.call(b),"finite"==b?isFinite(a):"array"==b&&(a instanceof Array||Array.isArray&&Array.isArray(a))?!0:"null"==b&&null===a||b==typeof a&&null!==a||"object"==b&&a===Object(a)||L.call(a).slice(8,-1).toLowerCase()==b}function h(a){if("function"==typeof a||Object(a)!==a)return a;var b=new a.constructor;for(var c in a)a[A](c)&&(b[c]=h(a[c]));return b}function i(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return a.push(a.splice(c,1)[0])}function j(a,b,c){function d(){var e=Array.prototype.slice.call(arguments,0),f=e.join("␀"),g=d.cache=d.cache||{},h=d.count=d.count||[];return g[A](f)?(i(h,f),c?c(g[f]):g[f]):(h.length>=1e3&&delete g[h.shift()],h.push(f),g[f]=a.apply(b,e),c?c(g[f]):g[f])}return d}function k(a,b,c,d,e,f){if(null==e){var g=a-c,h=b-d;return g||h?(180+180*E.atan2(-h,-g)/I+360)%360:0}return k(a,b,e,f)-k(c,d,e,f)}function l(a){return a%360*I/180}function m(a){return 180*a/I%360}function n(a){var b=[];return a=a.replace(/(?:^|\s)(\w+)$([^)]+)$/g,function(a,c,d){return d=d.split(/\s*,\s*|\s+/),"rotate"==c&&1==d.length&&d.push(0,0),"scale"==c&&(d.length>2?d=d.slice(0,2):2==d.length&&d.push(0,0),1==d.length&&d.push(d[0],0,0)),b.push("skewX"==c?["m",1,0,E.tan(l(d[0])),1,0,0]:"skewY"==c?["m",1,E.tan(l(d[0])),0,1,0,0]:[c.charAt(0)].concat(d)),a}),b}function o(a,b){var c=eb(a),e=new d.Matrix;if(c)for(var f=0,g=c.length;g>f;f++){var h,i,j,k,l,m=c[f],n=m.length,o=B(m[0]).toLowerCase(),p=m[0]!=o,q=p?e.invert():0;"t"==o&&2==n?e.translate(m[1],0):"t"==o&&3==n?p?(h=q.x(0,0),i=q.y(0,0),j=q.x(m[1],m[2]),k=q.y(m[1],m[2]),e.translate(j-h,k-i)):e.translate(m[1],m[2]):"r"==o?2==n?(l=l||b,e.rotate(m[1],l.x+l.width/2,l.y+l.height/2)):4==n&&(p?(j=q.x(m[2],m[3]),k=q.y(m[2],m[3]),e.rotate(m[1],j,k)):e.rotate(m[1],m[2],m[3])):"s"==o?2==n||3==n?(l=l||b,e.scale(m[1],m[n-1],l.x+l.width/2,l.y+l.height/2)):4==n?p?(j=q.x(m[2],m[3]),k=q.y(m[2],m[3]),e.scale(m[1],m[1],j,k)):e.scale(m[1],m[1],m[2],m[3]):5==n&&(p?(j=q.x(m[3],m[4]),k=q.y(m[3],m[4]),e.scale(m[1],m[2],j,k)):e.scale(m[1],m[2],m[3],m[4])):"m"==o&&7==n&&e.add(m[1],m[2],m[3],m[4],m[5],m[6])}return e}function p(a,b){if(null==b){var c=!0;if(b=a.node.getAttribute("linearGradient"==a.type||"radialGradient"==a.type?"gradientTransform":"pattern"==a.type?"patternTransform":"transform"),!b)return new d.Matrix;b=n(b)}else b=d._.rgTransform.test(b)?B(b).replace(/\.{3}|\u2026/g,a._.transform||J):n(b),f(b,"array")&&(b=d.path?d.path.toString.call(b):B(b)),a._.transform=b;var e=o(b,a.getBBox(1));return c?e:void(a.matrix=e)}function q(a){var b=a.node.ownerSVGElement&&y(a.node.ownerSVGElement)||a.node.parentNode&&y(a.node.parentNode)||d.select("svg")||d(0,0),c=b.select("defs"),e=null==c?!1:c.node;return e||(e=w("defs",b.node).node),e}function r(a){return a.node.ownerSVGElement&&y(a.node.ownerSVGElement)||d.select("svg")}function s(a,b,c){function d(a){if(null==a)return J;if(a==+a)return a;e(j,{width:a});try{return j.getBBox().width}catch(b){return 0}}function f(a){if(null==a)return J;if(a==+a)return a;e(j,{height:a});try{return j.getBBox().height}catch(b){return 0}}function g(d,e){null==b?i[d]=e(a.attr(d)||0):d==b&&(i=e(null==c?a.attr(d)||0:c))}var h=r(a).node,i={},j=h.querySelector(".svg---mgr");switch(j||(j=e("rect"),e(j,{x:-9e9,y:-9e9,width:10,height:10,"class":"svg---mgr",fill:"none"}),h.appendChild(j)),a.type){case"rect":g("rx",d),g("ry",f);case"image":g("width",d),g("height",f);case"text":g("x",d),g("y",f);break;case"circle":g("cx",d),g("cy",f),g("r",d);break;case"ellipse":g("cx",d),g("cy",f),g("rx",d),g("ry",f);break;case"line":g("x1",d),g("x2",d),g("y1",f),g("y2",f);break;case"marker":g("refX",d),g("markerWidth",d),g("refY",f),g("markerHeight",f);break;case"radialGradient":g("fx",d),g("fy",f);break;case"tspan":g("dx",d),g("dy",f);break;default:g(b,d)}return h.removeChild(j),i}function t(a){f(a,"array")||(a=Array.prototype.slice.call(arguments,0));for(var b=0,c=0,d=this.node;this[b];)delete this[b++];for(b=0;be)return b-e;if(e>a-c)return b-e+a}return b},d.getRGB=j(function(a){if(!a||(a=B(a)).indexOf("-")+1)return{r:-1,g:-1,b:-1,hex:"none",error:1,toString:bb};if("none"==a)return{r:-1,g:-1,b:-1,hex:"none",toString:bb};if(!(P[A](a.toLowerCase().substring(0,2))||"#"==a.charAt())&&(a=$(a)),!a)return{r:-1,g:-1,b:-1,hex:"none",error:1,toString:bb};var b,c,e,g,h,i,j=a.match(M);return j?(j[2]&&(e=D(j[2].substring(5),16),c=D(j[2].substring(3,5),16),b=D(j[2].substring(1,3),16)),j[3]&&(e=D((h=j[3].charAt(3))+h,16),c=D((h=j[3].charAt(2))+h,16),b=D((h=j[3].charAt(1))+h,16)),j[4]&&(i=j[4].split(O),b=C(i[0]),"%"==i[0].slice(-1)&&(b*=2.55),c=C(i[1]),"%"==i[1].slice(-1)&&(c*=2.55),e=C(i[2]),"%"==i[2].slice(-1)&&(e*=2.55),"rgba"==j[1].toLowerCase().slice(0,4)&&(g=C(i[3])),i[3]&&"%"==i[3].slice(-1)&&(g/=100)),j[5]?(i=j[5].split(O),b=C(i[0]),"%"==i[0].slice(-1)&&(b/=100),c=C(i[1]),"%"==i[1].slice(-1)&&(c/=100),e=C(i[2]),"%"==i[2].slice(-1)&&(e/=100),("deg"==i[0].slice(-3)||"°"==i[0].slice(-1))&&(b/=360),"hsba"==j[1].toLowerCase().slice(0,4)&&(g=C(i[3])),i[3]&&"%"==i[3].slice(-1)&&(g/=100),d.hsb2rgb(b,c,e,g)):j[6]?(i=j[6].split(O),b=C(i[0]),"%"==i[0].slice(-1)&&(b/=100),c=C(i[1]),"%"==i[1].slice(-1)&&(c/=100),e=C(i[2]),"%"==i[2].slice(-1)&&(e/=100),("deg"==i[0].slice(-3)||"°"==i[0].slice(-1))&&(b/=360),"hsla"==j[1].toLowerCase().slice(0,4)&&(g=C(i[3])),i[3]&&"%"==i[3].slice(-1)&&(g/=100),d.hsl2rgb(b,c,e,g)):(b=G(E.round(b),255),c=G(E.round(c),255),e=G(E.round(e),255),g=G(F(g,0),1),j={r:b,g:c,b:e,toString:bb},j.hex="#"+(16777216|e|c<<8|b<<16).toString(16).slice(1),j.opacity=f(g,"finite")?g:1,j)):{r:-1,g:-1,b:-1,hex:"none",error:1,toString:bb}},d),d.hsb=j(function(a,b,c){return d.hsb2rgb(a,b,c).hex}),d.hsl=j(function(a,b,c){return d.hsl2rgb(a,b,c).hex}),d.rgb=j(function(a,b,c,d){if(f(d,"finite")){var e=E.round;return"rgba("+[e(a),e(b),e(c),+d.toFixed(2)]+")"}return"#"+(16777216|c|b<<8|a<<16).toString(16).slice(1)});var $=function(a){var b=z.doc.getElementsByTagName("head")[0]||z.doc.getElementsByTagName("svg")[0],c="rgb(255, 0, 0)";return($=j(function(a){if("red"==a.toLowerCase())return c;b.style.color=c,b.style.color=a;var d=z.doc.defaultView.getComputedStyle(b,J).getPropertyValue("color");return d==c?null:d}))(a)},_=function(){return"hsb("+[this.h,this.s,this.b]+")"},ab=function(){return"hsl("+[this.h,this.s,this.l]+")"},bb=function(){return 1==this.opacity||null==this.opacity?this.hex:"rgba("+[this.r,this.g,this.b,this.opacity]+")"},cb=function(a,b,c){if(null==b&&f(a,"object")&&"r"in a&&"g"in a&&"b"in a&&(c=a.b,b=a.g,a=a.r),null==b&&f(a,string)){var e=d.getRGB(a);a=e.r,b=e.g,c=e.b}return(a>1||b>1||c>1)&&(a/=255,b/=255,c/=255),[a,b,c]},db=function(a,b,c,e){a=E.round(255*a),b=E.round(255*b),c=E.round(255*c);var g={r:a,g:b,b:c,opacity:f(e,"finite")?e:1,hex:d.rgb(a,b,c),toString:bb};return f(e,"finite")&&(g.opacity=e),g};d.color=function(a){var b;return f(a,"object")&&"h"in a&&"s"in a&&"b"in a?(b=d.hsb2rgb(a),a.r=b.r,a.g=b.g,a.b=b.b,a.opacity=1,a.hex=b.hex):f(a,"object")&&"h"in a&&"s"in a&&"l"in a?(b=d.hsl2rgb(a),a.r=b.r,a.g=b.g,a.b=b.b,a.opacity=1,a.hex=b.hex):(f(a,"string")&&(a=d.getRGB(a)),f(a,"object")&&"r"in a&&"g"in a&&"b"in a&&!("error"in a)?(b=d.rgb2hsl(a),a.h=b.h,a.s=b.s,a.l=b.l,b=d.rgb2hsb(a),a.v=b.b):(a={hex:"none"},a.r=a.g=a.b=a.h=a.s=a.v=a.l=-1,a.error=1)),a.toString=bb,a},d.hsb2rgb=function(a,b,c,d){f(a,"object")&&"h"in a&&"s"in a&&"b"in a&&(c=a.b,b=a.s,a=a.h,d=a.o),a*=360;var e,g,h,i,j;return a=a%360/60,j=c*b,i=j*(1-H(a%2-1)),e=g=h=c-j,a=~~a,e+=[j,i,0,0,i,j][a],g+=[i,j,j,i,0,0][a],h+=[0,0,i,j,j,i][a],db(e,g,h,d)},d.hsl2rgb=function(a,b,c,d){f(a,"object")&&"h"in a&&"s"in a&&"l"in a&&(c=a.l,b=a.s,a=a.h),(a>1||b>1||c>1)&&(a/=360,b/=100,c/=100),a*=360;var e,g,h,i,j;return a=a%360/60,j=2*b*(.5>c?c:1-c),i=j*(1-H(a%2-1)),e=g=h=c-j/2,a=~~a,e+=[j,i,0,0,i,j][a],g+=[i,j,j,i,0,0][a],h+=[0,0,i,j,j,i][a],db(e,g,h,d)},d.rgb2hsb=function(a,b,c){c=cb(a,b,c),a=c[0],b=c[1],c=c[2];var d,e,f,g;return f=F(a,b,c),g=f-G(a,b,c),d=0==g?null:f==a?(b-c)/g:f==b?(c-a)/g+2:(a-b)/g+4,d=(d+360)%6*60/360,e=0==g?0:g/f,{h:d,s:e,b:f,toString:_}},d.rgb2hsl=function(a,b,c){c=cb(a,b,c),a=c[0],b=c[1],c=c[2];var d,e,f,g,h,i;return g=F(a,b,c),h=G(a,b,c),i=g-h,d=0==i?null:g==a?(b-c)/i:g==b?(c-a)/i+2:(a-b)/i+4,d=(d+360)%6*60/360,f=(g+h)/2,e=0==i?0:.5>f?i/(2*f):i/(2-2*f),{h:d,s:e,l:f,toString:ab}},d.parsePathString=function(a){if(!a)return null;var b=d.path(a);if(b.arr)return d.path.clone(b.arr);var c={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},e=[];return f(a,"array")&&f(a[0],"array")&&(e=d.path.clone(a)),e.length||B(a).replace(Q,function(a,b,d){var f=[],g=b.toLowerCase();if(d.replace(S,function(a,b){b&&f.push(+b)}),"m"==g&&f.length>2&&(e.push([b].concat(f.splice(0,2))),g="l",b="m"==b?"l":"L"),"o"==g&&1==f.length&&e.push([b,f[0]]),"r"==g)e.push([b].concat(f));else for(;f.length>=c[g]&&(e.push([b].concat(f.splice(0,c[g]))),c[g]););}),e.toString=d.path.toString,b.arr=d.path.clone(e),e};var eb=d.parseTransformString=function(a){if(!a)return null;var b=[];return f(a,"array")&&f(a[0],"array")&&(b=d.path.clone(a)),b.length||B(a).replace(R,function(a,c,d){{var e=[];c.toLowerCase()}d.replace(S,function(a,b){b&&e.push(+b)}),b.push([c].concat(e))}),b.toString=d.path.toString,b};d._.svgTransform2string=n,d._.rgTransform=new RegExp("^[a-z]["+N+"]*-?\\.?\\d","i"),d._.transform2matrix=o,d._unit2px=s;z.doc.contains||z.doc.compareDocumentPosition?function(a,b){var c=9==a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a==d||!(!d||1!=d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)for(;b;)if(b=b.parentNode,b==a)return!0;return!1};d._.getSomeDefs=q,d._.getSomeSVG=r,d.select=function(a){return y(z.doc.querySelector(a))},d.selectAll=function(a){for(var b=z.doc.querySelectorAll(a),c=(d.set||Array)(),e=0;ej;j++){d=f[j],b(d,"fill"),b(d,"stroke"),b(d,"filter"),b(d,"mask"),b(d,"clip-path"),c(d);var l=e(d.node,"id");l&&(e(d.node,{id:d.id}),h.push({old:l,id:d.id}))}for(j=0,k=h.length;k>j;j++){var m=i[h[j].old];if(m)for(var n=0,o=m.length;o>n;n++)m[n](h[j].id)}}function h(a,b,c){return function(d){var e=d.slice(a,b);return 1==e.length&&(e=e[0]),c?c(e):e}}function i(a){return function(){var b=a?"<"+this.type:"",c=this.node.attributes,d=this.node.childNodes;if(a)for(var e=0,f=c.length;f>e;e++)b+=" "+c[e].name+'="'+c[e].value.replace(/"/g,'\\"')+'"';if(d.length){for(a&&(b+=">"),e=0,f=d.length;f>e;e++)3==d[e].nodeType?b+=d[e].nodeValue:1==d[e].nodeType&&(b+=y(d[e]).toString());a&&(b+="")}else a&&(b+="/>");return b}}a.attr=function(a,c){{var d=this;d.node}if(!a)return d;if(f(a,"string")){if(!(arguments.length>1))return b("snap.util.getattr."+a,d).firstDefined();var e={};e[a]=c,a=e}for(var g in a)a[A](g)&&b("snap.util.attr."+g,d,a[g]);return d},a.getBBox=function(a){if(!d.Matrix||!d.path)return this.node.getBBox();var b=this,c=new d.Matrix;if(b.removed)return d._.box();for(;"use"==b.type;)if(a||(c=c.add(b.transform().localMatrix.translate(b.attr("x")||0,b.attr("y")||0))),b.original)b=b.original;else{var e=b.attr("xlink:href");b=b.original=b.node.ownerDocument.getElementById(e.substring(e.indexOf("#")+1))}var f=b._,g=d.path.get[b.type]||d.path.get.deflt;try{return a?(f.bboxwt=g?d.path.getBBox(b.realPath=g(b)):d._.box(b.node.getBBox()),d._.box(f.bboxwt)):(b.realPath=g(b),b.matrix=b.transform().localMatrix,f.bbox=d.path.getBBox(d.path.map(b.realPath,c.add(b.matrix))),d._.box(f.bbox))}catch(h){return d._.box()}};var j=function(){return this.string};a.transform=function(a){var b=this._;if(null==a){for(var c,f=this,g=new d.Matrix(this.node.getCTM()),h=p(this),i=[h],k=new d.Matrix,l=h.toTransformString(),m=B(h)==B(this.matrix)?B(b.transform):l;"svg"!=f.type&&(f=f.parent());)i.push(p(f));for(c=i.length;c--;)k.add(i[c]);return{string:m,globalMatrix:g,totalMatrix:k,localMatrix:h,diffMatrix:g.clone().add(h.invert()),global:g.toTransformString(),total:k.toTransformString(),local:l,toString:j}}return a instanceof d.Matrix?this.matrix=a:p(this,a),this.node&&("linearGradient"==this.type||"radialGradient"==this.type?e(this.node,{gradientTransform:this.matrix}):"pattern"==this.type?e(this.node,{patternTransform:this.matrix}):e(this.node,{transform:this.matrix})),this},a.parent=function(){return y(this.node.parentNode)},a.append=a.add=function(a){if(a){if("set"==a.type){var b=this;return a.forEach(function(a){b.add(a)}),this}a=y(a),this.node.appendChild(a.node),a.paper=this.paper}return this},a.appendTo=function(a){return a&&(a=y(a),a.append(this)),this},a.prepend=function(a){if(a){if("set"==a.type){var b,c=this;return a.forEach(function(a){b?b.after(a):c.prepend(a),b=a}),this}a=y(a);var d=a.parent();this.node.insertBefore(a.node,this.node.firstChild),this.add&&this.add(),a.paper=this.paper,this.parent()&&this.parent().add(),d&&d.add()}return this},a.prependTo=function(a){return a=y(a),a.prepend(this),this},a.before=function(a){if("set"==a.type){var b=this;return a.forEach(function(a){var c=a.parent();b.node.parentNode.insertBefore(a.node,b.node),c&&c.add()}),this.parent().add(),this}a=y(a);var c=a.parent();return this.node.parentNode.insertBefore(a.node,this.node),this.parent()&&this.parent().add(),c&&c.add(),a.paper=this.paper,this},a.after=function(a){a=y(a);var b=a.parent();return this.node.nextSibling?this.node.parentNode.insertBefore(a.node,this.node.nextSibling):this.node.parentNode.appendChild(a.node),this.parent()&&this.parent().add(),b&&b.add(),a.paper=this.paper,this},a.insertBefore=function(a){a=y(a);var b=this.parent();return a.node.parentNode.insertBefore(this.node,a.node),this.paper=a.paper,b&&b.add(),a.parent()&&a.parent().add(),this},a.insertAfter=function(a){a=y(a);var b=this.parent();return a.node.parentNode.insertBefore(this.node,a.node.nextSibling),this.paper=a.paper,b&&b.add(),a.parent()&&a.parent().add(),this},a.remove=function(){var a=this.parent();return this.node.parentNode&&this.node.parentNode.removeChild(this.node),delete this.paper,this.removed=!0,a&&a.add(),this},a.select=function(a){return y(this.node.querySelector(a))},a.selectAll=function(a){for(var b=this.node.querySelectorAll(a),c=(d.set||Array)(),e=0;eb;b++)a[b].stop();return this},a.animate=function(a,d,e,g){"function"!=typeof e||e.length||(g=e,e=c.linear),a instanceof l&&(g=a.callback,e=a.easing,d=e.dur,a=a.attr);var i,j,k,m,n=[],o=[],p={},q=this;for(var r in a)if(a[A](r)){q.equal?(m=q.equal(r,B(a[r])),i=m.from,j=m.to,k=m.f):(i=+q.attr(r),j=+a[r]);var s=f(i,"array")?i.length:1;p[r]=h(n.length,n.length+s,k),n=n.concat(i),o=o.concat(j)}var t=c.time(),u=c(n,o,t,t+d,c.time,function(a){var b={};for(var c in p)p[A](c)&&(b[c]=p[c](a));q.attr(b)},e);return q.anims[u.id]=u,u._attrs=a,u._callback=g,b("snap.animcreated."+q.id,u),b.once("mina.finish."+u.id,function(){delete q.anims[u.id],g&&g.call(q)}),b.once("mina.stop."+u.id,function(){delete q.anims[u.id]}),q};var m={};a.data=function(a,c){var e=m[this.id]=m[this.id]||{};if(0==arguments.length)return b("snap.data.get."+this.id,this,e,null),e;if(1==arguments.length){if(d.is(a,"object")){for(var f in a)a[A](f)&&this.data(f,a[f]);return this}return b("snap.data.get."+this.id,this,e[a],a),e[a]}return e[a]=c,b("snap.data.set."+this.id,this,c,a),this},a.removeData=function(a){return null==a?m[this.id]={}:m[this.id]&&delete m[this.id][a],this},a.outerSVG=a.toString=i(1),a.innerSVG=i()}(u.prototype),d.parse=function(a){var b=z.doc.createDocumentFragment(),c=!0,d=z.doc.createElement("div");if(a=B(a),a.match(/^\s*<\s*svg(?:\s|>)/)||(a="",c=!1),d.innerHTML=a,a=d.getElementsByTagName("svg")[0])if(c)b=a;else for(;a.firstChild;)b.appendChild(a.firstChild);return d.innerHTML=J,new v(b)},v.prototype.select=u.prototype.select,v.prototype.selectAll=u.prototype.selectAll,d.fragment=function(){for(var a=Array.prototype.slice.call(arguments,0),b=z.doc.createDocumentFragment(),c=0,e=a.length;e>c;c++){var f=a[c];f.node&&f.node.nodeType&&b.appendChild(f.node),f.nodeType&&b.appendChild(f),"string"==typeof f&&b.appendChild(d.parse(f).node)}return new v(b)},d._.make=w,d._.wrap=y,x.prototype.el=function(a,b){var c=w(a,this.node);return b&&c.attr(b),c},b.on("snap.util.getattr",function(){var a=b.nt();a=a.substring(a.lastIndexOf(".")+1);var c=a.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()});return fb[A](c)?this.node.ownerDocument.defaultView.getComputedStyle(this.node,null).getPropertyValue(c):e(this.node,a)});var fb={"alignment-baseline":0,"baseline-shift":0,clip:0,"clip-path":0,"clip-rule":0,color:0,"color-interpolation":0,"color-interpolation-filters":0,"color-profile":0,"color-rendering":0,cursor:0,direction:0,display:0,"dominant-baseline":0,"enable-background":0,fill:0,"fill-opacity":0,"fill-rule":0,filter:0,"flood-color":0,"flood-opacity":0,font:0,"font-family":0,"font-size":0,"font-size-adjust":0,"font-stretch":0,"font-style":0,"font-variant":0,"font-weight":0,"glyph-orientation-horizontal":0,"glyph-orientation-vertical":0,"image-rendering":0,kerning:0,"letter-spacing":0,"lighting-color":0,marker:0,"marker-end":0,"marker-mid":0,"marker-start":0,mask:0,opacity:0,overflow:0,"pointer-events":0,"shape-rendering":0,"stop-color":0,"stop-opacity":0,stroke:0,"stroke-dasharray":0,"stroke-dashoffset":0,"stroke-linecap":0,"stroke-linejoin":0,"stroke-miterlimit":0,"stroke-opacity":0,"stroke-width":0,"text-anchor":0,"text-decoration":0,"text-rendering":0,"unicode-bidi":0,visibility:0,"word-spacing":0,"writing-mode":0};b.on("snap.util.attr",function(a){var c=b.nt(),d={};c=c.substring(c.lastIndexOf(".")+1),d[c]=a;var f=c.replace(/-(\w)/gi,function(a,b){return b.toUpperCase()}),g=c.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()});fb[A](g)?this.node.style[f]=null==a?J:a:e(this.node,d)}),function(){}(x.prototype),d.ajax=function(a,c,d,e){var g=new XMLHttpRequest,h=V();if(g){if(f(c,"function"))e=d,d=c,c=null;else if(f(c,"object")){var i=[];for(var j in c)c.hasOwnProperty(j)&&i.push(encodeURIComponent(j)+"="+encodeURIComponent(c[j]));c=i.join("&")}return g.open(c?"POST":"GET",a,!0),c&&(g.setRequestHeader("X-Requested-With","XMLHttpRequest"),g.setRequestHeader("Content-type","application/x-www-form-urlencoded")),d&&(b.once("snap.ajax."+h+".0",d),b.once("snap.ajax."+h+".200",d),b.once("snap.ajax."+h+".304",d)),g.onreadystatechange=function(){4==g.readyState&&b("snap.ajax."+h+"."+g.status,e,g)},4==g.readyState?g:(g.send(c),g)}},d.load=function(a,b,c){d.ajax(a,function(a){var e=d.parse(a.responseText);c?b.call(c,e):b(e)})};var gb=function(a){var b=a.getBoundingClientRect(),c=a.ownerDocument,d=c.body,e=c.documentElement,f=e.clientTop||d.clientTop||0,h=e.clientLeft||d.clientLeft||0,i=b.top+(g.win.pageYOffset||e.scrollTop||d.scrollTop)-f,j=b.left+(g.win.pageXOffset||e.scrollLeft||d.scrollLeft)-h;return{y:i,x:j}};return d.getElementByPoint=function(a,b){var c=this,d=(c.canvas,z.doc.elementFromPoint(a,b));if(z.win.opera&&"svg"==d.tagName){var e=gb(d),f=d.createSVGRect();f.x=a-e.x,f.y=b-e.y,f.width=f.height=1;var g=d.getIntersectionList(f,null);g.length&&(d=g[g.length-1])}return d?y(d):null},d.plugin=function(a){a(d,u,x,z,v)},z.win.Snap=d,d}();return d.plugin(function(a){function b(a,b,d,e,f,g){return null==b&&"[object SVGMatrix]"==c.call(a)?(this.a=a.a,this.b=a.b,this.c=a.c,this.d=a.d,this.e=a.e,void(this.f=a.f)):void(null!=a?(this.a=+a,this.b=+b,this.c=+d,this.d=+e,this.e=+f,this.f=+g):(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0))}var c=Object.prototype.toString,d=String,e=Math,f="";!function(c){function g(a){return a[0]*a[0]+a[1]*a[1] 19 | }function h(a){var b=e.sqrt(g(a));a[0]&&(a[0]/=b),a[1]&&(a[1]/=b)}c.add=function(a,c,d,e,f,g){var h,i,j,k,l=[[],[],[]],m=[[this.a,this.c,this.e],[this.b,this.d,this.f],[0,0,1]],n=[[a,d,f],[c,e,g],[0,0,1]];for(a&&a instanceof b&&(n=[[a.a,a.c,a.e],[a.b,a.d,a.f],[0,0,1]]),h=0;3>h;h++)for(i=0;3>i;i++){for(k=0,j=0;3>j;j++)k+=m[h][j]*n[j][i];l[h][i]=k}return this.a=l[0][0],this.b=l[1][0],this.c=l[0][1],this.d=l[1][1],this.e=l[0][2],this.f=l[1][2],this},c.invert=function(){var a=this,c=a.a*a.d-a.b*a.c;return new b(a.d/c,-a.b/c,-a.c/c,a.a/c,(a.c*a.f-a.d*a.e)/c,(a.b*a.e-a.a*a.f)/c)},c.clone=function(){return new b(this.a,this.b,this.c,this.d,this.e,this.f)},c.translate=function(a,b){return this.add(1,0,0,1,a,b)},c.scale=function(a,b,c,d){return null==b&&(b=a),(c||d)&&this.add(1,0,0,1,c,d),this.add(a,0,0,b,0,0),(c||d)&&this.add(1,0,0,1,-c,-d),this},c.rotate=function(b,c,d){b=a.rad(b),c=c||0,d=d||0;var f=+e.cos(b).toFixed(9),g=+e.sin(b).toFixed(9);return this.add(f,g,-g,f,c,d),this.add(1,0,0,1,-c,-d)},c.x=function(a,b){return a*this.a+b*this.c+this.e},c.y=function(a,b){return a*this.b+b*this.d+this.f},c.get=function(a){return+this[d.fromCharCode(97+a)].toFixed(4)},c.toString=function(){return"matrix("+[this.get(0),this.get(1),this.get(2),this.get(3),this.get(4),this.get(5)].join()+")"},c.offset=function(){return[this.e.toFixed(4),this.f.toFixed(4)]},c.determinant=function(){return this.a*this.d-this.b*this.c},c.split=function(){var b={};b.dx=this.e,b.dy=this.f;var c=[[this.a,this.c],[this.b,this.d]];b.scalex=e.sqrt(g(c[0])),h(c[0]),b.shear=c[0][0]*c[1][0]+c[0][1]*c[1][1],c[1]=[c[1][0]-c[0][0]*b.shear,c[1][1]-c[0][1]*b.shear],b.scaley=e.sqrt(g(c[1])),h(c[1]),b.shear/=b.scaley,this.determinant()<0&&(b.scalex=-b.scalex);var d=-c[0][1],f=c[1][1];return 0>f?(b.rotate=a.deg(e.acos(f)),0>d&&(b.rotate=360-b.rotate)):b.rotate=a.deg(e.asin(d)),b.isSimple=!(+b.shear.toFixed(9)||b.scalex.toFixed(9)!=b.scaley.toFixed(9)&&b.rotate),b.isSuperSimple=!+b.shear.toFixed(9)&&b.scalex.toFixed(9)==b.scaley.toFixed(9)&&!b.rotate,b.noRotation=!+b.shear.toFixed(9)&&!b.rotate,b},c.toTransformString=function(a){var b=a||this.split();return+b.shear.toFixed(9)?"m"+[this.get(0),this.get(1),this.get(2),this.get(3),this.get(4),this.get(5)]:(b.scalex=+b.scalex.toFixed(4),b.scaley=+b.scaley.toFixed(4),b.rotate=+b.rotate.toFixed(4),(b.dx||b.dy?"t"+[+b.dx.toFixed(4),+b.dy.toFixed(4)]:f)+(1!=b.scalex||1!=b.scaley?"s"+[b.scalex,b.scaley,0,0]:f)+(b.rotate?"r"+[+b.rotate.toFixed(4),0,0]:f))}}(b.prototype),a.Matrix=b,a.matrix=function(a,c,d,e,f,g){return new b(a,c,d,e,f,g)}}),d.plugin(function(a,c,d,e,f){function g(d){return function(e){if(b.stop(),e instanceof f&&1==e.node.childNodes.length&&("radialGradient"==e.node.firstChild.tagName||"linearGradient"==e.node.firstChild.tagName||"pattern"==e.node.firstChild.tagName)&&(e=e.node.firstChild,n(this).appendChild(e),e=l(e)),e instanceof c)if("radialGradient"==e.type||"linearGradient"==e.type||"pattern"==e.type){e.node.id||p(e.node,{id:e.id});var g=q(e.node.id)}else g=e.attr(d);else if(g=a.color(e),g.error){var h=a(n(this).ownerSVGElement).gradient(e);h?(h.node.id||p(h.node,{id:h.id}),g=q(h.node.id)):g=e}else g=r(g);var i={};i[d]=g,p(this.node,i),this.node.style[d]=t}}function h(a){b.stop(),a==+a&&(a+="px"),this.node.style.fontSize=a}function i(a){for(var b=[],c=a.childNodes,d=0,e=c.length;e>d;d++){var f=c[d];3==f.nodeType&&b.push(f.nodeValue),"tspan"==f.tagName&&b.push(1==f.childNodes.length&&3==f.firstChild.nodeType?f.firstChild.nodeValue:i(f))}return b}function j(){return b.stop(),this.node.style.fontSize}var k=a._.make,l=a._.wrap,m=a.is,n=a._.getSomeDefs,o=/^url$#?([^)]+)$$/,p=a._.$,q=a.url,r=String,s=a._.separator,t="";b.on("snap.util.attr.mask",function(a){if(a instanceof c||a instanceof f){if(b.stop(),a instanceof f&&1==a.node.childNodes.length&&(a=a.node.firstChild,n(this).appendChild(a),a=l(a)),"mask"==a.type)var d=a;else d=k("mask",n(this)),d.node.appendChild(a.node);!d.node.id&&p(d.node,{id:d.id}),p(this.node,{mask:q(d.id)})}}),function(a){b.on("snap.util.attr.clip",a),b.on("snap.util.attr.clip-path",a),b.on("snap.util.attr.clipPath",a)}(function(a){if(a instanceof c||a instanceof f){if(b.stop(),"clipPath"==a.type)var d=a;else d=k("clipPath",n(this)),d.node.appendChild(a.node),!d.node.id&&p(d.node,{id:d.id});p(this.node,{"clip-path":q(d.id)})}}),b.on("snap.util.attr.fill",g("fill")),b.on("snap.util.attr.stroke",g("stroke"));var u=/^([lr])(?:$([^)]*)$)?(.*)$/i;b.on("snap.util.grad.parse",function(a){a=r(a);var b=a.match(u);if(!b)return null;var c=b[1],d=b[2],e=b[3];return d=d.split(/\s*,\s*/).map(function(a){return+a==a?+a:a}),1==d.length&&0==d[0]&&(d=[]),e=e.split("-"),e=e.map(function(a){a=a.split(":");var b={color:a[0]};return a[1]&&(b.offset=parseFloat(a[1])),b}),{type:c,params:d,stops:e}}),b.on("snap.util.attr.d",function(c){b.stop(),m(c,"array")&&m(c[0],"array")&&(c=a.path.toString.call(c)),c=r(c),c.match(/[ruo]/i)&&(c=a.path.toAbsolute(c)),p(this.node,{d:c})})(-1),b.on("snap.util.attr.#text",function(a){b.stop(),a=r(a);for(var c=e.doc.createTextNode(a);this.node.firstChild;)this.node.removeChild(this.node.firstChild);this.node.appendChild(c)})(-1),b.on("snap.util.attr.path",function(a){b.stop(),this.attr({d:a})})(-1),b.on("snap.util.attr.class",function(a){b.stop(),this.node.className.baseVal=a})(-1),b.on("snap.util.attr.viewBox",function(a){var c;c=m(a,"object")&&"x"in a?[a.x,a.y,a.width,a.height].join(" "):m(a,"array")?a.join(" "):a,p(this.node,{viewBox:c}),b.stop()})(-1),b.on("snap.util.attr.transform",function(a){this.transform(a),b.stop()})(-1),b.on("snap.util.attr.r",function(a){"rect"==this.type&&(b.stop(),p(this.node,{rx:a,ry:a}))})(-1),b.on("snap.util.attr.textpath",function(a){if(b.stop(),"text"==this.type){var d,e,f;if(!a&&this.textPath){for(e=this.textPath;e.node.firstChild;)this.node.appendChild(e.node.firstChild);return e.remove(),void delete this.textPath}if(m(a,"string")){var g=n(this),h=l(g.parentNode).path(a);g.appendChild(h.node),d=h.id,h.attr({id:d})}else a=l(a),a instanceof c&&(d=a.attr("id"),d||(d=a.id,a.attr({id:d})));if(d)if(e=this.textPath,f=this.node,e)e.attr({"xlink:href":"#"+d});else{for(e=p("textPath",{"xlink:href":"#"+d});f.firstChild;)e.appendChild(f.firstChild);f.appendChild(e),this.textPath=l(e)}}})(-1),b.on("snap.util.attr.text",function(a){if("text"==this.type){for(var c=this.node,d=function(a){var b=p("tspan");if(m(a,"array"))for(var c=0;c1&&(a=Array.prototype.slice.call(arguments,0));var b={};return g(a,"object")&&!g(a,"array")?b=a:null!=a&&(b={points:a}),this.el("polyline",b)},f.polygon=function(a){arguments.length>1&&(a=Array.prototype.slice.call(arguments,0));var b={};return g(a,"object")&&!g(a,"array")?b=a:null!=a&&(b={points:a}),this.el("polygon",b)},function(){function c(){return this.selectAll("stop")}function d(b,c){var d=j("stop"),e={offset:+c+"%"};return b=a.color(b),e["stop-color"]=b.hex,b.opacity<1&&(e["stop-opacity"]=b.opacity),j(d,e),this.node.appendChild(d),this}function e(){if("linearGradient"==this.type){var b=j(this.node,"x1")||0,c=j(this.node,"x2")||1,d=j(this.node,"y1")||0,e=j(this.node,"y2")||0;return a._.box(b,d,math.abs(c-b),math.abs(e-d))}var f=this.node.cx||.5,g=this.node.cy||.5,h=this.node.r||0;return a._.box(f-h,g-h,2*h,2*h)}function g(a,c){function d(a,b){for(var c=(b-l)/(a-m),d=m;a>d;d++)g[d].offset=+(+l+c*(d-m)).toFixed(2);m=a,l=b}var e,f=b("snap.util.grad.parse",null,c).firstDefined();if(!f)return null;f.params.unshift(a),e="l"==f.type.toLowerCase()?h.apply(0,f.params):i.apply(0,f.params),f.type!=f.type.toLowerCase()&&j(e.node,{gradientUnits:"userSpaceOnUse"});var g=f.stops,k=g.length,l=0,m=0;k--;for(var n=0;k>n;n++)"offset"in g[n]&&d(n,g[n].offset);for(g[k].offset=g[k].offset||100,d(k,g[k].offset),n=0;k>=n;n++){var o=g[n];e.addStop(o.color,o.offset)}return e}function h(b,f,g,h,i){var k=a._.make("linearGradient",b);return k.stops=c,k.addStop=d,k.getBBox=e,null!=f&&j(k.node,{x1:f,y1:g,x2:h,y2:i}),k}function i(b,f,g,h,i,k){var l=a._.make("radialGradient",b);return l.stops=c,l.addStop=d,l.getBBox=e,null!=f&&j(l.node,{cx:f,cy:g,r:h}),null!=i&&null!=k&&j(l.node,{fx:i,fy:k}),l}var j=a._.$;f.gradient=function(a){return g(this.defs,a)},f.gradientLinear=function(a,b,c,d){return h(this.defs,a,b,c,d)},f.gradientRadial=function(a,b,c,d,e){return i(this.defs,a,b,c,d,e)},f.toString=function(){var b,c=this.node.ownerDocument,d=c.createDocumentFragment(),e=c.createElement("div"),f=this.node.cloneNode(!0);return d.appendChild(e),e.appendChild(f),a._.$(f,{xmlns:"http://www.w3.org/2000/svg"}),b=e.innerHTML,d.removeChild(d.firstChild),b},f.clear=function(){for(var a,b=this.node.firstChild;b;)a=b.nextSibling,"defs"!=b.tagName?b.parentNode.removeChild(b):f.clear.call({node:b}),b=a}}()}),d.plugin(function(a,b){function c(a){var b=c.ps=c.ps||{};return b[a]?b[a].sleep=100:b[a]={sleep:100},setTimeout(function(){for(var c in b)b[K](c)&&c!=a&&(b[c].sleep--,!b[c].sleep&&delete b[c])}),b[a]}function d(a,b,c,d){return null==a&&(a=b=c=d=0),null==b&&(b=a.y,c=a.width,d=a.height,a=a.x),{x:a,y:b,width:c,w:c,height:d,h:d,x2:a+c,y2:b+d,cx:a+c/2,cy:b+d/2,r1:N.min(c,d)/2,r2:N.max(c,d)/2,r0:N.sqrt(c*c+d*d)/2,path:w(a,b,c,d),vb:[a,b,c,d].join(" ")}}function e(){return this.join(",").replace(L,"$1")}function f(a){var b=J(a);return b.toString=e,b}function g(a,b,c,d,e,f,g,h,j){return null==j?n(a,b,c,d,e,f,g,h):i(a,b,c,d,e,f,g,h,o(a,b,c,d,e,f,g,h,j))}function h(c,d){function e(a){return+(+a).toFixed(3)}return a._.cacher(function(a,f,h){a instanceof b&&(a=a.attr("d")),a=E(a);for(var j,k,l,m,n,o="",p={},q=0,r=0,s=a.length;s>r;r++){if(l=a[r],"M"==l[0])j=+l[1],k=+l[2];else{if(m=g(j,k,l[1],l[2],l[3],l[4],l[5],l[6]),q+m>f){if(d&&!p.start){if(n=g(j,k,l[1],l[2],l[3],l[4],l[5],l[6],f-q),o+=["C"+e(n.start.x),e(n.start.y),e(n.m.x),e(n.m.y),e(n.x),e(n.y)],h)return o;p.start=o,o=["M"+e(n.x),e(n.y)+"C"+e(n.n.x),e(n.n.y),e(n.end.x),e(n.end.y),e(l[5]),e(l[6])].join(),q+=m,j=+l[5],k=+l[6];continue}if(!c&&!d)return n=g(j,k,l[1],l[2],l[3],l[4],l[5],l[6],f-q)}q+=m,j=+l[5],k=+l[6]}o+=l.shift()+l}return p.end=o,n=c?q:d?p:i(j,k,l[0],l[1],l[2],l[3],l[4],l[5],1)},null,a._.clone)}function i(a,b,c,d,e,f,g,h,i){var j=1-i,k=R(j,3),l=R(j,2),m=i*i,n=m*i,o=k*a+3*l*i*c+3*j*i*i*e+n*g,p=k*b+3*l*i*d+3*j*i*i*f+n*h,q=a+2*i*(c-a)+m*(e-2*c+a),r=b+2*i*(d-b)+m*(f-2*d+b),s=c+2*i*(e-c)+m*(g-2*e+c),t=d+2*i*(f-d)+m*(h-2*f+d),u=j*a+i*c,v=j*b+i*d,w=j*e+i*g,x=j*f+i*h,y=90-180*N.atan2(q-s,r-t)/O;return{x:o,y:p,m:{x:q,y:r},n:{x:s,y:t},start:{x:u,y:v},end:{x:w,y:x},alpha:y}}function j(b,c,e,f,g,h,i,j){a.is(b,"array")||(b=[b,c,e,f,g,h,i,j]);var k=D.apply(null,b);return d(k.min.x,k.min.y,k.max.x-k.min.x,k.max.y-k.min.y)}function k(a,b,c){return b>=a.x&&b<=a.x+a.width&&c>=a.y&&c<=a.y+a.height}function l(a,b){return a=d(a),b=d(b),k(b,a.x,a.y)||k(b,a.x2,a.y)||k(b,a.x,a.y2)||k(b,a.x2,a.y2)||k(a,b.x,b.y)||k(a,b.x2,b.y)||k(a,b.x,b.y2)||k(a,b.x2,b.y2)||(a.xb.x||b.xa.x)&&(a.yb.y||b.ya.y)}function m(a,b,c,d,e){var f=-3*b+9*c-9*d+3*e,g=a*f+6*b-12*c+6*d;return a*g-3*b+3*c}function n(a,b,c,d,e,f,g,h,i){null==i&&(i=1),i=i>1?1:0>i?0:i;for(var j=i/2,k=12,l=[-.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816],n=[.2491,.2491,.2335,.2335,.2032,.2032,.1601,.1601,.1069,.1069,.0472,.0472],o=0,p=0;k>p;p++){var q=j*l[p]+j,r=m(q,a,c,e,g),s=m(q,b,d,f,h),t=r*r+s*s;o+=n[p]*N.sqrt(t)}return j*o}function o(a,b,c,d,e,f,g,h,i){if(!(0>i||n(a,b,c,d,e,f,g,h)o;)l/=2,m+=(i>j?1:-1)*l,j=n(a,b,c,d,e,f,g,h,m);return m}}function p(a,b,c,d,e,f,g,h){if(!(Q(a,c)Q(e,g)||Q(b,d)Q(f,h))){var i=(a*d-b*c)*(e-g)-(a-c)*(e*h-f*g),j=(a*d-b*c)*(f-h)-(b-d)*(e*h-f*g),k=(a-c)*(f-h)-(b-d)*(e-g);if(k){var l=i/k,m=j/k,n=+l.toFixed(2),o=+m.toFixed(2);if(!(n<+P(a,c).toFixed(2)||n>+Q(a,c).toFixed(2)||n<+P(e,g).toFixed(2)||n>+Q(e,g).toFixed(2)||o<+P(b,d).toFixed(2)||o>+Q(b,d).toFixed(2)||o<+P(f,h).toFixed(2)||o>+Q(f,h).toFixed(2)))return{x:l,y:m}}}}function q(a,b,c){var d=j(a),e=j(b);if(!l(d,e))return c?0:[];for(var f=n.apply(0,a),g=n.apply(0,b),h=~~(f/8),k=~~(g/8),m=[],o=[],q={},r=c?0:[],s=0;h+1>s;s++){var t=i.apply(0,a.concat(s/h));m.push({x:t.x,y:t.y,t:s/h})}for(s=0;k+1>s;s++)t=i.apply(0,b.concat(s/k)),o.push({x:t.x,y:t.y,t:s/k});for(s=0;h>s;s++)for(var u=0;k>u;u++){var v=m[s],w=m[s+1],x=o[u],y=o[u+1],z=S(w.x-v.x)<.001?"y":"x",A=S(y.x-x.x)<.001?"y":"x",B=p(v.x,v.y,w.x,w.y,x.x,x.y,y.x,y.y);if(B){if(q[B.x.toFixed(4)]==B.y.toFixed(4))continue;q[B.x.toFixed(4)]=B.y.toFixed(4);var C=v.t+S((B[z]-v[z])/(w[z]-v[z]))*(w.t-v.t),D=x.t+S((B[A]-x[A])/(y[A]-x[A]))*(y.t-x.t);C>=0&&1>=C&&D>=0&&1>=D&&(c?r++:r.push({x:B.x,y:B.y,t1:C,t2:D}))}}return r}function r(a,b){return t(a,b)}function s(a,b){return t(a,b,1)}function t(a,b,c){a=E(a),b=E(b);for(var d,e,f,g,h,i,j,k,l,m,n=c?0:[],o=0,p=a.length;p>o;o++){var r=a[o];if("M"==r[0])d=h=r[1],e=i=r[2];else{"C"==r[0]?(l=[d,e].concat(r.slice(1)),d=l[6],e=l[7]):(l=[d,e,d,e,h,i,h,i],d=h,e=i);for(var s=0,t=b.length;t>s;s++){var u=b[s];if("M"==u[0])f=j=u[1],g=k=u[2];else{"C"==u[0]?(m=[f,g].concat(u.slice(1)),f=m[6],g=m[7]):(m=[f,g,f,g,j,k,j,k],f=j,g=k);var v=q(l,m,c);if(c)n+=v;else{for(var w=0,x=v.length;x>w;w++)v[w].segment1=o,v[w].segment2=s,v[w].bez1=l,v[w].bez2=m;n=n.concat(v)}}}}}return n}function u(a,b,c){var d=v(a);return k(d,b,c)&&t(a,[["M",b,c],["H",d.x2+10]],1)%2==1}function v(a){var b=c(a);if(b.bbox)return J(b.bbox);if(!a)return d();a=E(a);for(var e,f=0,g=0,h=[],i=[],j=0,k=a.length;k>j;j++)if(e=a[j],"M"==e[0])f=e[1],g=e[2],h.push(f),i.push(g);else{var l=D(f,g,e[1],e[2],e[3],e[4],e[5],e[6]);h=h.concat(l.min.x,l.max.x),i=i.concat(l.min.y,l.max.y),f=e[5],g=e[6]}var m=P.apply(0,h),n=P.apply(0,i),o=Q.apply(0,h),p=Q.apply(0,i),q=d(m,n,o-m,p-n);return b.bbox=J(q),q}function w(a,b,c,d,f){if(f)return[["M",+a+ +f,b],["l",c-2*f,0],["a",f,f,0,0,1,f,f],["l",0,d-2*f],["a",f,f,0,0,1,-f,f],["l",2*f-c,0],["a",f,f,0,0,1,-f,-f],["l",0,2*f-d],["a",f,f,0,0,1,f,-f],["z"]];var g=[["M",a,b],["l",c,0],["l",0,d],["l",-c,0],["z"]];return g.toString=e,g}function x(a,b,c,d,f){if(null==f&&null==d&&(d=c),a=+a,b=+b,c=+c,d=+d,null!=f)var g=Math.PI/180,h=a+c*Math.cos(-d*g),i=a+c*Math.cos(-f*g),j=b+c*Math.sin(-d*g),k=b+c*Math.sin(-f*g),l=[["M",h,j],["A",c,c,0,+(f-d>180),0,i,k]];else l=[["M",a,b],["m",0,-d],["a",c,d,0,1,1,0,2*d],["a",c,d,0,1,1,0,-2*d],["z"]];return l.toString=e,l}function y(b){var d=c(b),g=String.prototype.toLowerCase;if(d.rel)return f(d.rel);a.is(b,"array")&&a.is(b&&b[0],"array")||(b=a.parsePathString(b));var h=[],i=0,j=0,k=0,l=0,m=0;"M"==b[0][0]&&(i=b[0][1],j=b[0][2],k=i,l=j,m++,h.push(["M",i,j]));for(var n=m,o=b.length;o>n;n++){var p=h[n]=[],q=b[n];if(q[0]!=g.call(q[0]))switch(p[0]=g.call(q[0]),p[0]){case"a":p[1]=q[1],p[2]=q[2],p[3]=q[3],p[4]=q[4],p[5]=q[5],p[6]=+(q[6]-i).toFixed(3),p[7]=+(q[7]-j).toFixed(3);break;case"v":p[1]=+(q[1]-j).toFixed(3);break;case"m":k=q[1],l=q[2];default:for(var r=1,s=q.length;s>r;r++)p[r]=+(q[r]-(r%2?i:j)).toFixed(3)}else{p=h[n]=[],"m"==q[0]&&(k=q[1]+i,l=q[2]+j);for(var t=0,u=q.length;u>t;t++)h[n][t]=q[t]}var v=h[n].length;switch(h[n][0]){case"z":i=k,j=l;break;case"h":i+=+h[n][v-1];break;case"v":j+=+h[n][v-1];break;default:i+=+h[n][v-2],j+=+h[n][v-1]}}return h.toString=e,d.rel=f(h),h}function z(b){var d=c(b);if(d.abs)return f(d.abs);if(I(b,"array")&&I(b&&b[0],"array")||(b=a.parsePathString(b)),!b||!b.length)return[["M",0,0]];var g,h=[],i=0,j=0,k=0,l=0,m=0;"M"==b[0][0]&&(i=+b[0][1],j=+b[0][2],k=i,l=j,m++,h[0]=["M",i,j]);for(var n,o,p=3==b.length&&"M"==b[0][0]&&"R"==b[1][0].toUpperCase()&&"Z"==b[2][0].toUpperCase(),q=m,r=b.length;r>q;q++){if(h.push(n=[]),o=b[q],g=o[0],g!=g.toUpperCase())switch(n[0]=g.toUpperCase(),n[0]){case"A":n[1]=o[1],n[2]=o[2],n[3]=o[3],n[4]=o[4],n[5]=o[5],n[6]=+o[6]+i,n[7]=+o[7]+j;break;case"V":n[1]=+o[1]+j;break;case"H":n[1]=+o[1]+i;break;case"R":for(var s=[i,j].concat(o.slice(1)),t=2,u=s.length;u>t;t++)s[t]=+s[t]+i,s[++t]=+s[t]+j;h.pop(),h=h.concat(G(s,p));break;case"O":h.pop(),s=x(i,j,o[1],o[2]),s.push(s[0]),h=h.concat(s);break;case"U":h.pop(),h=h.concat(x(i,j,o[1],o[2],o[3])),n=["U"].concat(h[h.length-1].slice(-2));break;case"M":k=+o[1]+i,l=+o[2]+j;default:for(t=1,u=o.length;u>t;t++)n[t]=+o[t]+(t%2?i:j)}else if("R"==g)s=[i,j].concat(o.slice(1)),h.pop(),h=h.concat(G(s,p)),n=["R"].concat(o.slice(-2));else if("O"==g)h.pop(),s=x(i,j,o[1],o[2]),s.push(s[0]),h=h.concat(s);else if("U"==g)h.pop(),h=h.concat(x(i,j,o[1],o[2],o[3])),n=["U"].concat(h[h.length-1].slice(-2));else for(var v=0,w=o.length;w>v;v++)n[v]=o[v];if(g=g.toUpperCase(),"O"!=g)switch(n[0]){case"Z":i=+k,j=+l;break;case"H":i=n[1];break;case"V":j=n[1];break;case"M":k=n[n.length-2],l=n[n.length-1];default:i=n[n.length-2],j=n[n.length-1]}}return h.toString=e,d.abs=f(h),h}function A(a,b,c,d){return[a,b,c,d,c,d]}function B(a,b,c,d,e,f){var g=1/3,h=2/3;return[g*a+h*c,g*b+h*d,g*e+h*c,g*f+h*d,e,f]}function C(b,c,d,e,f,g,h,i,j,k){var l,m=120*O/180,n=O/180*(+f||0),o=[],p=a._.cacher(function(a,b,c){var d=a*N.cos(c)-b*N.sin(c),e=a*N.sin(c)+b*N.cos(c);return{x:d,y:e}});if(k)y=k[0],z=k[1],w=k[2],x=k[3];else{l=p(b,c,-n),b=l.x,c=l.y,l=p(i,j,-n),i=l.x,j=l.y;var q=(N.cos(O/180*f),N.sin(O/180*f),(b-i)/2),r=(c-j)/2,s=q*q/(d*d)+r*r/(e*e);s>1&&(s=N.sqrt(s),d=s*d,e=s*e);var t=d*d,u=e*e,v=(g==h?-1:1)*N.sqrt(S((t*u-t*r*r-u*q*q)/(t*r*r+u*q*q))),w=v*d*r/e+(b+i)/2,x=v*-e*q/d+(c+j)/2,y=N.asin(((c-x)/e).toFixed(9)),z=N.asin(((j-x)/e).toFixed(9));y=w>b?O-y:y,z=w>i?O-z:z,0>y&&(y=2*O+y),0>z&&(z=2*O+z),h&&y>z&&(y-=2*O),!h&&z>y&&(z-=2*O)}var A=z-y;if(S(A)>m){var B=z,D=i,E=j;z=y+m*(h&&z>y?1:-1),i=w+d*N.cos(z),j=x+e*N.sin(z),o=C(i,j,d,e,f,0,h,D,E,[z,B,w,x])}A=z-y;var F=N.cos(y),G=N.sin(y),H=N.cos(z),I=N.sin(z),J=N.tan(A/4),K=4/3*d*J,L=4/3*e*J,M=[b,c],P=[b+K*G,c-L*F],Q=[i+K*I,j-L*H],R=[i,j];if(P[0]=2*M[0]-P[0],P[1]=2*M[1]-P[1],k)return[P,Q,R].concat(o);o=[P,Q,R].concat(o).join().split(",");for(var T=[],U=0,V=o.length;V>U;U++)T[U]=U%2?p(o[U-1],o[U],n).y:p(o[U],o[U+1],n).x;return T}function D(a,b,c,d,e,f,g,h){for(var i,j,k,l,m,n,o,p,q=[],r=[[],[]],s=0;2>s;++s)if(0==s?(j=6*a-12*c+6*e,i=-3*a+9*c-9*e+3*g,k=3*c-3*a):(j=6*b-12*d+6*f,i=-3*b+9*d-9*f+3*h,k=3*d-3*b),S(i)<1e-12){if(S(j)<1e-12)continue;l=-k/j,l>0&&1>l&&q.push(l)}else o=j*j-4*k*i,p=N.sqrt(o),0>o||(m=(-j+p)/(2*i),m>0&&1>m&&q.push(m),n=(-j-p)/(2*i),n>0&&1>n&&q.push(n));for(var t,u=q.length,v=u;u--;)l=q[u],t=1-l,r[0][u]=t*t*t*a+3*t*t*l*c+3*t*l*l*e+l*l*l*g,r[1][u]=t*t*t*b+3*t*t*l*d+3*t*l*l*f+l*l*l*h;return r[0][v]=a,r[1][v]=b,r[0][v+1]=g,r[1][v+1]=h,r[0].length=r[1].length=v+2,{min:{x:P.apply(0,r[0]),y:P.apply(0,r[1])},max:{x:Q.apply(0,r[0]),y:Q.apply(0,r[1])}}}function E(a,b){var d=!b&&c(a);if(!b&&d.curve)return f(d.curve);for(var e=z(a),g=b&&z(b),h={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},j=(function(a,b,c){var d,e;if(!a)return["C",b.x,b.y,b.x,b.y,b.x,b.y];switch(!(a[0]in{T:1,Q:1})&&(b.qx=b.qy=null),a[0]){case"M":b.X=a[1],b.Y=a[2];break;case"A":a=["C"].concat(C.apply(0,[b.x,b.y].concat(a.slice(1))));break;case"S":"C"==c||"S"==c?(d=2*b.x-b.bx,e=2*b.y-b.by):(d=b.x,e=b.y),a=["C",d,e].concat(a.slice(1));break;case"T":"Q"==c||"T"==c?(b.qx=2*b.x-b.qx,b.qy=2*b.y-b.qy):(b.qx=b.x,b.qy=b.y),a=["C"].concat(B(b.x,b.y,b.qx,b.qy,a[1],a[2]));break;case"Q":b.qx=a[1],b.qy=a[2],a=["C"].concat(B(b.x,b.y,a[1],a[2],a[3],a[4]));break;case"L":a=["C"].concat(A(b.x,b.y,a[1],a[2]));break;case"H":a=["C"].concat(A(b.x,b.y,a[1],b.y));break;case"V":a=["C"].concat(A(b.x,b.y,b.x,a[1]));break;case"Z":a=["C"].concat(A(b.x,b.y,b.X,b.Y))}return a}),k=function(a,b){if(a[b].length>7){a[b].shift();for(var c=a[b];c.length;)m[b]="A",g&&(n[b]="A"),a.splice(b++,0,["C"].concat(c.splice(0,6)));a.splice(b,1),r=Q(e.length,g&&g.length||0)}},l=function(a,b,c,d,f){a&&b&&"M"==a[f][0]&&"M"!=b[f][0]&&(b.splice(f,0,["M",d.x,d.y]),c.bx=0,c.by=0,c.x=a[f][1],c.y=a[f][2],r=Q(e.length,g&&g.length||0))},m=[],n=[],o="",p="",q=0,r=Q(e.length,g&&g.length||0);r>q;q++){e[q]&&(o=e[q][0]),"C"!=o&&(m[q]=o,q&&(p=m[q-1])),e[q]=j(e[q],h,p),"A"!=m[q]&&"C"==o&&(m[q]="C"),k(e,q),g&&(g[q]&&(o=g[q][0]),"C"!=o&&(n[q]=o,q&&(p=n[q-1])),g[q]=j(g[q],i,p),"A"!=n[q]&&"C"==o&&(n[q]="C"),k(g,q)),l(e,g,h,i,q),l(g,e,i,h,q);var s=e[q],t=g&&g[q],u=s.length,v=g&&t.length;h.x=s[u-2],h.y=s[u-1],h.bx=M(s[u-4])||h.x,h.by=M(s[u-3])||h.y,i.bx=g&&(M(t[v-4])||i.x),i.by=g&&(M(t[v-3])||i.y),i.x=g&&t[v-2],i.y=g&&t[v-1]}return g||(d.curve=f(e)),g?[e,g]:e}function F(a,b){if(!b)return a;var c,d,e,f,g,h,i;for(a=E(a),e=0,g=a.length;g>e;e++)for(i=a[e],f=1,h=i.length;h>f;f+=2)c=b.x(i[f],i[f+1]),d=b.y(i[f],i[f+1]),i[f]=c,i[f+1]=d;return a}function G(a,b){for(var c=[],d=0,e=a.length;e-2*!b>d;d+=2){var f=[{x:+a[d-2],y:+a[d-1]},{x:+a[d],y:+a[d+1]},{x:+a[d+2],y:+a[d+3]},{x:+a[d+4],y:+a[d+5]}];b?d?e-4==d?f[3]={x:+a[0],y:+a[1]}:e-2==d&&(f[2]={x:+a[0],y:+a[1]},f[3]={x:+a[2],y:+a[3]}):f[0]={x:+a[e-2],y:+a[e-1]}:e-4==d?f[3]=f[2]:d||(f[0]={x:+a[d],y:+a[d+1]}),c.push(["C",(-f[0].x+6*f[1].x+f[2].x)/6,(-f[0].y+6*f[1].y+f[2].y)/6,(f[1].x+6*f[2].x-f[3].x)/6,(f[1].y+6*f[2].y-f[3].y)/6,f[2].x,f[2].y])}return c}var H=b.prototype,I=a.is,J=a._.clone,K="hasOwnProperty",L=/,?([a-z]),?/gi,M=parseFloat,N=Math,O=N.PI,P=N.min,Q=N.max,R=N.pow,S=N.abs,T=h(1),U=h(),V=h(0,1),W=a._unit2px,X={path:function(a){return a.attr("path")},circle:function(a){var b=W(a);return x(b.cx,b.cy,b.r)},ellipse:function(a){var b=W(a);return x(b.cx||0,b.cy||0,b.rx,b.ry)},rect:function(a){var b=W(a);return w(b.x||0,b.y||0,b.width,b.height,b.rx,b.ry)},image:function(a){var b=W(a);return w(b.x||0,b.y||0,b.width,b.height)},line:function(a){return"M"+[a.attr("x1")||0,a.attr("y1")||0,a.attr("x2"),a.attr("y2")]},polyline:function(a){return"M"+a.attr("points")},polygon:function(a){return"M"+a.attr("points")+"z"},deflt:function(a){var b=a.node.getBBox();return w(b.x,b.y,b.width,b.height)}};a.path=c,a.path.getTotalLength=T,a.path.getPointAtLength=U,a.path.getSubpath=function(a,b,c){if(this.getTotalLength(a)-c<1e-6)return V(a,b).end;var d=V(a,c,1);return b?V(d,b).end:d},H.getTotalLength=function(){return this.node.getTotalLength?this.node.getTotalLength():void 0},H.getPointAtLength=function(a){return U(this.attr("d"),a)},H.getSubpath=function(b,c){return a.path.getSubpath(this.attr("d"),b,c)},a._.box=d,a.path.findDotsAtSegment=i,a.path.bezierBBox=j,a.path.isPointInsideBBox=k,a.path.isBBoxIntersect=l,a.path.intersection=r,a.path.intersectionNumber=s,a.path.isPointInside=u,a.path.getBBox=v,a.path.get=X,a.path.toRelative=y,a.path.toAbsolute=z,a.path.toCubic=E,a.path.map=F,a.path.toString=e,a.path.clone=f}),d.plugin(function(a){var d=Math.max,e=Math.min,f=function(a){if(this.items=[],this.bindings={},this.length=0,this.type="set",a)for(var b=0,c=a.length;c>b;b++)a[b]&&(this[this.items.length]=this.items[this.items.length]=a[b],this.length++)},g=f.prototype;g.push=function(){for(var a,b,c=0,d=arguments.length;d>c;c++)a=arguments[c],a&&(b=this.items.length,this[b]=this.items[b]=a,this.length++);return this},g.pop=function(){return this.length&&delete this[this.length--],this.items.pop()},g.forEach=function(a,b){for(var c=0,d=this.items.length;d>c;c++)if(a.call(b,this.items[c],c)===!1)return this;return this},g.animate=function(d,e,f,g){"function"!=typeof f||f.length||(g=f,f=c.linear),d instanceof a._.Animation&&(g=d.callback,f=d.easing,e=f.dur,d=d.attr);var h=arguments;if(a.is(d,"array")&&a.is(h[h.length-1],"array"))var i=!0;var j,k=function(){j?this.b=j:j=this.b},l=0,m=g&&function(){l++==this.length&&g.call(this)};return this.forEach(function(a,c){b.once("snap.animcreated."+a.id,k),i?h[c]&&a.animate.apply(a,h[c]):a.animate(d,e,f,m)})},g.remove=function(){for(;this.length;)this.pop().remove();return this},g.bind=function(a,b,c){var d={};if("function"==typeof b)this.bindings[a]=b;else{var e=c||a;this.bindings[a]=function(a){d[e]=a,b.attr(d)}}return this},g.attr=function(a){var b={};for(var c in a)this.bindings[c]?this.bindings[c](a[c]):b[c]=a[c];for(var d=0,e=this.items.length;e>d;d++)this.items[d].attr(b);return this},g.clear=function(){for(;this.length;)this.pop()},g.splice=function(a,b){a=0>a?d(this.length+a,0):a,b=d(0,e(this.length-a,b));var c,g=[],h=[],i=[];for(c=2;cc;c++)h.push(this[a+c]);for(;cc?i[c]:g[c-j];for(c=this.items.length=this.length-=b-j;this[c];)delete this[c++];return new f(h)},g.exclude=function(a){for(var b=0,c=this.length;c>b;b++)if(this[b]==a)return this.splice(b,1),!0;return!1},g.insertAfter=function(a){for(var b=this.items.length;b--;)this.items[b].insertAfter(a);return this},g.getBBox=function(){for(var a=[],b=[],c=[],f=[],g=this.items.length;g--;)if(!this.items[g].removed){var h=this.items[g].getBBox();a.push(h.x),b.push(h.y),c.push(h.x+h.width),f.push(h.y+h.height)}return a=e.apply(0,a),b=e.apply(0,b),c=d.apply(0,c),f=d.apply(0,f),{x:a,y:b,x2:c,y2:f,width:c-a,height:f-b,cx:a+(c-a)/2,cy:b+(f-b)/2}},g.clone=function(a){a=new f;for(var b=0,c=this.items.length;c>b;b++)a.push(this.items[b].clone());return a},g.toString=function(){return"Snap‘s set"},g.type="set",a.set=function(){var a=new f;return arguments.length&&a.push.apply(a,Array.prototype.slice.call(arguments,0)),a}}),d.plugin(function(a,c){function d(a){var b=a[0];switch(b.toLowerCase()){case"t":return[b,0,0];case"m":return[b,1,0,0,1,0,0];case"r":return 4==a.length?[b,0,a[2],a[3]]:[b,0];case"s":return 5==a.length?[b,1,1,a[3],a[4]]:3==a.length?[b,1,1]:[b,1]}}function e(b,c,e){c=m(c).replace(/\.{3}|\u2026/g,b),b=a.parseTransformString(b)||[],c=a.parseTransformString(c)||[];for(var f,g,h,k,l=Math.max(b.length,c.length),n=[],o=[],p=0;l>p;p++){if(h=b[p]||d(c[p]),k=c[p]||d(h),h[0]!=k[0]||"r"==h[0].toLowerCase()&&(h[2]!=k[2]||h[3]!=k[3])||"s"==h[0].toLowerCase()&&(h[3]!=k[3]||h[4]!=k[4])){b=a._.transform2matrix(b,e()),c=a._.transform2matrix(c,e()),n=[["m",b.a,b.b,b.c,b.d,b.e,b.f]],o=[["m",c.a,c.b,c.c,c.d,c.e,c.f]];break}for(n[p]=[],o[p]=[],f=0,g=Math.max(h.length,k.length);g>f;f++)f in h&&(n[p][f]=h[f]),f in k&&(o[p][f]=k[f])}return{from:j(n),to:j(o),f:i(n)}}function f(a){return a}function g(a){return function(b){return+b.toFixed(3)+a}}function h(b){return a.rgb(b[0],b[1],b[2])}function i(a){var b,c,d,e,f,g,h=0,i=[];for(b=0,c=a.length;c>b;b++){for(f="[",g=['"'+a[b][0]+'"'],d=1,e=a[b].length;e>d;d++)g[d]="val["+h++ +"]"; 20 | f+=g+"]",i[b]=f}return Function("val","return Snap.path.toString.call(["+i+"])")}function j(a){for(var b=[],c=0,d=a.length;d>c;c++)for(var e=1,f=a[c].length;f>e;e++)b.push(a[c][e]);return b}var k={},l=/[a-z]+$/i,m=String;k.stroke=k.fill="colour",c.prototype.equal=function(a,c){return b("snap.util.equal",this,a,c).firstDefined()},b.on("snap.util.equal",function(b,c){var d,n,o=m(this.attr(b)||""),p=this;if(o==+o&&c==+c)return{from:+o,to:+c,f:f};if("colour"==k[b])return d=a.color(o),n=a.color(c),{from:[d.r,d.g,d.b,d.opacity],to:[n.r,n.g,n.b,n.opacity],f:h};if("transform"==b||"gradientTransform"==b||"patternTransform"==b)return c instanceof a.Matrix&&(c=c.toTransformString()),a._.rgTransform.test(c)||(c=a._.svgTransform2string(c)),e(o,c,function(){return p.getBBox(1)});if("d"==b||"path"==b)return d=a.path.toCubic(o,c),{from:j(d[0]),to:j(d[1]),f:i(d[0])};if("points"==b)return d=m(o).split(a._.separator),n=m(c).split(a._.separator),{from:d,to:n,f:function(a){return a}};aUnit=o.match(l);var q=m(c).match(l);return aUnit&&aUnit==q?{from:parseFloat(o),to:parseFloat(c),f:g(aUnit)}:{from:this.asPX(b),to:this.asPX(b,c),f:f}})}),d.plugin(function(a,c,d,e){for(var f=c.prototype,g="hasOwnProperty",h=("createTouch"in e.doc),i=["click","dblclick","mousedown","mousemove","mouseout","mouseover","mouseup","touchstart","touchmove","touchend","touchcancel"],j={mousedown:"touchstart",mousemove:"touchmove",mouseup:"touchend"},k=(function(a,b){var c="y"==a?"scrollTop":"scrollLeft",d=b&&b.node?b.node.ownerDocument:e.doc;return d[c in d.documentElement?"documentElement":"body"][c]}),l=function(){this.returnValue=!1},m=function(){return this.originalEvent.preventDefault()},n=function(){this.cancelBubble=!0},o=function(){return this.originalEvent.stopPropagation()},p=function(){return e.doc.addEventListener?function(a,b,c,d){var e=h&&j[b]?j[b]:b,f=function(e){var f=k("y",d),i=k("x",d);if(h&&j[g](b))for(var l=0,n=e.targetTouches&&e.targetTouches.length;n>l;l++)if(e.targetTouches[l].target==a||a.contains(e.targetTouches[l].target)){var p=e;e=e.targetTouches[l],e.originalEvent=p,e.preventDefault=m,e.stopPropagation=o;break}var q=e.clientX+i,r=e.clientY+f;return c.call(d,e,q,r)};return b!==e&&a.addEventListener(b,f,!1),a.addEventListener(e,f,!1),function(){return b!==e&&a.removeEventListener(b,f,!1),a.removeEventListener(e,f,!1),!0}}:e.doc.attachEvent?function(a,b,c,d){var e=function(a){a=a||d.node.ownerDocument.window.event;var b=k("y",d),e=k("x",d),f=a.clientX+e,g=a.clientY+b;return a.preventDefault=a.preventDefault||l,a.stopPropagation=a.stopPropagation||n,c.call(d,a,f,g)};a.attachEvent("on"+b,e);var f=function(){return a.detachEvent("on"+b,e),!0};return f}:void 0}(),q=[],r=function(a){for(var c,d=a.clientX,e=a.clientY,f=k("y"),g=k("x"),i=q.length;i--;){if(c=q[i],h){for(var j,l=a.touches&&a.touches.length;l--;)if(j=a.touches[l],j.identifier==c.el._drag.id||c.el.node.contains(j.target)){d=j.clientX,e=j.clientY,(a.originalEvent?a.originalEvent:a).preventDefault();break}}else a.preventDefault();{var m=c.el.node;m.nextSibling,m.parentNode,m.style.display}d+=g,e+=f,b("snap.drag.move."+c.el.id,c.move_scope||c.el,d-c.el._drag.x,e-c.el._drag.y,d,e,a)}},s=function(c){a.unmousemove(r).unmouseup(s);for(var d,e=q.length;e--;)d=q[e],d.el._drag={},b("snap.drag.end."+d.el.id,d.end_scope||d.start_scope||d.move_scope||d.el,c);q=[]},t=i.length;t--;)!function(b){a[b]=f[b]=function(c,d){return a.is(c,"function")&&(this.events=this.events||[],this.events.push({name:b,f:c,unbind:p(this.node||document,b,c,d||this)})),this},a["un"+b]=f["un"+b]=function(a){for(var c=this.events||[],d=c.length;d--;)if(c[d].name==b&&(c[d].f==a||!a))return c[d].unbind(),c.splice(d,1),!c.length&&delete this.events,this;return this}}(i[t]);f.hover=function(a,b,c,d){return this.mouseover(a,c).mouseout(b,d||c)},f.unhover=function(a,b){return this.unmouseover(a).unmouseout(b)};var u=[];f.drag=function(c,d,e,f,g,h){function i(i,j,k){(i.originalEvent||i).preventDefault(),this._drag.x=j,this._drag.y=k,this._drag.id=i.identifier,!q.length&&a.mousemove(r).mouseup(s),q.push({el:this,move_scope:f,start_scope:g,end_scope:h}),d&&b.on("snap.drag.start."+this.id,d),c&&b.on("snap.drag.move."+this.id,c),e&&b.on("snap.drag.end."+this.id,e),b("snap.drag.start."+this.id,g||f||this,j,k,i)}if(!arguments.length){var j;return this.drag(function(a,b){this.attr({transform:j+(j?"T":"t")+[a,b]})},function(){j=this.transform().local})}return this._drag={},u.push({el:this,start:i}),this.mousedown(i),this},f.undrag=function(){for(var c=u.length;c--;)u[c].el==this&&(this.unmousedown(u[c].start),u.splice(c,1),b.unbind("snap.drag.*."+this.id));return!u.length&&a.unmousemove(r).unmouseup(s),this}}),d.plugin(function(a,c,d){var e=(c.prototype,d.prototype),f=/^\s*url$(.+)$/,g=String,h=a._.$;a.filter={},e.filter=function(b){var d=this;"svg"!=d.type&&(d=d.paper);var e=a.parse(g(b)),f=a._.id(),i=(d.node.offsetWidth,d.node.offsetHeight,h("filter"));return h(i,{id:f,filterUnits:"userSpaceOnUse"}),i.appendChild(e.node),d.defs.appendChild(i),new c(i)},b.on("snap.util.getattr.filter",function(){b.stop();var c=h(this.node,"filter");if(c){var d=g(c).match(f);return d&&a.select(d[1])}}),b.on("snap.util.attr.filter",function(d){if(d instanceof c&&"filter"==d.type){b.stop();var e=d.node.id;e||(h(d.node,{id:d.id}),e=d.id),h(this.node,{filter:a.url(e)})}d&&"none"!=d||(b.stop(),this.node.removeAttribute("filter"))}),a.filter.blur=function(b,c){null==b&&(b=2);var d=null==c?b:[b,c];return a.format('',{def:d})},a.filter.blur.toString=function(){return this()},a.filter.shadow=function(b,c,d,e,f){return"string"==typeof d&&(e=d,f=e,d=4),"string"!=typeof e&&(f=e,e="#000"),e=e||"#000",null==d&&(d=4),null==f&&(f=1),null==b&&(b=0,c=2),null==c&&(c=b),e=a.color(e),a.format('',{color:e,dx:b,dy:c,blur:d,opacity:f})},a.filter.shadow.toString=function(){return this()},a.filter.grayscale=function(b){return null==b&&(b=1),a.format('',{a:.2126+.7874*(1-b),b:.7152-.7152*(1-b),c:.0722-.0722*(1-b),d:.2126-.2126*(1-b),e:.7152+.2848*(1-b),f:.0722-.0722*(1-b),g:.2126-.2126*(1-b),h:.0722+.9278*(1-b)})},a.filter.grayscale.toString=function(){return this()},a.filter.sepia=function(b){return null==b&&(b=1),a.format('',{a:.393+.607*(1-b),b:.769-.769*(1-b),c:.189-.189*(1-b),d:.349-.349*(1-b),e:.686+.314*(1-b),f:.168-.168*(1-b),g:.272-.272*(1-b),h:.534-.534*(1-b),i:.131+.869*(1-b)})},a.filter.sepia.toString=function(){return this()},a.filter.saturate=function(b){return null==b&&(b=1),a.format('',{amount:1-b})},a.filter.saturate.toString=function(){return this()},a.filter.hueRotate=function(b){return b=b||0,a.format('',{angle:b})},a.filter.hueRotate.toString=function(){return this()},a.filter.invert=function(b){return null==b&&(b=1),a.format('',{amount:b,amount2:1-b})},a.filter.invert.toString=function(){return this()},a.filter.brightness=function(b){return null==b&&(b=1),a.format('',{amount:b})},a.filter.brightness.toString=function(){return this()},a.filter.contrast=function(b){return null==b&&(b=1),a.format('',{amount:b,amount2:.5-b/2})},a.filter.contrast.toString=function(){return this()}}),d}); -------------------------------------------------------------------------------- /sideslide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Off-Canvas Menu Effects - Side Slide 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |

22 | 35 | 36 |

37 |

38 |

39 |

40 | Previous Demo 41 | Back to the Codrops Article 42 |

43 |

Off-Canvas Menu Effects Showing (off-canvas) menus stylishly

44 | 55 |

56 | 57 | 68 |

69 |

70 |

71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /topexpand.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Off-Canvas Menu Effects - Top Expand 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |

22 | 34 | 35 |

36 |

37 |

38 |

39 | Previous Demo 40 | Back to the Codrops Article 41 |

42 |

Off-Canvas Menu Effects Showing (off-canvas) menus stylishly

43 | 54 |

As seen in the Morphing Buttons Concept

55 |

56 | 57 | 68 |

69 |

70 |

71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /wave.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Off-Canvas Menu Effects - Wave 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 |

23 | 41 | 42 |

43 |

44 |

45 |

46 | Previous Demo 47 | Back to the Codrops Article 48 |

49 |

Off-Canvas Menu Effects Showing (off-canvas) menus stylishly

50 | 61 |

62 | 63 | 74 |

75 |

76 |

77 | 78 | 79 | 80 | --------------------------------------------------------------------------------

Transitions for Off-Canvas Navigations

Perspective Page View Navigation

Transitions for Off-Canvas Navigations

Perspective Page View Navigation

Transitions for Off-Canvas Navigations

Perspective Page View Navigation

Transitions for Off-Canvas Navigations

Perspective Page View Navigation

Transitions for Off-Canvas Navigations

Perspective Page View Navigation

Transitions for Off-Canvas Navigations

Perspective Page View Navigation

Transitions for Off-Canvas Navigations

Perspective Page View Navigation

Transitions for Off-Canvas Navigations

Perspective Page View Navigation

Transitions for Off-Canvas Navigations

Perspective Page View Navigation