├── .gitignore
├── README.md
├── index.html
├── script.js
└── style.css
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nilldevelopers/Social-Area/9603b4df96a0f12a473d0c78adb46482ae0c7d07/README.md
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Collapse Btn
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | let navigation = document.querySelector('.navigation');
2 | navigation.onclick = function () {
3 | navigation.classList.toggle('active')
4 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 |
6 | }
7 |
8 | body {
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | min-height: 100vh;
13 | background-color: #10131c;
14 | }
15 |
16 | .navigation {
17 | position: relative;
18 | width: 70px;
19 | height: 70px;
20 | background-color: #212532;
21 | border-radius: 10px;
22 | cursor: pointer;
23 | display: flex;
24 | align-items: center;
25 | justify-content: center;
26 | transition: 0.5s;
27 | transition-delay: 0.8s;
28 | }
29 |
30 | .navigation.active {
31 | width: 200px;
32 | height: 200px;
33 | transition-delay: 0s;
34 | }
35 |
36 | .navigation span {
37 | position: absolute;
38 | width: 7px;
39 | height: 7px;
40 | display: flex;
41 | align-items: center;
42 | justify-content: center;
43 |
44 | background-color: #fff;
45 | border-radius: 50%;
46 | transform: translate(calc(12px * var(--x)), calc(12px * var(--y)));
47 | transition: transform 0.5s, width 0.5s, height 0.5s, background 0.5s;
48 | transition-delay: calc(0.1s * var(--i));
49 | }
50 |
51 | .navigation.active span {
52 | width: 45px;
53 | height: 45px;
54 | background: #333849;
55 | transform: translate(calc(60px * var(--x)), calc(60px * var(--y)));
56 | }
57 |
58 | .navigation span ion-icon {
59 | transition: 0.5s;
60 | font-size: 0em;
61 | }
62 |
63 | .navigation.active span ion-icon {
64 | font-size: 1.35em;
65 | color: #fff;
66 | }
67 |
68 | .navigation.active span:hover ion-icon {
69 | color: #2dfc;
70 | filter: drop-shadow(0 0 2px #2dfc) drop-shadow(0 0 5px #2dfc) drop-shadow(0 0 15px #2dfc)
71 | }
--------------------------------------------------------------------------------