├── assets ├── icon │ ├── alarm.png │ ├── calendar.png │ ├── earth.png │ ├── follower.png │ ├── gps.png │ ├── me.png │ ├── music.png │ ├── plus.png │ └── travel.png └── img │ ├── me.png │ └── meColor.png ├── css └── main.css ├── index.html └── js └── main.js /assets/icon/alarm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bastndev/Menu-Expandible/5a62534e6401984615c3aabbe53149211c773763/assets/icon/alarm.png -------------------------------------------------------------------------------- /assets/icon/calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bastndev/Menu-Expandible/5a62534e6401984615c3aabbe53149211c773763/assets/icon/calendar.png -------------------------------------------------------------------------------- /assets/icon/earth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bastndev/Menu-Expandible/5a62534e6401984615c3aabbe53149211c773763/assets/icon/earth.png -------------------------------------------------------------------------------- /assets/icon/follower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bastndev/Menu-Expandible/5a62534e6401984615c3aabbe53149211c773763/assets/icon/follower.png -------------------------------------------------------------------------------- /assets/icon/gps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bastndev/Menu-Expandible/5a62534e6401984615c3aabbe53149211c773763/assets/icon/gps.png -------------------------------------------------------------------------------- /assets/icon/me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bastndev/Menu-Expandible/5a62534e6401984615c3aabbe53149211c773763/assets/icon/me.png -------------------------------------------------------------------------------- /assets/icon/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bastndev/Menu-Expandible/5a62534e6401984615c3aabbe53149211c773763/assets/icon/music.png -------------------------------------------------------------------------------- /assets/icon/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bastndev/Menu-Expandible/5a62534e6401984615c3aabbe53149211c773763/assets/icon/plus.png -------------------------------------------------------------------------------- /assets/icon/travel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bastndev/Menu-Expandible/5a62534e6401984615c3aabbe53149211c773763/assets/icon/travel.png -------------------------------------------------------------------------------- /assets/img/me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bastndev/Menu-Expandible/5a62534e6401984615c3aabbe53149211c773763/assets/img/me.png -------------------------------------------------------------------------------- /assets/img/meColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bastndev/Menu-Expandible/5a62534e6401984615c3aabbe53149211c773763/assets/img/meColor.png -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | *, *::before, *::after {box-sizing: border-box;} 2 | 3 | html,body{ 4 | margin: 0; 5 | height: 100%; 6 | } 7 | 8 | body{ 9 | background-color: #1e1f23; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | 14 | } 15 | /* Size and Background */ 16 | .toggle img 17 | { 18 | width: 70px; 19 | cursor: pointer; 20 | } 21 | .menu li img 22 | { 23 | width: 30px; 24 | 25 | } 26 | /* Video - Tutorial */ 27 | .menu 28 | { 29 | 30 | position: relative; 31 | width: 240px; 32 | height: 235px; 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | } 37 | .menu li{ 38 | position: absolute; 39 | left: 0; 40 | list-style: none; 41 | transition: 0.5s; 42 | transition-delay: calc(0.1s * var(--i)); 43 | transform-origin: 140px; 44 | transform: rotate(0deg) translateX(110px); 45 | } 46 | /* Efectoo de animacion */ 47 | .menu.active li 48 | { 49 | 50 | transform: rotate(calc(360deg / 8 * var(--i)) ) translateX(0px); 51 | } 52 | .menu li a 53 | { 54 | display: flex; 55 | justify-content: center; 56 | align-items: center; 57 | width: 60px ; 58 | height: 60px; 59 | color: var(--clr); 60 | border: 2px solid var(--clr); 61 | border-radius: 50%; 62 | font-size: 1.5em; 63 | transform: rotate(calc(360deg / -8 * var(--i))); 64 | transition: 1s; 65 | } 66 | .menu li a:hover{ 67 | transition: 0; 68 | background: var(--clr); 69 | color: #333; 70 | box-shadow: 0 0 10px var(--clr), 71 | 0 0 30px var(--clr), 72 | 0 0 50px var(--clr); 73 | } 74 | .toggle:hover 75 | { 76 | filter: grayscale(100%); 77 | box-shadow: 0 0 10px #fff; 78 | 79 | } 80 | /* Resto */ 81 | .menu .toggle 82 | { 83 | position: relative; 84 | width: 60px; 85 | height: 60px; 86 | background: #2f363e; 87 | border: 2px solid #fff; 88 | border-radius: 50%; 89 | color:white; 90 | display: flex; 91 | justify-content: center; 92 | text-align: center; 93 | z-index: 10000; 94 | font-size: 2rem; 95 | transition: trasform 2.25s; 96 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | let toggle = document.querySelector('.toggle'); 2 | let menu = document.querySelector('.menu'); 3 | toggle.onclick = function(){ 4 | menu.classList.toggle('active') 5 | } --------------------------------------------------------------------------------