├── README.md
├── index.html
└── css
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Octagon Menu 🤩
2 |
3 | https://github.com/anaslaghrissi/Octagon-Menu/assets/108026572/87944149-45c3-4ee5-a0a9-1d8830638d5b
4 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Octagon Menu
7 |
8 |
9 |
10 |
37 |
41 |
45 |
46 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | }
5 | body {
6 | display: flex;
7 | align-items: center;
8 | justify-content: center;
9 | height: 100vh;
10 | background: #161616;
11 | }
12 | .menu {
13 | position: relative;
14 | width: 260px;
15 | height: 260px;
16 | display: flex;
17 | align-items: center;
18 | justify-content: center;
19 | }
20 | .menu li {
21 | position: absolute;
22 | left: 0;
23 | list-style: none;
24 | transform: rotate(0deg) translateX(100px);
25 | transform-origin: 130px;
26 | transition: 0.5s;
27 | transition-delay: calc(0.1s * var(--i));
28 | }
29 | .menu.active li {
30 | transform: rotate(calc(360deg / 8 * var(--i)));
31 | }
32 | .menu a {
33 | display: flex;
34 | align-items: center;
35 | justify-content: center;
36 | width: 60px;
37 | height: 60px;
38 | text-decoration: none;
39 | font-size: 22px;
40 | border-radius: 50%;
41 | transform: rotate(calc(360deg / -8 * var(--i)));
42 | transition: 1s;
43 | color: transparent;
44 | transition-delay: 0.5s;
45 | filter: drop-shadow(0 0 2px var(--clr));
46 | }
47 | .menu.active a {
48 | color: var(--clr);
49 | }
50 | .menu a::before {
51 | content: "";
52 | position: absolute;
53 | width: 20px;
54 | height: 2px;
55 | border-radius: 2px;
56 | background: var(--clr);
57 | transform: rotate(calc(90deg * var(--i))) translate(0, 25px);
58 | transition: width 0.5s, height 0.5s, transform 0.5s;
59 | transition-delay: 0.5s, 1s, 1.5s;
60 | }
61 | .menu.active a::before {
62 | width: 50px;
63 | height: 50px;
64 | background: #161616;
65 | border: 2px solid var(--clr);
66 | transform: rotate(calc(0 * var(--i)));
67 | transition: transform 0.5s, height 0.5s, width 0.5s;
68 | transition-delay: 0.5s, 1.5s, 1.5s;
69 | border-radius: 10px;
70 | filter: drop-shadow(0 0 5px var(--clr));
71 | rotate: 135deg;
72 | }
73 | .menu.active li:hover a::before {
74 | background: var(--clr);
75 | }
76 | .menu.active li:hover a ion-icon {
77 | color: #161616;
78 | }
79 |
80 | .menuToggle {
81 | position: absolute;
82 | width: 60px;
83 | height: 60px;
84 | color: #fff;
85 | display: flex;
86 | align-items: center;
87 | justify-content: center;
88 | z-index: 100;
89 | border-radius: 50%;
90 | cursor: pointer;
91 | font-size: 32px;
92 | transition: 1.5s;
93 | }
94 | .menu.active .menuToggle {
95 | transform: rotate(315deg);
96 | }
97 |
--------------------------------------------------------------------------------