8000 Add files via upload · bedimcode/dropdown-menu@31243cf · GitHub
[go: up one dir, main page]

Skip to content

Commit 31243cf

Browse files
authored
Add files via upload
1 parent 1d95cd9 commit 31243cf

File tree

8 files changed

+331
-0
lines changed

8 files changed

+331
-0
lines changed

assets/css/styles.css

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line 8000 numberDiff line change
@@ -0,0 +1,138 @@
1+
/*=============== GOOGLE FONTS ===============*/
2+
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");
3+
4+
/*=============== VARIABLES CSS ===============*/
5+
:root {
6+
/*========== Colors ==========*/
7+
/*Color mode HSL(hue, saturation, lightness)*/
8+
--first-color: hsl(225, 72%, 55%);
9+
--text-color: hsl(225, 52%, 30%);
10+
--body-color: linear-gradient(180deg,
11+
hsl(225, 75%, 92%),
12+
hsl(225, 78%, 70%));
13+
--container-color: hsl(225, 75%, 97%);
14+
15+
/*========== Font and typography ==========*/
16+
/*.5rem = 8px | 1rem = 16px ...*/
17+
--body-font: "Montserrat", sans-serif;
18+
--normal-font-size: 1rem;
19+
}
20+
21+
/*=============== BASE ===============*/
22+
* {
23+
box-sizing: border-box;
24+
padding: 0;
25+
margin: 0;
26+
}
27+
28+
body,
29+
button {
30+
font-family: var(--body-font);
31+
font-size: var(--normal-font-size);
32+
color: var(--text-color);
33+
}
34+
35+
ul {
36+
list-style: none;
37+
}
38+
39+
/*=============== DROPDOWN ===============*/
40+
.container {
41+
height: 100vh;
42+
display: grid;
43+
place-items: center;
44+
background: var(--body-color);
45+
}
46+
47+
.dropdown {
48+
position: relative;
49+
width: max-content;
50+
transform: translateY(-5rem);
51+
}
52+
53+
.dropdown__button,
54+
.dropdown__item {
55+
display: flex;
56+
align-items: center;
57+
column-gap: .5rem;
58+
}
59+
60+
.dropdown__button {
61+
border: none;
62+
outline: none;
63+
background-color: 9E88 var(--container-color);
64+
padding: 1.25rem;
65+
border-radius: .75rem;
66+
cursor: pointer;
67+
}
68+
69+
.dropdown__icon,
70+
.dropdown__icons {
71+
font-size: 1.25rem;
72+
color: var(--first-color);
73+
}
74+
75+
.dropdown__name {
76+
font-weight: 500;
77+
}
78+
79+
.dropdown__icons {
80+
width: 24px;
81+
height: 24px;
82+
display: grid;
83+
place-items: center;
84+
}
85+
86+
.dropdown__arrow,
87+
.dropdown__close {
88+
position: absolute;
89+
transition: opacity .1s, transform .4s;
90+
}
91+
92+
.dropdown__close {
93+
opacity: 0;
94+
}
95+
96+
.dropdown__menu {
97+
background-color: var(--container-color);
98+
padding: 1rem 1.25rem;
99+
border-radius: .75rem;
100+
display: grid;
101+
row-gap: 1.5rem;
102+
position: absolute;
103+
width: 100%;
104+
left: 0;
105+
top: 4.5rem;
106+
transform: scale(.1);
107+
transform-origin: 10rem -2rem;
108+
pointer-events: none;
109+
transition: opacity .4s, transform .4s;
110+
opacity: 0;
111+
}
112+
113+
.dropdown__item {
114+
cursor: pointer;
115+
transition: color .3s;
116+
}
117+
118+
.dropdown__item:hover {
119+
color: var(--first-color);
120+
}
121+
122+
/* Rotate & hide icon */
123+
.show-dropdown .dropdown__close {
124+
opacity: 1;
125+
transform: rotate(-180deg);
126+
}
127+
128+
.show-dropdown .dropdown__arrow {
129+
opacity: 0;
130+
transform: rotate(-180deg);
131+
}
132+
133+
/* Show dropdown menu */
134+
.show-dropdown .dropdown__menu {
135+
opacity: 1;
136+
transform: scale(1);
137+
pointer-events: initial;
138+
}

assets/js/main.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/*=============== DROPDOWN JS ===============*/
2+
const showDropdown = (content, button) =>{
3+
const dropdownContent = document.getElementById(content),
4+
dropdownButton = document.getElementById(button)
5+
6+
dropdownButton.addEventListener('click', () =>{
7+
// We add the show-dropdown class, so that the menu is displayed
8+
dropdownContent.classList.toggle('show-dropdown')
9+
})
10+
}
11+
12+
showDropdown('dropdown-content','dropdown-button')

assets/scss/base/_base.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*=============== BASE ===============*/
2+
*{
3+
box-sizing: border-box;
4+
padding: 0;
5+
margin: 0;
6+
}
7+
8+
body,
9+
button{
10+
font-family: var(--body-font);
11+
font-size: var(--normal-font-size);
12+
color: var(--text-color);
13+
}
14+
15+
ul{
16+
list-style: none;
17+
}

