├── img └── clouds.jpg ├── js └── site.js ├── LICENSE ├── index.html ├── css └── style.css └── README.md /img/clouds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agilie/AnimatedToggleMenu/HEAD/img/clouds.jpg -------------------------------------------------------------------------------- /js/site.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | $('.hamburger-menu').click(function (e) { 4 | e.preventDefault(); 5 | if ($(this).hasClass('active')){ 6 | $(this).removeClass('active'); 7 | $('.menu-overlay').fadeToggle( 'fast', 'linear' ); 8 | $('.menu .menu-list').slideToggle( 'slow', 'swing' ); 9 | $('.hamburger-menu-wrapper').toggleClass('bounce-effect'); 10 | } else { 11 | $(this).addClass('active'); 12 | $('.menu-overlay').fadeToggle( 'fast', 'linear' ); 13 | $('.menu .menu-list').slideToggle( 'slow', 'swing' ); 14 | $('.hamburger-menu-wrapper').toggleClass('bounce-effect'); 15 | } 16 | }) 17 | })(); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Agilie Team 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Menu 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* Base layout */ 2 | 3 | body,html{ 4 | margin: 0; 5 | padding: 0; 6 | } 7 | html{ 8 | height: 100%; 9 | } 10 | body{ 11 | font-family: 'Open Sans', sans-serif; 12 | font-size: 12px; 13 | color: #FFFFFF; 14 | letter-spacing: 0.17px; 15 | line-height: 22px; 16 | min-height: 100%; 17 | background-image: url("../img/clouds.jpg"); 18 | background-repeat: no-repeat; 19 | background-position: center top; 20 | } 21 | 22 | 23 | /* MENU */ 24 | .hamburger-menu-wrapper{ 25 | margin-top: 40px; 26 | background: #323232; 27 | padding: 10px; 28 | display: inline-block; 29 | } 30 | .hamburger-menu-wrapper.bounce-effect{ 31 | animation: bounce 0.3s ease 1; 32 | } 33 | .menu-overlay { 34 | transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 35 | display: none; 36 | position: absolute; 37 | top: 0; 38 | bottom: 0; 39 | right: 0; 40 | left: 0; 41 | background: rgba(0, 0, 0, 0.6); 42 | z-index: 1111; 43 | } 44 | .menu{ 45 | position: relative; 46 | min-width: 220px; 47 | text-align: center; 48 | } 49 | .hamburger-menu { 50 | border: 0; 51 | margin: 0 auto; 52 | display: block; 53 | position: relative; 54 | overflow: hidden; 55 | padding: 0; 56 | width: 36px; 57 | height: 36px; 58 | font-size: 0; 59 | text-indent: -9999px; 60 | cursor: pointer; 61 | z-index: 9999; 62 | cursor: pointer; 63 | background: transparent; 64 | } 65 | .menu-list{ 66 | display: none; 67 | position: absolute; 68 | top: calc(100% + 40px); 69 | width: 100%; 70 | text-align: center; 71 | z-index: 9999; 72 | } 73 | .menu-list a{ 74 | color: #C6D2D6; 75 | text-decoration: none; 76 | font-size: 18px; 77 | display: inline-block; 78 | margin: 15px 0; 79 | transition: all 0.5s ease; 80 | } 81 | .menu-list a:hover{ 82 | color: #02D5FD; 83 | } 84 | .hamburger-menu:focus { 85 | outline: none; 86 | } 87 | .hamburger-menu span { 88 | display: block; 89 | position: absolute; 90 | top: 17px; 91 | left: 5px; 92 | right: 5px; 93 | height: 2px; 94 | background: #02D5FD; 95 | } 96 | 97 | .hamburger-menu span:before, 98 | .hamburger-menu span:after { 99 | position: absolute; 100 | display: block; 101 | left: 0; 102 | width: 100%; 103 | height: 2px; 104 | background-color: #02D5FD; 105 | content: ""; 106 | } 107 | 108 | .hamburger-menu span:before { 109 | top: -7px; 110 | } 111 | 112 | .hamburger-menu span:after { 113 | bottom: -7px; 114 | } 115 | 116 | .hamburger-menu span:before, 117 | .hamburger-menu span:after { 118 | transition-duration: 0.3s, 0.3s; 119 | transition-delay: 0.3s, 0s; 120 | } 121 | 122 | .hamburger-menu span:before { 123 | transition-property: top, transform; 124 | } 125 | 126 | .hamburger-menu span::after { 127 | transition-property: bottom, transform; 128 | } 129 | 130 | 131 | .hamburger-menu.active span { 132 | background: none; 133 | } 134 | .hamburger-menu.active span:before { 135 | top: 0; 136 | transform: rotate(225deg); 137 | } 138 | 139 | .hamburger-menu.active span:after { 140 | bottom: 0; 141 | transform: rotate(135deg); 142 | } 143 | 144 | .hamburger-menu.active span:before, 145 | .hamburger-menu.active span:after { 146 | transition-delay: 0s, 0.3s; 147 | } 148 | 149 | 150 | @keyframes bounce { 151 | 0%{ 152 | transform: rotate(0); 153 | } 154 | 45%{ 155 | transform: rotate(15deg); 156 | } 157 | 90%{ 158 | transform: rotate(-7deg); 159 | } 160 | 100%{ 161 | transform: rotate(0); 162 | } 163 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Check this project on [Dribbble](https://dribbble.com/shots/2134492-Animated-Menu-Icon). 2 | 3 | [![License](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/agilie/Rails-Application-Template) 4 | 5 | # Animated Toggle Menu 6 | 7 | Hi, guys! 8 | 9 | We’re happy to share our new free open-source Animated Toggle Menu that can be helpful for creating websites. It’s lightweight, easy-to-use and requires minimum lines of code. 10 | 11 | Feel free to take full advantage of it during the web site development. 12 | 13 | ![Animated Toggle Menu Preview](https://cdn.dribbble.com/users/739323/screenshots/2134492/yes_2.gif) 14 | 15 | (concept image) 16 | 17 | ## How to use? 18 | 19 | Animated Toggle Menu uses css3 animations, as well as the jQuery library. 20 | To take the full use of the menu, add the following block after opening the `` tag: 21 | ```css 22 | 23 | ``` 24 | In order to add the menu itself, you need this code: 25 | ```javascript 26 | 39 | ``` 40 | Add CSS: 41 | ```css 42 | /* Base layout */ 43 | 44 | body,html{ 45 | margin: 0; 46 | padding: 0; 47 | } 48 | html{ 49 | height: 100%; 50 | } 51 | body{ 52 | font-family: 'Open Sans', sans-serif; 53 | font-size: 12px; 54 | color: #FFFFFF; 55 | letter-spacing: 0.17px; 56 | line-height: 22px; 57 | min-height: 100%; 58 | background-image: url("../img/clouds.jpg"); 59 | background-repeat: no-repeat; 60 | background-position: center top; 61 | } 62 | 63 | 64 | /* MENU */ 65 | .hamburger-menu-wrapper{ 66 | margin-top: 40px; 67 | background: #323232; 68 | padding: 10px; 69 | display: inline-block; 70 | } 71 | .hamburger-menu-wrapper.bounce-effect{ 72 | animation: bounce 0.3s ease 1; 73 | } 74 | .menu-overlay { 75 | transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 76 | display: none; 77 | position: absolute; 78 | top: 0; 79 | bottom: 0; 80 | right: 0; 81 | left: 0; 82 | background: rgba(0, 0, 0, 0.6); 83 | z-index: 1111; 84 | } 85 | .menu{ 86 | position: relative; 87 | min-width: 220px; 88 | text-align: center; 89 | } 90 | .hamburger-menu { 91 | border: 0; 92 | margin: 0 auto; 93 | display: block; 94 | position: relative; 95 | overflow: hidden; 96 | padding: 0; 97 | width: 36px; 98 | height: 36px; 99 | font-size: 0; 100 | text-indent: -9999px; 101 | cursor: pointer; 102 | z-index: 9999; 103 | cursor: pointer; 104 | background: transparent; 105 | } 106 | .menu-list{ 107 | display: none; 108 | position: absolute; 109 | top: calc(100% + 40px); 110 | width: 100%; 111 | text-align: center; 112 | z-index: 9999; 113 | } 114 | .menu-list a{ 115 | color: #C6D2D6; 116 | text-decoration: none; 117 | font-size: 18px; 118 | display: inline-block; 119 | margin: 15px 0; 120 | transition: all 0.5s ease; 121 | } 122 | .menu-list a:hover{ 123 | color: #02D5FD; 124 | } 125 | .hamburger-menu:focus { 126 | outline: none; 127 | } 128 | .hamburger-menu span { 129 | display: block; 130 | position: absolute; 131 | top: 17px; 132 | left: 5px; 133 | right: 5px; 134 | height: 2px; 135 | background: #02D5FD; 136 | } 137 | 138 | .hamburger-menu span:before, 139 | .hamburger-menu span:after { 140 | position: absolute; 141 | display: block; 142 | left: 0; 143 | width: 100%; 144 | height: 2px; 145 | background-color: #02D5FD; 146 | content: ""; 147 | } 148 | 149 | .hamburger-menu span:before { 150 | top: -7px; 151 | } 152 | 153 | .hamburger-menu span:after { 154 | bottom: -7px; 155 | } 156 | 157 | .hamburger-menu span:before, 158 | .hamburger-menu span:after { 159 | transition-duration: 0.3s, 0.3s; 160 | transition-delay: 0.3s, 0s; 161 | } 162 | 163 | .hamburger-menu span:before { 164 | transition-property: top, transform; 165 | } 166 | 167 | .hamburger-menu span::after { 168 | transition-property: bottom, transform; 169 | } 170 | 171 | 172 | .hamburger-menu.active span { 173 | background: none; 174 | } 175 | .hamburger-menu.active span:before { 176 | top: 0; 177 | transform: rotate(225deg); 178 | } 179 | 180 | .hamburger-menu.active span:after { 181 | bottom: 0; 182 | transform: rotate(135deg); 183 | } 184 | 185 | .hamburger-menu.active span:before, 186 | .hamburger-menu.active span:after { 187 | transition-delay: 0s, 0.3s; 188 | } 189 | 190 | 191 | @keyframes bounce { 192 | 0%{ 193 | transform: rotate(0); 194 | } 195 | 45%{ 196 | transform: rotate(15deg); 197 | } 198 | 90%{ 199 | transform: rotate(-7deg); 200 | } 201 | 100%{ 202 | transform: rotate(0); 203 | } 204 | } 205 | ``` 206 | 207 | And, of course, don’t forget to connect [jQuery library](https://cdnjs.com/libraries/jquery/) 208 | 209 | 210 | ## Demo 211 | [https://agilie.github.io/AnimatedToggleMenu/](https://agilie.github.io/AnimatedToggleMenu/) 212 | 213 | ## Troubleshooting 214 | Problems? Check the Issues block to find the solution or create an [new issue](https://github.com/agilie/AnimatedToggleMenu/issues) that we will fix asap. Feel free to contribute. 215 | 216 | ## Author 217 | This template is open-sourced by [Agilie Team](https://agilie.com/en/index) info@agilie.com 218 | 219 | ## Contributors 220 | [Tatiana Kushnir](https://github.com/tatiana-kushnir-89) 221 | 222 | ## Contact us 223 | If you have any questions, suggestions or just need a help with web or mobile development, please email us at . You can ask us anything from basic to complex questions. 224 | 225 | We will continue publishing new open-source projects. Stay with us, more updates will follow! 226 | 227 | ## License 228 | 229 | The MIT License (MIT) Copyright © 2017 [Agilie Team](https://agilie.com/en/index) 230 | 231 | --------------------------------------------------------------------------------