├── README.md ├── assets ├── css │ └── styles.css ├── js │ └── main.js └── scss │ ├── base │ └── _base.scss │ ├── components │ └── _dropdown.scss │ ├── config │ └── _variables.scss │ └── styles.scss ├── index.html └── preview.png /README.md: -------------------------------------------------------------------------------- 1 | # Dropdown Menu 2 | ## [Watch it on youtube](https://youtu.be/Loi7mBAYdSs) 3 | ### Dropdown Menu 4 | 5 | - Dropdown Menu Using HTML CSS & JavaScript 6 | - Contains a button that shows and hides the menu. 7 | - Along with an animation when showing the menu. 8 | 9 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode) 10 | 11 | ![preview img](/preview.png) 12 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 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: 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: -------------------------------------------------------------------------------- 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') 13 | -------------------------------------------------------------------------------- /assets/scss/base/_base.scss: -------------------------------------------------------------------------------- 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: -------------------------------------------------------------------------------- 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: -------------------------------------------------------------------------------- 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: -------------------------------------------------------------------------------- 1 | @import 'config/variables'; 2 | @import 'base/base'; 3 | @import 'components/dropdown'; 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Dropdown menu - Bedimcode 14 | 15 | 16 |
17 |
18 | 27 | 28 | 44 |
45 |
46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/dropdown-menu/31243cf2f1ed2082e4587cd6fa5a1a570e229775/preview.png --------------------------------------------------------------------------------