assets/scss/components/_dropdown.scss

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/*=============== DROPDOWN ===============*/
2+
.container{
3+
height: 100vh;
4+
display: grid;
5+
place-items: center;
6+
background: var(--body-color);
7+
}
8+
9+
.dropdown{
10+
position: relative;
11+
width: max-content;
12+
transform: translateY(-5rem);
13+
14+
&__button,
15+
&__item{
16+
display: flex;
17+
align-items: center;
18+
column-gap: .5rem;
19+
}
20+
&__button{
21+
border: none;
22+
outline: none;
23+
background-color: var(--container-color);
24+
padding: 1.25rem;
25+
border-radius: .75rem;
26+
cursor: pointer;
27+
}
28+
&__icon,
29+
&__icons{
30+
font-size: 1.25rem;
31+
color: var(--first-color);
32+
}
33+
&__name{
34+
font-weight: 500;
35+
}
36+
&__icons{
37+
width: 24px;
38+
height: 24px;
39+
display: grid;
40+
place-items: center;
41+
}
42+
&__arrow,
43+
&__close{
44+
position: absolute;
45+
transition: opacity .1s, transform .4s;
46+
}
47+
&__close{
48+
opacity: 0;
49+
}
50+
&__menu{
51+
background-color: var(--container-color);
52+
padding: 1rem 1.25rem;
53+
border-radius: .75rem;
54+
display: grid;
55+
row-gap: 1.5rem;
56+
position: absolute;
57+
width: 100%;
58+
left: 0;
59+
top: 4.5rem;
60+
transform: scale(.1);
61+
transform-origin: 10rem -2rem;
62+
pointer-events: none;
63+
transition: opacity .4s, transform .4s;
64+
opacity: 0;
65+
}
66+
&__item{
67+
cursor: pointer;
68+
transition: color .3s;
69+
70+
&:hover{
71+
color: var(--first-color);
72+
}
73+
}
74+
}
75+
76+
/* Rotate & hide icon */
77+
.show-dropdown .dropdown__close{
78+
opacity: 1;
79+
transform: rotate(-180deg);
80+
}
81+
82+
.show-dropdown .dropdown__arrow{
83+
opacity: 0;
84+
transform: rotate(-180deg);
85+
}
86+
87+
/* Show dropdown menu */
88+
.show-dropdown .dropdown__menu{
89+
opacity: 1;
90+
transform: scale(1);
91+
pointer-events: initial;
92+
}

assets/scss/config/_variables.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*=============== GOOGLE FONTS ===============*/
2+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
3+
4+
/*=============== VARIABLES CSS ===============*/
5+
:root{
6+
/*========== Colors ==========*/
7+
/*Color mode HSL(hue, saturation, lightness)*/
8+
--first-color: hsl(225, 72%, 55%);
9+
--text-color: hsl(225, 52%, 30%);
10+
--body-color: linear-gradient(180deg,
11+
hsl(225, 75%, 92%),
12+
hsl(225, 78%, 70%));
13+
--container-color: hsl(225, 75%, 97%);
14+
15+
/*========== Font and typography ==========*/
16+
/*.5rem = 8px | 1rem = 16px ...*/
17+
--body-font: 'Montserrat', sans-serif;
18+
--normal-font-size: 1rem;
19+
}

assets/scss/styles.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import 'config/variables';
2+
@import 'base/base';
3+
@import 'components/dropdown';

index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<!--=============== REMIXICONS ===============-->
8+
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">
9+
10+
<!--=============== CSS ===============-->
11+
<link rel="stylesheet" href="assets/css/styles.css">
12+
13+
<title>Dropdown menu - Bedimcode</title>
14+
</head>
15+
<body>
16+
<div class="container">
17+
<div class="dropdown" id="dropdown-content">
18+
<button class="dropdown__button" id="dropdown-button">
19+
<i class="ri-user-3-line dropdown__icon"></i>
20+
<span class="dropdown__name">My profile</span>
21+
22+
<div class="dropdown__icons">
23+
<i class="ri-arrow-down-s-line dropdown__arrow"></i>
24+
<i class="ri-close-line dropdown__close"></i>
25+
</div>
26+
</button>
27+
28+
<ul class="dropdown__menu">
29+
<li class="dropdown__item">
30+
<i class="ri-message-3-line dropdown__icon"></i>
31+
<span class="dropdown__name">Messages</span>
32+
</li>
33+
34+
<li class="dropdown__item">
35+
<i class="ri-lock-line dropdown__icon"></i>
36+
<span class="dropdown__name">Accounts</span>
37+
</li>
38+
39+
<li class="dropdown__item">
40+
<i class="ri-settings-3-line dropdown__icon"></i>
41+
<span class="dropdown__name">Settings</s 325D pan>
42+
</li>
43+
</ul>
44+
</div>
45+
</div>
46+
47+
<!--=============== MAIN JS ===============-->
48+
<script src="assets/js/main.js"></script>
49+
</body>
50+
</html>

preview.png

274 KB
Loading

0 commit comments

Comments
 (0)
0