├── css └── style.css ├── images ├── 00.jpg ├── bg.jpg └── logo.png ├── index.html └── js └── script.js /css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | border: 0; 5 | outline: 0; 6 | list-style: none; 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | height: 100vh; 12 | background-image: url('../images/bg.jpg'); 13 | background-repeat: no-repeat; 14 | background-size: cover; 15 | font-family: 'Roboto', sans-serif; 16 | } 17 | 18 | .sidebar { 19 | width: 120px; 20 | height: 100%; 21 | backdrop-filter: blur(6px); 22 | -webkit-backdrop-filter: blur(6px); 23 | background: rgba(10, 10, 10, .65); 24 | box-shadow: 0 8px 32px rgb(2, 4, 24); 25 | border-right: 2px solid rgba(255, 255, 255, .09); 26 | transition: .4s ease-in-out; 27 | } 28 | 29 | .sidebar.open { 30 | width: 360px; 31 | } 32 | 33 | .sidebar .logo { 34 | width: 100%; 35 | height: 240px; 36 | padding: 40px 0; 37 | display: grid; 38 | align-items: center; 39 | justify-items: center; 40 | } 41 | 42 | .sidebar .logo img { 43 | width: 56px; 44 | transition: .4s; 45 | } 46 | 47 | .sidebar.open .logo img { 48 | width: 96px; 49 | } 50 | 51 | .sidebar .logo h3 { 52 | color: #fff; 53 | font-size: 36px; 54 | margin-top: 12px; 55 | font-variant: small-caps; 56 | pointer-events: none; 57 | scale: 0; 58 | opacity: 0; 59 | } 60 | 61 | .sidebar.open .logo h3 { 62 | scale: 1; 63 | opacity: 1; 64 | transition: .4s; 65 | transition-delay: .2s; 66 | } 67 | 68 | .sidebar .nav-title { 69 | color: #dadada; 70 | margin: 40px 0 18px; 71 | pointer-events: none; 72 | opacity: 0; 73 | } 74 | 75 | .sidebar.open .nav-title { 76 | opacity: 1; 77 | transition: .4s; 78 | transition-delay: .2s; 79 | } 80 | 81 | .sidebar nav { 82 | padding: 0 30px; 83 | } 84 | 85 | .sidebar nav .nav-item { 86 | cursor: pointer; 87 | display: flex; 88 | align-items: center; 89 | justify-content: flex-start; 90 | border-radius: 4px; 91 | width: 100%; 92 | height: 56px; 93 | padding: 0 16px; 94 | margin: 8px 0; 95 | color: #fff; 96 | transition: .3s; 97 | } 98 | 99 | .sidebar nav .nav-item.active { 100 | background: #ff328e !important; 101 | } 102 | 103 | .sidebar nav .nav-item:hover { 104 | background: rgba(255, 255, 255, .1); 105 | } 106 | 107 | .sidebar nav .nav-item i { 108 | font-size: 26px; 109 | } 110 | 111 | .sidebar nav .nav-item span { 112 | font-size: 18px; 113 | margin-left: 8px; 114 | opacity: 0; 115 | pointer-events: none; 116 | } 117 | 118 | .sidebar.open nav .nav-item span { 119 | opacity: 1; 120 | pointer-events: visible; 121 | transition: .4s; 122 | transition-delay: .2s; 123 | } 124 | 125 | .sidebar hr { 126 | width: 100%; 127 | height: 2px; 128 | border-radius: 3px; 129 | margin: 40px 0 50px; 130 | background: rgba(255, 255, 255, .1); 131 | opacity: 0; 132 | } 133 | 134 | .sidebar.open hr { 135 | opacity: 1; 136 | transition: .4s; 137 | } 138 | 139 | .sidebar .toggle { 140 | cursor: pointer; 141 | position: absolute; 142 | color: #fff; 143 | top: 180px; 144 | right: -20px; 145 | font-size: 38px; 146 | line-height: 50%; 147 | text-align: center; 148 | border-radius: 50%; 149 | padding: 2px 0 2px 2px; 150 | background: linear-gradient( 151 | 90deg, 152 | transparent 50%, 153 | rgba(10, 10, 10, .65) 50% 154 | ); 155 | transition: .4s linear; 156 | } 157 | 158 | .sidebar.open .toggle { 159 | transform: translateY(48px); 160 | } 161 | 162 | .sidebar .toggle i { 163 | transition: .4s linear; 164 | } 165 | 166 | .sidebar.open .toggle i { 167 | transform: rotateY(180deg); 168 | } 169 | -------------------------------------------------------------------------------- /images/00.jpg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hosseinnabi-ir/Responsive-Glass-Sidebar-using-CSS-and-JavaScript/6fea7d5652cf7ee53b314ed001d7b9bffc97565d/images/bg.jpg -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hosseinnabi-ir/Responsive-Glass-Sidebar-using-CSS-and-JavaScript/6fea7d5652cf7ee53b314ed001d7b9bffc97565d/images/logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CODE WITH HOSSEIN 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | 25 |
26 | 27 | 31 | 32 | 79 | 80 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | const sidebar = document.querySelector('.sidebar'); 2 | const navItems = document.querySelectorAll('nav .nav-item'); 3 | const toggle = document.querySelector('.sidebar .toggle'); 4 | 5 | toggle.addEventListener('click', () => { 6 | 7 | if (sidebar.className === 'sidebar') 8 | sidebar.classList.add('open'); 9 | else 10 | sidebar.classList.remove('open'); 11 | 12 | }); 13 | 14 | navItems.forEach(navItem => { 15 | 16 | navItem.addEventListener('click', () => { 17 | 18 | navItems.forEach(navItem => { 19 | navItem.classList.remove('active'); 20 | }); 21 | 22 | navItem.classList.add('active'); 23 | 24 | }); 25 | 26 | }); 27 | --------------------------------------------------------------------------------