{"id":19162362,"url":"https://github.com/agilie/animatedtogglemenu","last_synced_at":"2025-08-27T19:03:44.443Z","repository":{"id":71905173,"uuid":"94452383","full_name":"agilie/AnimatedToggleMenu","owner":"agilie","description":"The Animated Toggle Menu is helpful for creating websites. It’s lightweight, easy-to-use and requires minimum lines of code.","archived":false,"fork":false,"pushed_at":"2017-06-19T11:59:34.000Z","size":268,"stargazers_count":28,"open_issues_count":0,"forks_count":2,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-19T21:24:48.399Z","etag":null,"topics":["animation","css","css3","css3-animations","hamburger","hamburger-menu","html","html5","javascript","jquery","menu","toggle","toggle-buttons"],"latest_commit_sha":null,"homepage":"https://agilie.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agilie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-15T15:19:48.000Z","updated_at":"2023-06-17T02:51:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"7ccb553c-1aba-433c-9649-65f04bbaf39b","html_url":"https://github.com/agilie/AnimatedToggleMenu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilie%2FAnimatedToggleMenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilie%2FAnimatedToggleMenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilie%2FAnimatedToggleMenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilie%2FAnimatedToggleMenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agilie","download_url":"https://codeload.github.com/agilie/AnimatedToggleMenu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252862053,"owners_count":21815787,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css","css3","css3-animations","hamburger","hamburger-menu","html","html5","javascript","jquery","menu","toggle","toggle-buttons"],"created_at":"2024-11-09T09:10:32.367Z","updated_at":"2025-05-07T10:42:19.989Z","avatar_url":"https://github.com/agilie.png","language":"CSS","readme":"Check this project on [Dribbble](https://dribbble.com/shots/2134492-Animated-Menu-Icon).\n\n[![License](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/agilie/Rails-Application-Template)\n\n# Animated Toggle Menu\n\nHi, guys!\n\nWe’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.\n\nFeel free to take full advantage of it during the web site development.\n\n![Animated Toggle Menu Preview](https://cdn.dribbble.com/users/739323/screenshots/2134492/yes_2.gif)\n\n(concept image)\n\n## How to use?\n\nAnimated Toggle Menu uses css3 animations, as well as the jQuery library.\nTo take the full use of the menu, add the following block after opening the  `\u003cbody\u003e` tag:\n```css\n\u003cdiv class=“menu-overlay”\u003e\u003c/div\u003e\n```\nIn order to add the menu itself, you need this code:\n```javascript\n\u003cdiv class=\"menu\"\u003e \n    \u003cdiv class=\"hamburger-menu-wrapper\"\u003e\n        \u003cbutton class=\"hamburger-menu\"\u003e\n            \u003cspan\u003etoggle menu\u003c/span\u003e\n        \u003c/button\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"menu-list\"\u003e\n        \u003ca href=\"#\"\u003eLink 1\u003c/a\u003e\u003cbr\u003e\n        \u003ca href=\"#\"\u003eLink 2\u003c/a\u003e\u003cbr\u003e\n        \u003ca href=\"#\"\u003eLink 3\u003c/a\u003e\u003cbr\u003e\n        \u003ca href=\"#\"\u003eLink 4\u003c/a\u003e\u003cbr\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\nAdd CSS:\n```css\n/* Base layout */\n\nbody,html{\n    margin: 0;\n    padding: 0;\n}\nhtml{\n    height: 100%;\n}\nbody{\n    font-family: 'Open Sans', sans-serif;\n    font-size: 12px;\n    color: #FFFFFF;\n    letter-spacing: 0.17px;\n    line-height: 22px;\n    min-height: 100%;\n    background-image: url(\"../img/clouds.jpg\");\n    background-repeat: no-repeat;\n    background-position: center top;\n}\n\n\n/* MENU */\n.hamburger-menu-wrapper{\n    margin-top: 40px;\n    background: #323232;\n    padding: 10px;\n    display: inline-block;\n}\n.hamburger-menu-wrapper.bounce-effect{\n    animation: bounce 0.3s ease 1;\n}\n.menu-overlay {\n    transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);\n    display: none;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    background: rgba(0, 0, 0, 0.6);\n    z-index: 1111;\n}\n.menu{\n    position: relative;\n    min-width: 220px;\n    text-align: center;\n}\n.hamburger-menu {\n    border: 0;\n    margin: 0 auto;\n    display: block;\n    position: relative;\n    overflow: hidden;\n    padding: 0;\n    width: 36px;\n    height: 36px;\n    font-size: 0;\n    text-indent: -9999px;\n    cursor: pointer;\n    z-index: 9999;\n    cursor: pointer;\n    background: transparent;\n}\n.menu-list{\n    display: none;\n    position: absolute;\n    top: calc(100% + 40px);\n    width: 100%;\n    text-align: center;\n    z-index: 9999;\n}\n.menu-list a{\n    color: #C6D2D6;\n    text-decoration: none;\n    font-size: 18px;\n    display: inline-block;\n    margin: 15px 0;\n    transition: all 0.5s ease;\n}\n.menu-list a:hover{\n    color: #02D5FD;\n}\n.hamburger-menu:focus {\n    outline: none;\n}\n.hamburger-menu span {\n    display: block;\n    position: absolute;\n    top: 17px;\n    left: 5px;\n    right: 5px;\n    height: 2px;\n    background: #02D5FD;\n}\n\n.hamburger-menu span:before,\n.hamburger-menu span:after {\n    position: absolute;\n    display: block;\n    left: 0;\n    width: 100%;\n    height: 2px;\n    background-color: #02D5FD;\n    content: \"\";\n}\n\n.hamburger-menu span:before {\n    top: -7px;\n}\n\n.hamburger-menu span:after {\n    bottom: -7px;\n}\n\n.hamburger-menu span:before,\n.hamburger-menu span:after {\n    transition-duration: 0.3s, 0.3s;\n    transition-delay: 0.3s, 0s;\n}\n\n.hamburger-menu span:before {\n    transition-property: top, transform;\n}\n\n.hamburger-menu span::after {\n    transition-property: bottom, transform;\n}\n\n\n.hamburger-menu.active span {\n    background: none;\n}\n.hamburger-menu.active span:before {\n    top: 0;\n    transform: rotate(225deg);\n}\n\n.hamburger-menu.active span:after {\n    bottom: 0;\n    transform: rotate(135deg);\n}\n\n.hamburger-menu.active span:before,\n.hamburger-menu.active span:after {\n    transition-delay: 0s, 0.3s;\n}\n\n\n@keyframes bounce {\n    0%{\n        transform: rotate(0);\n    }\n    45%{\n        transform: rotate(15deg);\n    }\n    90%{\n        transform: rotate(-7deg);\n    }\n    100%{\n        transform: rotate(0);\n    }\n}\n```\n\nAnd, of course, don’t forget to connect [jQuery library](https://cdnjs.com/libraries/jquery/)\n\n\n## Demo\n[https://agilie.github.io/AnimatedToggleMenu/](https://agilie.github.io/AnimatedToggleMenu/)\n\n## Troubleshooting\nProblems? 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.\n\n## Author\nThis template is open-sourced by [Agilie Team](https://agilie.com/en/index) \u003ca href=\"mailto:info@agilie.com\"\u003einfo@agilie.com\u003c/a\u003e\n\n## Contributors\n[Tatiana Kushnir](https://github.com/tatiana-kushnir-89)\n\n## Contact us\nIf you have any questions, suggestions or just need a help with web or mobile development, please email us at \u003cweb@agilie.com\u003e. You can ask us anything from basic to complex questions.\n\nWe will continue publishing new open-source projects. Stay with us, more updates will follow!\n\n## License\n\nThe \u003ca href=\"/agilie/Bouncing-Carousel/blob/master/LICENSE.MD\"\u003eMIT\u003c/a\u003e License (MIT) Copyright © 2017 [Agilie Team](https://agilie.com/en/index)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagilie%2Fanimatedtogglemenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagilie%2Fanimatedtogglemenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagilie%2Fanimatedtogglemenu/lists"}