Sidebar menu

├── preview.png ├── README.md ├── assets ├── js │ └── main.js ├── icons │ └── logo.svg ├── scss │ └── styles.scss └── css │ └── styles.css └── index.html /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/Sidebar-menu-navigation/HEAD/preview.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sidebar Menu Design 2 | ## [Watch it on youtube](https://youtu.be/tXcZsGMTH1U) 3 | ### Sidebar Menu Design 4 | 5 | - Sidebar Menu Design Using HTML CSS & JavaScript 6 | - Contains a button that expands the sidebar. 7 | 8 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode) 9 | 10 | ![preview img](/preview.png) 11 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | // SHOW MENU 2 | const showMenu = (toggleId, navbarId,bodyId) =>{ 3 | const toggle = document.getElementById(toggleId), 4 | navbar = document.getElementById(navbarId), 5 | bodypadding = document.getElementById(bodyId) 6 | 7 | if(toggle && navbar){ 8 | toggle.addEventListener('click', ()=>{ 9 | // APARECER MENU 10 | navbar.classList.toggle('show') 11 | // ROTATE TOGGLE 12 | toggle.classList.toggle('rotate') 13 | // PADDING BODY 14 | bodypadding.classList.toggle('expander') 15 | }) 16 | } 17 | } 18 | showMenu('nav-toggle','navbar','body') 19 | 20 | // LINK ACTIVE COLOR 21 | const linkColor = document.querySelectorAll('.nav__link'); 22 | function colorLink(){ 23 | linkColor.forEach(l => l.classList.remove('active')); 24 | this.classList.add('active'); 25 | } 26 | 27 | linkColor.forEach(l => l.addEventListener('click', colorLink)); 28 | 29 | -------------------------------------------------------------------------------- /assets/icons/logo.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Sidebar menu 12 | 13 | 14 | 59 |

Unete al canal

60 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. 61 | Atque optio odio officiis nostrum nesciunt quam libero. 62 | Cumque impedit veritatis, quibusdam nulla accusantium illo. 63 | In velit laboriosam obcaecati quaerat eaque beatae.

