├── index.html
├── script.js
└── styles.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
64 |
65 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | document.addEventListener("click", e => {
2 | const isDropdownButton = e.target.matches("[data-dropdown-button]")
3 | if (!isDropdownButton && e.target.closest("[data-dropdown]") != null) return
4 |
5 | let currentDropdown
6 | if (isDropdownButton) {
7 | currentDropdown = e.target.closest("[data-dropdown]")
8 | currentDropdown.classList.toggle("active")
9 | }
10 |
11 | document.querySelectorAll("[data-dropdown].active").forEach(dropdown => {
12 | if (dropdown === currentDropdown) return
13 | dropdown.classList.remove("active")
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | }
4 |
5 | .header {
6 | background-color: #F3F3F3;
7 | display: flex;
8 | align-items: baseline;
9 | padding: .5rem;
10 | gap: 1rem;
11 | }
12 |
13 | .link {
14 | background: none;
15 | border: none;
16 | text-decoration: none;
17 | color: #777;
18 | font-family: inherit;
19 | font-size: inherit;
20 | cursor: pointer;
21 | padding: 0;
22 | }
23 |
24 | .dropdown.active > .link,
25 | .link:hover {
26 | color: black;
27 | }
28 |
29 | .dropdown {
30 | position: relative;
31 | }
32 |
33 | .dropdown-menu {
34 | position: absolute;
35 | left: 0;
36 | top: calc(100% + .25rem);
37 | background-color: white;
38 | padding: .75rem;
39 | border-radius: .25rem;
40 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
41 | opacity: 0;
42 | pointer-events: none;
43 | transform: translateY(-10px);
44 | transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
45 | }
46 |
47 | .dropdown.active > .link + .dropdown-menu {
48 | opacity: 1;
49 | transform: translateY(0);
50 | pointer-events: auto;
51 | }
52 |
53 | .information-grid {
54 | display: grid;
55 | grid-template-columns: repeat(2, max-content);
56 | gap: 2rem;
57 | }
58 |
59 | .dropdown-links {
60 | display: flex;
61 | flex-direction: column;
62 | gap: .25rem;
63 | }
64 |
65 | .login-form > input {
66 | margin-bottom: .5rem;
67 | }
--------------------------------------------------------------------------------