I was following a tutorial on how to create this nice looking sidebar that expands when hovering and fade in elements but it has a dropdown menu that expands when hovering as well (the desktop version) and I need it to expand only when clicking it.
If you hover over Profile and Notifications menu items they toggle when hovering and I need it to toggle when click.
HTML
JavaScript
x
126
126
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
<!--========== BOX ICONS ==========-->8
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">9
10
<!--========== CSS ==========-->11
<link rel="stylesheet" href="assets/css/styles.css">12
13
<title>Responsive sidebar submenus</title>14
</head>15
<body>16
<!--========== HEADER ==========-->17
<header class="header">18
<div class="header__container">19
<img src="https://pruebaapp.ga/wp-content/uploads/2021/03/profile-1-150x150.jpeg" alt="" class="header__img">20
21
<a href="#" class="header__logo">YOUR LOGO</a>22
23
<div class="header__search">24
<input type="search" placeholder="Search" class="header__input">25
<i class='bx bx-search header__icon'></i>26
</div>27
28
<div class="header__toggle">29
<i class='bx bx-menu' id="header-toggle"></i>30
</div>31
</div>32
</header>33
34
<!--========== NAV ==========-->35
<div class="nav" id="navbar">36
<nav class="nav__container">37
<div>38
<a href="#" class="nav__link nav__logo">39
<i class='bx bxs-disc nav__icon' ></i>40
<span class="nav__logo-name">Bedimcode</span>41
</a>42
43
<div class="nav__list">44
<div class="nav__items">45
<h3 class="nav__subtitle">Profile</h3>46
47
<a href="#" class="nav__link active">48
<i class='bx bx-home nav__icon' ></i>49
<span class="nav__name">Home</span>50
</a>51
52
<div class="nav__dropdown">53
<a href="#" class="nav__link">54
<i class='bx bx-user nav__icon' ></i>55
<span class="nav__name">Profile</span>56
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>57
</a>58
59
<div class="nav__dropdown-collapse">60
<div class="nav__dropdown-content">61
<a href="#" class="nav__dropdown-item">Passwords</a>62
<a href="#" class="nav__dropdown-item">Mail</a>63
<a href="#" class="nav__dropdown-item">Accounts</a>64
</div>65
</div>66
</div>67
68
<a href="#" class="nav__link">69
<i class='bx bx-message-rounded nav__icon' ></i>70
<span class="nav__name">Messages</span>71
</a>72
</div>73
74
<div class="nav__items">75
<h3 class="nav__subtitle">Menu</h3>76
77
<div class="nav__dropdown">78
<a href="#" class="nav__link">79
<i class='bx bx-bell nav__icon' ></i>80
<span class="nav__name">Notifications</span>81
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>82
</a>83
84
<div class="nav__dropdown-collapse">85
<div class="nav__dropdown-content">86
<a href="#" class="nav__dropdown-item">Blocked</a>87
<a href="#" class="nav__dropdown-item">Silenced</a>88
<a href="#" class="nav__dropdown-item">Publish</a>89
<a href="#" class="nav__dropdown-item">Program</a>90
</div>91
</div>92
93
</div>94
95
<a href="#" class="nav__link">96
<i class='bx bx-compass nav__icon' ></i>97
<span class="nav__name">Explore</span>98
</a>99
<a href="#" class="nav__link">100
<i class='bx bx-bookmark nav__icon' ></i>101
<span class="nav__name">Saved</span>102
</a>103
</div>104
</div>105
</div>106
107
<a href="#" class="nav__link nav__logout">108
<i class='bx bx-log-out nav__icon' ></i>109
<span class="nav__name">Log Out</span>110
</a>111
</nav>112
</div>113
114
<!--========== CONTENTS ==========-->115
<main>116
<section>117
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>118
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>119
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>120
</section>121
</main>122
123
<!--========== MAIN JS ==========-->124
<script src="assets/js/main.js"></script>125
</body>126
I have made a pen with this element so you can see it:
https://codepen.io/henrymendeez/pen/rNjNNdw
Advertisement
Answer
- Replace this:
JavaScript
1
10
10
1
/* Show dropdown collapse */2
.nav__dropdown:hover {3
max-height: 100rem;4
}5
6
/* Rotate icon arrow */7
.nav__dropdown:hover .nav__dropdown-icon {8
transform: rotate(180deg);9
}10
With this:
JavaScript
1
10
10
1
/* Show dropdown collapse */2
.nav__dropdown.open {3
max-height: 100rem;4
}5
6
/* Rotate icon arrow */7
.nav__dropdown.open .nav__dropdown-icon {8
transform: rotate(180deg);9
}10
- Add this to the javascript:
JavaScript
1
7
1
const navDropdown = document.querySelectorAll(".nav__dropdown");2
for (let i = 0; i < navDropdown.length; i++) {3
navDropdown[i].addEventListener("click", () =>4
navDropdown[i].classList.toggle("open")5
);6
}7
This is what we get:
JavaScript
1
33
33
1
/*==================== SHOW NAVBAR ====================*/2
const showMenu = (headerToggle, navbarId) => {3
const toggleBtn = document.getElementById(headerToggle),4
nav = document.getElementById(navbarId);5
6
// Validate that variables exist7
if (headerToggle && navbarId) {8
toggleBtn.addEventListener("click", () => {9
// We add the show-menu class to the div tag with the nav__menu class10
nav.classList.toggle("show-menu");11
// change icon12
toggleBtn.classList.toggle("bx-x");13
});14
}15
};16
showMenu("header-toggle", "navbar");17
18
/*==================== LINK ACTIVE ====================*/19
const linkColor = document.querySelectorAll(".nav__link");20
21
function colorLink() {22
linkColor.forEach((l) => l.classList.remove("active"));23
this.classList.add("active");24
}25
26
linkColor.forEach((l) => l.addEventListener("click", colorLink));27
28
const navDropdown = document.querySelectorAll(".nav__dropdown");29
for (let i = 0; i < navDropdown.length; i++) {30
navDropdown[i].addEventListener("click", () =>31
navDropdown[i].classList.toggle("open")32
);33
}JavaScript
1
352
352
1
/*========== GOOGLE FONTS ==========*/2
3
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");4
5
/*========== VARIABLES CSS ==========*/6
7
:root {8
--header-height: 3.5rem;9
--nav-width: 219px;10
/*========== Colors ==========*/11
--first-color: #6923d0;12
--first-color-light: #f4f0fa;13
--title-color: #19181b;14
--text-color: #58555e;15
--text-color-light: #a5a1aa;16
--body-color: #f9f6fd;17
--container-color: #ffffff;18
/*========== Font and typography ==========*/19
--body-font: "Poppins", sans-serif;20
--normal-font-size: 0.938rem;21
--small-font-size: 0.75rem;22
--smaller-font-size: 0.75rem;23
/*========== Font weight ==========*/24
--font-medium: 500;25
--font-semi-bold: 600;26
/*========== z index ==========*/27
--z-fixed: 100;28
}29
30
@media screen and (min-width: 1024px) {31
:root {32
--normal-font-size: 1rem;33
--small-font-size: 0.875rem;34
--smaller-font-size: 0.813rem;35
}36
}37
38
39
/*========== BASE ==========*/40
41
*,42
::before,43
::after {44
box-sizing: border-box;45
}46
47
body {48
margin: var(--header-height) 0 0 0;49
padding: 1rem 1rem 0;50
font-family: var(--body-font);51
font-size: var(--normal-font-size);52
background-color: var(--body-color);53
color: var(--text-color);54
}55
56
h3 {57
margin: 0;58
}59
60
a {61
text-decoration: none;62
}63
64
img {65
max-width: 100%;66
height: auto;67
}68
69
70
/*========== HEADER ==========*/71
72
.header {73
position: fixed;74
top: 0;75
left: 0;76
width: 100%;77
background-color: var(--container-color);78
box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);79
padding: 0 1rem;80
z-index: var(--z-fixed);81
}82
83
.header__container {84
display: flex;85
align-items: center;86
height: var(--header-height);87
justify-content: space-between;88
}89
90
.header__img {91
width: 35px;92
height: 35px;93
border-radius: 50%;94
}95
96
.header__logo {97
color: var(--title-color);98
font-weight: var(--font-medium);99
display: none;100
}101
102
.header__search {103
display: flex;104
padding: 0.4rem 0.75rem;105
background-color: var(--first-color-light);106
border-radius: 0.25rem;107
}108
109
.header__input {110
width: 100%;111
border: none;112
outline: none;113
background-color: var(--first-color-light);114
}115
116
.header__input::placeholder {117
font-family: var(--body-font);118
color: var(--text-color);119
}120
121
.header__icon,122
.header__toggle {123
font-size: 1.2rem;124
}125
126
.header__toggle {127
color: var(--title-color);128
cursor: pointer;129
}130
131
132
/*========== NAV ==========*/133
134
.nav {135
position: fixed;136
top: 0;137
left: -100%;138
height: 100vh;139
padding: 1rem 1rem 0;140
background-color: var(--container-color);141
box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);142
z-index: var(--z-fixed);143
transition: 0.4s;144
}145
146
.nav__container {147
height: 100%;148
display: flex;149
flex-direction: column;150
justify-content: space-between;151
padding-bottom: 3rem;152
overflow: auto;153
scrollbar-width: none;154
/* For mozilla */155
}156
157
158
/* For Google Chrome and others */159
160
.nav__container::-webkit-scrollbar {161
display: none;162
}163
164
.nav__logo {165
font-weight: var(--font-semi-bold);166
margin-bottom: 2.5rem;167
}168
169
.nav__list,170
.nav__items {171
display: grid;172
}173
174
.nav__list {175
row-gap: 2.5rem;176
}177
178
.nav__items {179
row-gap: 1.5rem;180
}181
182
.nav__subtitle {183
font-size: var(--normal-font-size);184
text-transform: uppercase;185
letter-spacing: 0.1rem;186
color: var(--text-color-light);187
}188
189
.nav__link {190
display: flex;191
align-items: center;192
color: var(--text-color);193
}194
195
.nav__link:hover {196
color: var(--first-color);197
}198
199
.nav__icon {200
font-size: 1.2rem;201
margin-right: 0.5rem;202
}203
204
.nav__name {205
font-size: var(--small-font-size);206
font-weight: var(--font-medium);207
white-space: nowrap;208
}209
210
.nav__logout {211
margin-top: 5rem;212
}213
214
215
/* Dropdown */216
217
.nav__dropdown {218
overflow: hidden;219
max-height: 21px;220
transition: 0.4s ease-in-out;221
}222
223
.nav__dropdown-collapse {224
background-color: var(--first-color-light);225
border-radius: 0.25rem;226
margin-top: 1rem;227
}228
229
.nav__dropdown-content {230
display: grid;231
row-gap: 0.5rem;232
padding: 0.75rem 2.5rem 0.75rem 1.8rem;233
}234
235
.nav__dropdown-item {236
font-size: var(--smaller-font-size);237
font-weight: var(--font-medium);238
color: var(--text-color);239
}240
241
.nav__dropdown-item:hover {242
color: var(--first-color);243
}244
245
.nav__dropdown-icon {246
margin-left: auto;247
transition: 0.4s;248
}249
250
251
/* Show dropdown collapse */252
253
.nav__dropdown.open {254
max-height: 100rem;255
}256
257
258
/* Rotate icon arrow */259
260
.nav__dropdown.open .nav__dropdown-icon {261
transform: rotate(180deg);262
}263
264
265
/*===== Show menu =====*/266
267
.show-menu {268
left: 0;269
}270
271
272
/*===== Active link =====*/273
274
.active {275
color: var(--first-color);276
}277
278
279
/* ========== MEDIA QUERIES ==========*/280
281
282
/* For small devices reduce search*/283
284
@media screen and (max-width: 320px) {285
.header__search {286
width: 70%;287
}288
}289
290
@media screen and (min-width: 768px) {291
body {292
padding: 1rem 3rem 0 6rem;293
}294
.header {295
padding: 0 3rem 0 6rem;296
}297
.header__container {298
height: calc(var(--header-height) + 0.5rem);299
}300
.header__search {301
width: 300px;302
padding: 0.55rem 0.75rem;303
}304
.header__toggle {305
display: none;306
}307
.header__logo {308
display: block;309
}310
.header__img {311
width: 40px;312
height: 40px;313
order: 1;314
}315
.nav {316
left: 0;317
padding: 1.2rem 1.5rem 0;318
width: 68px;319
/* Reduced navbar */320
}321
.nav__items {322
row-gap: 1.7rem;323
}324
.nav__icon {325
font-size: 1.3rem;326
}327
/* Element opacity */328
.nav__logo-name,329
.nav__name,330
.nav__subtitle,331
.nav__dropdown-icon {332
opacity: 0;333
transition: 0.3s;334
}335
/* Navbar expanded */336
.nav:hover {337
width: var(--nav-width);338
}339
/* Visible elements */340
.nav:hover .nav__logo-name {341
opacity: 1;342
}343
.nav:hover .nav__subtitle {344
opacity: 1;345
}346
.nav:hover .nav__name {347
opacity: 1;348
}349
.nav:hover .nav__dropdown-icon {350
opacity: 1;351
}352
}JavaScript
1
108
108
1
<!--========== BOX ICONS ==========-->2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">3
4
<header class="header">5
<div class="header__container">6
<img src="https://pruebaapp.ga/wp-content/uploads/2021/03/profile-1-150x150.jpeg" alt="" class="header__img">7
8
<a href="#" class="header__logo">YOUR LOGO</a>9
10
<div class="header__search">11
<input type="search" placeholder="Search" class="header__input">12
<i class='bx bx-search header__icon'></i>13
</div>14
15
<div class="header__toggle">16
<i class='bx bx-menu' id="header-toggle"></i>17
</div>18
</div>19
</header>20
21
<!--========== NAV ==========-->22
<div class="nav" id="navbar">23
<nav class="nav__container">24
<div>25
<a href="#" class="nav__link nav__logo">26
<i class='bx bxs-disc nav__icon'></i>27
<span class="nav__logo-name">Bedimcode</span>28
</a>29
30
<div class="nav__list">31
<div class="nav__items">32
<h3 class="nav__subtitle">Profile</h3>33
34
<a href="#" class="nav__link active">35
<i class='bx bx-home nav__icon'></i>36
<span class="nav__name">Home</span>37
</a>38
39
<div class="nav__dropdown">40
<a href="#" class="nav__link">41
<i class='bx bx-user nav__icon'></i>42
<span class="nav__name">Profile</span>43
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>44
</a>45
46
<div class="nav__dropdown-collapse">47
<div class="nav__dropdown-content">48
<a href="#" class="nav__dropdown-item">Passwords</a>49
<a href="#" class="nav__dropdown-item">Mail</a>50
<a href="#" class="nav__dropdown-item">Accounts</a>51
</div>52
</div>53
</div>54
55
<a href="#" class="nav__link">56
<i class='bx bx-message-rounded nav__icon'></i>57
<span class="nav__name">Messages</span>58
</a>59
</div>60
61
<div class="nav__items">62
<h3 class="nav__subtitle">Menu</h3>63
64
<div class="nav__dropdown">65
<a href="#" class="nav__link">66
<i class='bx bx-bell nav__icon'></i>67
<span class="nav__name">Notifications</span>68
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>69
</a>70
71
<div class="nav__dropdown-collapse">72
<div class="nav__dropdown-content">73
<a href="#" class="nav__dropdown-item">Blocked</a>74
<a href="#" class="nav__dropdown-item">Silenced</a>75
<a href="#" class="nav__dropdown-item">Publish</a>76
<a href="#" class="nav__dropdown-item">Program</a>77
</div>78
</div>79
80
</div>81
82
<a href="#" class="nav__link">83
<i class='bx bx-compass nav__icon'></i>84
<span class="nav__name">Explore</span>85
</a>86
<a href="#" class="nav__link">87
<i class='bx bx-bookmark nav__icon'></i>88
<span class="nav__name">Saved</span>89
</a>90
</div>91
</div>92
</div>93
94
<a href="#" class="nav__link nav__logout">95
<i class='bx bx-log-out nav__icon'></i>96
<span class="nav__name">Log Out</span>97
</a>98
</nav>99
</div>100
101
<!--========== CONTENTS ==========-->102
<main>103
<section>104
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>105
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>106
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>107
</section>108
</main>👉 Check it in action on Codepen
If you want the dropdown to close when nav is closed then add this to the script:
JavaScript
1
7
1
const main = document.querySelector("main");2
main.addEventListener("mousemove", (e) => {3
for (let i = 0; i < navDropdown.length; i++) {4
navDropdown[i].classList.remove("open");5
}6
});7