64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap'); 2 | 3 | /*===== VARIABLES CSS Y SASS =====*/ 4 | /*Varibles sass*/ 5 | $nav-width: 56px; 6 | $font-bold: 700; 7 | 8 | /*Variables css*/ 9 | /*===== Colores =====*/ 10 | :root{ 11 | --first-color: #12192C; 12 | --second-color: #F5A623; 13 | --white-color: #EDEDED; 14 | } 15 | 16 | /*===== Fuente y tipografia =====*/ 17 | :root{ 18 | --body-font: 'Quicksand', sans-serif; 19 | --small-font-size: 0.875rem; 20 | 21 | @media screen and (min-width: 768px){ 22 | --small-font-size: 0.938rem; 23 | } 24 | } 25 | 26 | /*===== z index =====*/ 27 | :root{ 28 | --z-back: -10; 29 | --z-normal: 1; 30 | --z-tooltip: 10; 31 | --z-fixed: 100; 32 | --z-modal: 1000; 33 | } 34 | 35 | /*===== BASE =====*/ 36 | *,::before,::after{ 37 | box-sizing: border-box; 38 | } 39 | body{ 40 | position: relative; 41 | margin: 0; 42 | padding: 1rem 0 0 5rem; 43 | font-family: var(--body-font); 44 | background-color: var(--white-color); 45 | transition: .5s; 46 | } 47 | h1{ 48 | margin: 0; 49 | } 50 | ul,li{ 51 | margin: 0; 52 | padding: 0; 53 | list-style: none; 54 | } 55 | a{ 56 | text-decoration: none; 57 | } 58 | /*===== NAV =====*/ 59 | .l-navbar{ 60 | position: fixed; 61 | top: 0; 62 | left: 0; 63 | width: $nav-width; 64 | height: 100vh; 65 | background-color: var(--first-color); 66 | padding: 1.25rem .5rem 2rem; 67 | transition: .5s; 68 | z-index: var(--z-fixed); 69 | } 70 | .nav{ 71 | height: 100%; 72 | display: flex; 73 | flex-direction: column; 74 | justify-content: space-between; 75 | overflow: hidden; 76 | 77 | &__logo{ 78 | display: flex; 79 | align-items: center; 80 | margin-bottom: 2rem; 81 | padding: 0 .5rem; 82 | 83 | &-icon{ 84 | margin-right: 1.2rem; 85 | } 86 | &-text{ 87 | color: var(--white-color); 88 | font-weight: $font-bold; 89 | } 90 | } 91 | &__toggle{ 92 | position: absolute; 93 | top: 1.10rem; 94 | right: -.6rem; 95 | width: 18px; 96 | height: 18px; 97 | background-color: var(--second-color); 98 | border-radius: 50%; 99 | font-size: 1.25rem; 100 | color: var(--first-color); 101 | display: flex; 102 | align-items: center; 103 | justify-content: center; 104 | cursor: pointer; 105 | transition: .5s; 106 | } 107 | &__link{ 108 | display: flex; 109 | align-items: center; 110 | padding: .5rem; 111 | margin-bottom: 1rem; 112 | border-radius: .5rem; 113 | color: var(--white-color); 114 | transition: .3s; 115 | 116 | &:hover{ 117 | background-color: var(--second-color); 118 | color: var(--first-color); 119 | } 120 | } 121 | &__icon{ 122 | font-size: 1.5rem; 123 | margin-right: 1rem; 124 | } 125 | &__text{ 126 | font-weight: $font-bold; 127 | } 128 | } 129 | 130 | /*Show menu*/ 131 | .show{ 132 | width: $nav-width + 112px; 133 | } 134 | 135 | /*Rotate toggle*/ 136 | .rotate{ 137 | transform: rotate(180deg); 138 | transition: .5s; 139 | } 140 | 141 | /*Active links menu*/ 142 | .active{ 143 | background-color: var(--second-color); 144 | color: var(--first-color); 145 | } 146 | 147 | /*Add padding body*/ 148 | .expander{ 149 | padding: 1rem 0 0 12rem; 150 | transition: .5s; 151 | } 152 | 153 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap"); 2 | /*===== VARIABLES CSS Y SASS =====*/ 3 | /*Varibles sass*/ 4 | /*Variables css*/ 5 | /*===== Colores =====*/ 6 | :root { 7 | --first-color: #12192C; 8 | --second-color: #F5A623; 9 | --white-color: #EDEDED; 10 | } 11 | 12 | /*===== Fuente y tipografia =====*/ 13 | :root { 14 | --body-font: 'Quicksand', sans-serif; 15 | --small-font-size: 0.875rem; 16 | } 17 | 18 | @media screen and (min-width: 768px) { 19 | :root { 20 | --small-font-size: 0.938rem; 21 | } 22 | } 23 | 24 | /*===== z index =====*/ 25 | :root { 26 | --z-back: -10; 27 | --z-normal: 1; 28 | --z-tooltip: 10; 29 | --z-fixed: 100; 30 | --z-modal: 1000; 31 | } 32 | 33 | /*===== BASE =====*/ 34 | *, ::before, ::after { 35 | -webkit-box-sizing: border-box; 36 | box-sizing: border-box; 37 | } 38 | 39 | body { 40 | position: relative; 41 | margin: 0; 42 | padding: 1rem 0 0 5rem; 43 | font-family: var(--body-font); 44 | background-color: var(--white-color); 45 | -webkit-transition: .5s; 46 | transition: .5s; 47 | } 48 | 49 | h1 { 50 | margin: 0; 51 | } 52 | 53 | ul, li { 54 | margin: 0; 55 | padding: 0; 56 | list-style: none; 57 | } 58 | 59 | a { 60 | text-decoration: none; 61 | } 62 | 63 | /*===== NAV =====*/ 64 | .l-navbar { 65 | position: fixed; 66 | top: 0; 67 | left: 0; 68 | width: 56px; 69 | height: 100vh; 70 | background-color: var(--first-color); 71 | padding: 1.25rem .5rem 2rem; 72 | -webkit-transition: .5s; 73 | transition: .5s; 74 | z-index: var(--z-fixed); 75 | } 76 | 77 | .nav { 78 | height: 100%; 79 | display: -webkit-box; 80 | display: -ms-flexbox; 81 | display: flex; 82 | -webkit-box-orient: vertical; 83 | -webkit-box-direction: normal; 84 | -ms-flex-direction: column; 85 | flex-direction: column; 86 | -webkit-box-pack: justify; 87 | -ms-flex-pack: justify; 88 | justify-content: space-between; 89 | overflow: hidden; 90 | } 91 | 92 | .nav__logo { 93 | display: -webkit-box; 94 | display: -ms-flexbox; 95 | display: flex; 96 | -webkit-box-align: center; 97 | -ms-flex-align: center; 98 | align-items: center; 99 | margin-bottom: 2rem; 100 | padding: 0 .5rem; 101 | } 102 | 103 | .nav__logo-icon { 104 | margin-right: 1.2rem; 105 | } 106 | 107 | .nav__logo-text { 108 | color: var(--white-color); 109 | font-weight: 700; 110 | } 111 | 112 | .nav__toggle { 113 | position: absolute; 114 | top: 1.10rem; 115 | right: -.6rem; 116 | width: 18px; 117 | height: 18px; 118 | background-color: var(--second-color); 119 | border-radius: 50%; 120 | font-size: 1.25rem; 121 | color: var(--first-color); 122 | display: -webkit-box; 123 | display: -ms-flexbox; 124 | display: flex; 125 | -webkit-box-align: center; 126 | -ms-flex-align: center; 127 | align-items: center; 128 | -webkit-box-pack: center; 129 | -ms-flex-pack: center; 130 | justify-content: center; 131 | cursor: pointer; 132 | -webkit-transition: .5s; 133 | transition: .5s; 134 | } 135 | 136 | .nav__link { 137 | display: -webkit-box; 138 | display: -ms-flexbox; 139 | display: flex; 140 | -webkit-box-align: center; 141 | -ms-flex-align: center; 142 | align-items: center; 143 | padding: .5rem; 144 | margin-bottom: 1rem; 145 | border-radius: .5rem; 146 | color: var(--white-color); 147 | -webkit-transition: .3s; 148 | transition: .3s; 149 | } 150 | 151 | .nav__link:hover { 152 | background-color: var(--second-color); 153 | color: var(--first-color); 154 | } 155 | 156 | .nav__icon { 157 | font-size: 1.5rem; 158 | margin-right: 1rem; 159 | } 160 | 161 | .nav__text { 162 | font-weight: 700; 163 | } 164 | 165 | /*Show menu*/ 166 | .show { 167 | width: 168px; 168 | } 169 | 170 | /*Rotate toggle*/ 171 | .rotate { 172 | -webkit-transform: rotate(180deg); 173 | transform: rotate(180deg); 174 | -webkit-transition: .5s; 175 | transition: .5s; 176 | } 177 | 178 | /*Active links menu*/ 179 | .active { 180 | background-color: var(--second-color); 181 | color: var(--first-color); 182 | } 183 | 184 | /*Add padding body*/ 185 | .expander { 186 | padding: 1rem 0 0 12rem; 187 | -webkit-transition: .5s; 188 | transition: .5s; 189 | } 190 | --------------------------------------------------------------------------------