├── .gitignore
├── dropdown-1
├── index.html
├── main.js
└── styles.css
├── dropdown-2
├── index.html
├── main.js
└── styles.css
├── dropdown-3
├── index.html
├── main.js
└── styles.css
├── dropdown-4
├── index.html
├── main.js
└── styles.css
├── dropdown-5
├── index.html
├── main.js
└── styles.css
├── dropdown-6
├── burger.svg
├── chevron.svg
├── empty.svg
├── index.html
├── logo.png
├── main.js
└── styles.css
└── dropdown-7
├── burger.svg
├── chevron.svg
├── empty.svg
├── index.html
├── logo.png
├── main.js
└── styles.css
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE
--------------------------------------------------------------------------------
/dropdown-1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 | Dropdown 1
13 |
14 |
15 |
16 |
21 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/dropdown-1/main.js:
--------------------------------------------------------------------------------
1 | const handleDropdownClicked = (event) => {
2 | event.stopPropagation();
3 | const dropdown = document.getElementById("dropdown");
4 | toggleDropdown(!dropdown.classList.contains("open"));
5 | };
6 |
7 | const toggleDropdown = (shouldOpen) => {
8 | const dropdown = document.getElementById("dropdown");
9 | const icon = document.getElementById("icon");
10 |
11 | if (shouldOpen) {
12 | dropdown.classList.add("open");
13 | } else {
14 | dropdown.classList.remove("open");
15 | }
16 |
17 | icon.innerText = dropdown.classList.contains("open")
18 | ? "close"
19 | : "expand_more";
20 | };
21 |
22 | document.body.addEventListener("click", () => toggleDropdown());
23 |
--------------------------------------------------------------------------------
/dropdown-1/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body {
7 | height: 100%;
8 | }
9 |
10 | body {
11 | margin: 0;
12 | display: grid;
13 | place-items: center;
14 | background: #1a1a1a;
15 | }
16 |
17 | .dropdown {
18 | position: relative;
19 | }
20 |
21 | .dropdown > button {
22 | position: relative;
23 | z-index: 2;
24 | transition: 0.3s;
25 | }
26 |
27 | .dropdown > button:hover {
28 | background: #3a3a3a;
29 | }
30 |
31 | .dropdown.open > button {
32 | background: #15a480;
33 | }
34 |
35 | .dropdown button {
36 | display: flex;
37 | align-items: center;
38 | gap: 10px;
39 | padding: 0 16px;
40 | width: 230px;
41 | height: 64px;
42 | border-radius: 6px;
43 | color: #f9f9f9;
44 | background: #252525;
45 | border: 0;
46 | cursor: pointer;
47 | font-size: 16px;
48 | font-family: "Euclid Circular A";
49 | }
50 |
51 | .dropdown button #icon {
52 | margin-left: auto;
53 | }
54 |
55 | .menu {
56 | position: absolute;
57 | overflow: hidden;
58 | z-index: 1;
59 | top: 61px;
60 | left: 0;
61 | width: 100%;
62 | opacity: 0;
63 | visibility: hidden;
64 | border-bottom-left-radius: 6px;
65 | border-bottom-right-radius: 6px;
66 | border-top: 0;
67 | background: #3e3e3e;
68 | translate: 0 -20px;
69 | transition: 0.4s;
70 | }
71 |
72 | .menu button {
73 | border: 0;
74 | width: 100%;
75 | height: 56px;
76 | border-radius: 0;
77 | }
78 |
79 | .menu button:hover {
80 | background: #383838;
81 | }
82 |
83 | .dropdown.open .menu {
84 | opacity: 1;
85 | translate: 0;
86 | visibility: visible;
87 | }
88 |
--------------------------------------------------------------------------------
/dropdown-2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 | Dropdown 2
13 |
14 |
15 |
16 |
21 |
75 |
76 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/dropdown-2/main.js:
--------------------------------------------------------------------------------
1 | const handleDropdownClicked = (event) => {
2 | event.stopPropagation();
3 | const dropdown = document.getElementById("dropdown");
4 | toggleDropdown(!dropdown?.classList?.contains("open"));
5 | };
6 |
7 | const handleSubMenuClicked = (menu) => {
8 | if (menu) {
9 | const subMenus = document.getElementsByClassName("sub-menu");
10 | for (let s of subMenus) {
11 | s.classList.remove("open");
12 | }
13 | const subMenu = document.getElementById(menu);
14 | subMenu.classList.add("open");
15 | }
16 |
17 | const mainMenu = document.getElementById("menu-inner");
18 | mainMenu.classList.toggle("open");
19 | };
20 |
21 | const toggleDropdown = () => {
22 | const dropdown = document.getElementById("dropdown");
23 | dropdown.classList.toggle("open");
24 | };
25 |
--------------------------------------------------------------------------------
/dropdown-2/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body {
7 | height: 100%;
8 | }
9 |
10 | body {
11 | margin: 0;
12 | display: grid;
13 | place-items: center;
14 | background: #1a1a1a;
15 | }
16 |
17 | .dropdown {
18 | position: relative;
19 | }
20 |
21 | .dropdown > button {
22 | position: relative;
23 | z-index: 2;
24 | transition: 0.3s;
25 | }
26 |
27 | .dropdown > button:hover {
28 | background: #3a3a3a;
29 | }
30 |
31 | .dropdown.open > button {
32 | background: #0a82d5;
33 | }
34 |
35 | .dropdown button {
36 | display: flex;
37 | align-items: center;
38 | gap: 10px;
39 | padding: 0 16px;
40 | width: 230px;
41 | height: 64px;
42 | border-radius: 6px;
43 | color: #f9f9f9;
44 | background: #252525;
45 | border: 0;
46 | cursor: pointer;
47 | font-size: 16px;
48 | font-family: "Euclid Circular A";
49 | }
50 |
51 | .dropdown button .chevron {
52 | margin-left: auto;
53 | }
54 |
55 | .menu {
56 | position: absolute;
57 | overflow: hidden;
58 | z-index: 1;
59 | top: 72px;
60 | left: 0;
61 | width: 100%;
62 | height: 168px;
63 | opacity: 0;
64 | visibility: hidden;
65 | border-radius: 6px;
66 | border-top: 0;
67 | background: #3e3e3e;
68 | translate: 0 -20px;
69 | transition: 0.4s;
70 | }
71 |
72 | .main-menu {
73 | width: 230px;
74 | }
75 |
76 | .menu-inner {
77 | position: absolute;
78 | width: 460px;
79 | display: flex;
80 | transition: 0.3s;
81 | }
82 |
83 | .menu-inner.open {
84 | translate: -50%;
85 | }
86 |
87 | .menu button {
88 | border: 0;
89 | width: 100%;
90 | height: 56px;
91 | border-radius: 0;
92 | }
93 |
94 | .menu button:hover {
95 | background: #383838;
96 | }
97 |
98 | .dropdown.open .menu {
99 | opacity: 1;
100 | translate: 0;
101 | visibility: visible;
102 | }
103 |
104 | .sub-menu {
105 | display: none;
106 | width: 230px;
107 | }
108 |
109 | .sub-menu.open {
110 | display: block;
111 | }
112 |
--------------------------------------------------------------------------------
/dropdown-3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 | Dropdown 3
13 |
14 |
15 |
90 |
91 |
92 |
93 |
94 |
--------------------------------------------------------------------------------
/dropdown-3/main.js:
--------------------------------------------------------------------------------
1 | const handleDropdownClicked = (event) => {
2 | event.stopPropagation();
3 | const dropdown = document.getElementById("dropdown");
4 | toggleDropdown(!dropdown?.classList?.contains("open"));
5 | };
6 |
7 | const handleSubMenuClicked = (subMenuId) => {
8 | if (subMenuId) {
9 | const subMenus = document.getElementsByClassName("sub-menu");
10 | for (let s of subMenus) {
11 | s.classList.remove("open");
12 | }
13 | const subMenu = document.getElementById(subMenuId);
14 | subMenu.classList.add("open");
15 |
16 | const menu = document.getElementById("menu");
17 |
18 | menu.style.height = subMenu.clientHeight + "px";
19 |
20 | console.log(subMenu.clientHeight);
21 | } else {
22 | menu.style.height = "168px";
23 | }
24 |
25 | const menuInner = document.getElementById("menu-inner");
26 | menuInner.classList.toggle("open");
27 | };
28 |
29 | const toggleDropdown = () => {
30 | const dropdown = document.getElementById("dropdown");
31 | dropdown.classList.toggle("open");
32 | };
33 |
--------------------------------------------------------------------------------
/dropdown-3/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body {
7 | height: 100%;
8 | }
9 |
10 | body {
11 | margin: 0;
12 | display: grid;
13 | place-items: center;
14 | background: #1a1a1a;
15 | }
16 |
17 | nav {
18 | position: fixed;
19 | top: 0;
20 | left: 0;
21 | width: 100%;
22 | height: 72px;
23 | display: flex;
24 | justify-content: flex-end;
25 | background: #4f23d3;
26 | }
27 |
28 | .dropdown {
29 | position: relative;
30 | perspective: 200px;
31 | }
32 |
33 | .dropdown > button {
34 | position: relative;
35 | z-index: 2;
36 | transition: 0.3s;
37 | }
38 |
39 | .dropdown.open > button {
40 | background: rgba(0, 0, 0, 0.175);
41 | }
42 |
43 | .dropdown button {
44 | display: flex;
45 | align-items: center;
46 | gap: 10px;
47 | padding: 0 16px;
48 | width: 230px;
49 | height: 72px;
50 | color: #f9f9f9;
51 | background: transparent;
52 | border: 0;
53 | cursor: pointer;
54 | font-size: 16px;
55 | font-family: "Euclid Circular A";
56 | }
57 |
58 | .dropdown button .chevron {
59 | margin-left: auto;
60 | }
61 |
62 | .menu {
63 | position: absolute;
64 | overflow: hidden;
65 | z-index: 1;
66 | top: 72px;
67 | left: 0;
68 | width: 100%;
69 | height: 168px;
70 | opacity: 0;
71 | transform-origin: 50% 0%;
72 | transform: rotateX(-90deg);
73 | visibility: hidden;
74 | background: #2b2d2e;
75 | transition: 0.4s;
76 | }
77 |
78 | .dropdown.open .menu {
79 | opacity: 1;
80 | transform: rotateX(0);
81 | visibility: visible;
82 | }
83 |
84 | .main-menu {
85 | width: 230px;
86 | }
87 |
88 | .menu-inner {
89 | position: absolute;
90 | width: 460px;
91 | display: flex;
92 | transition: 0.3s;
93 | }
94 |
95 | .menu-inner.open {
96 | translate: -50%;
97 | }
98 |
99 | .menu button {
100 | border: 0;
101 | width: 100%;
102 | height: 56px;
103 | border-radius: 0;
104 | }
105 |
106 | .menu button:hover {
107 | background: #1d1e1f;
108 | }
109 |
110 | .sub-menu {
111 | display: none;
112 | width: 230px;
113 | }
114 |
115 | .sub-menu.open {
116 | display: block;
117 | }
118 |
--------------------------------------------------------------------------------
/dropdown-4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 | Dropdown 4
13 |
14 |
15 |
16 |
23 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/dropdown-4/main.js:
--------------------------------------------------------------------------------
1 | const button = document.getElementById("button");
2 | const buttonRect = button.getBoundingClientRect();
3 | const chevron = document.getElementById("chevron");
4 | const chevronRect = chevron.getBoundingClientRect();
5 | const menuRight = buttonRect.right - chevronRect.right;
6 | const menuTop = chevronRect.top - buttonRect.top;
7 |
8 | const menu = document.getElementById("menu");
9 | menu.style.top = `${menuTop}px`;
10 | menu.style.right = `${menuRight}px`;
11 |
12 | const toggleDropdown = () => {
13 | const dropdown = document.getElementById("dropdown");
14 |
15 | if (dropdown.classList.contains("open")) {
16 | menu.style.top = `${menuTop}px`;
17 | menu.style.right = `${menuRight}px`;
18 | } else {
19 | menu.style.top = `${button.clientHeight + 10}px`;
20 | menu.style.right = 0;
21 | }
22 |
23 | dropdown.classList.toggle("open");
24 | };
25 |
--------------------------------------------------------------------------------
/dropdown-4/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body {
7 | height: 100%;
8 | }
9 |
10 | body {
11 | margin: 0;
12 | display: grid;
13 | place-items: center;
14 | background: #5121da;
15 | }
16 |
17 | .dropdown {
18 | position: relative;
19 | perspective: 200px;
20 | }
21 |
22 | .dropdown button {
23 | display: flex;
24 | align-items: center;
25 | gap: 10px;
26 | padding: 0 16px;
27 | width: 230px;
28 | height: 72px;
29 | color: #f9f9f9;
30 | background: transparent;
31 | border-radius: 8px;
32 | border: 0;
33 | cursor: pointer;
34 | font-size: 16px;
35 | font-family: "Euclid Circular A";
36 | }
37 |
38 | .dropdown > button {
39 | position: relative;
40 | z-index: 2;
41 | background: rgba(0, 0, 0, 0.45);
42 | transition: 0.3s;
43 | }
44 |
45 | .menu {
46 | position: absolute;
47 | overflow: hidden;
48 | z-index: 1;
49 | width: 100%;
50 | height: 168px;
51 | opacity: 0;
52 | transform-origin: 100% 0%;
53 | scale: 0;
54 | visibility: hidden;
55 | border-radius: 8px;
56 | background: rgba(0, 0, 0, 0.45);
57 | transition: 0.4s;
58 | }
59 |
60 | .dropdown.open .menu {
61 | scale: 1;
62 | right: 0;
63 | top: 72px;
64 | opacity: 1;
65 | visibility: visible;
66 | }
67 |
68 | .menu button {
69 | border: 0;
70 | width: 100%;
71 | height: 56px;
72 | border-radius: 0;
73 | }
74 |
75 | .menu button:hover {
76 | background: rgba(0, 0, 0, 0.26);
77 | }
78 |
79 | .chevron {
80 | margin-left: auto;
81 | transition: 0.4s;
82 | }
83 |
84 | .dropdown.open .chevron {
85 | rotate: -180deg;
86 | }
87 |
--------------------------------------------------------------------------------
/dropdown-5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 | Dropdown 5
13 |
14 |
15 |
16 |
17 |
22 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/dropdown-5/main.js:
--------------------------------------------------------------------------------
1 | const menu = document.getElementById("menu"),
2 | chevron = document.getElementById("chevron");
3 |
4 | const toggleDropdown = () => {
5 | menu.classList.toggle("open");
6 | chevron.innerHTML = !menu.classList.contains("open")
7 | ? "expand_more"
8 | : "close";
9 | };
10 |
11 | const handleMainButtonClicked = () => alert("Main button clicked!");
12 |
13 | const handleMenuButtonClicked = () => {
14 | toggleDropdown();
15 | alert("Menu button clicked!");
16 | };
17 |
--------------------------------------------------------------------------------
/dropdown-5/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body {
7 | height: 100%;
8 | }
9 |
10 | body {
11 | margin: 0;
12 | display: grid;
13 | place-items: center;
14 | background: #481eee;
15 | }
16 |
17 | .split-button {
18 | position: relative;
19 | display: flex;
20 | align-items: center;
21 | height: 60px;
22 | background: rgba(0, 0, 0, 0.45);
23 | border-radius: 8px;
24 | }
25 |
26 | button {
27 | display: flex;
28 | align-items: center;
29 | height: 100%;
30 | border: 0;
31 | background: transparent;
32 | cursor: pointer;
33 | color: #f9f9f9;
34 | font-size: 16px;
35 | font-family: "Euclid Circular A";
36 | }
37 |
38 | .split-button > button:nth-child(1) {
39 | padding: 0 24px;
40 | }
41 |
42 | .split-button > button:nth-child(2) {
43 | width: 60px;
44 | background: rgba(0, 0, 0, 0.18);
45 | border-top-right-radius: 8px;
46 | border-bottom-right-radius: 8px;
47 | }
48 |
49 | .menu {
50 | overflow: hidden;
51 | position: absolute;
52 | left: 0;
53 | top: 68px;
54 | z-index: 1;
55 | width: 100%;
56 | translate: -30px 0;
57 | opacity: 0;
58 | visibility: hidden;
59 | border-radius: 8px;
60 | background: rgba(0, 0, 0, 0.45);
61 | transition: 0.4s;
62 | }
63 |
64 | .menu.open {
65 | translate: 0 0;
66 | opacity: 1;
67 | visibility: visible;
68 | }
69 |
70 | .menu > button {
71 | gap: 10px;
72 | border: 0;
73 | border-radius: 0;
74 | width: 100%;
75 | height: 56px;
76 | padding: 0 18px;
77 | }
78 |
79 | .menu > button:hover {
80 | background: rgba(0, 0, 0, 0.26);
81 | }
82 |
83 | .chevron {
84 | margin: auto;
85 | }
86 |
--------------------------------------------------------------------------------
/dropdown-6/burger.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dropdown-6/chevron.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dropdown-6/empty.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/dropdown-6/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 | Dropdown 6
13 |
14 |
15 |
37 |