├── README.md ├── index.html ├── pic.png └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # SideBar-Menu-N19 2 | How to create the SideBar Menu Using HTML CSS and Jquery 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SideBar Menu 6 | 7 | 8 | 9 | 20 | 21 | 22 | 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | 36 |
37 |
    38 |
  • 39 |
    40 |
    Profile
    41 |
    Change Password
    42 |
    Logout
    43 |
    44 |
    • 45 |
46 |
47 |
48 |
49 | 50 |
51 |
52 |
53 |
54 |
55 | profile_pic 56 |
57 |
58 |

Welcome

59 |

Alex John

60 |
61 |
62 | 94 |
95 |
96 |
97 |
98 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque? 99 |
100 |
101 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque? 102 |
103 |
104 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque? 105 |
106 |
107 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque? 108 |
109 |
110 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque? 111 |
112 |
113 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque? 114 |
115 |
116 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque? 117 |
118 |
119 |
120 | 121 |
122 | 123 | 124 | -------------------------------------------------------------------------------- /pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingmarket07/SideBar-Menu-N19/01a97f8b6391e8c2ede23367cf10fc3d2c94a5d2/pic.png -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | list-style: none; 7 | box-sizing: border-box; 8 | text-decoration: none; 9 | font-family: 'Montserrat', sans-serif; 10 | } 11 | 12 | .wrapper{ 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .top_navbar{ 18 | background: #80CBC4; 19 | height: 60px; 20 | display: flex; 21 | position: fixed; 22 | width: 100%; 23 | top: 0; 24 | } 25 | 26 | .top_navbar .hamburger{ 27 | width: 80px; 28 | background: #004D40; 29 | position: relative; 30 | font-size: 28px; 31 | } 32 | 33 | .top_navbar .hamburger .hamburger__inner{ 34 | position: absolute; 35 | top: 50%; 36 | left: 50%; 37 | transform: translate(-50%,-50%); 38 | cursor: pointer; 39 | width: 40px; 40 | height: 20px; 41 | } 42 | 43 | .top_navbar .hamburger__inner > div{ 44 | width: 30px; 45 | height: 2px; 46 | background: #fff; 47 | position: absolute; 48 | top: 0; 49 | left: 0; 50 | } 51 | 52 | .top_navbar .hamburger div.two{ 53 | top: 10px; 54 | width: 40px; 55 | } 56 | 57 | .top_navbar .hamburger div.three{ 58 | top: 20px; 59 | } 60 | 61 | .top_navbar .menu{ 62 | width: calc(100% - 80px); 63 | height: 100%; 64 | display: flex; 65 | justify-content: space-between; 66 | align-items: center; 67 | padding: 0 20px; 68 | } 69 | 70 | .top_navbar .menu .logo{ 71 | color: #004D40; 72 | text-transform: uppercase; 73 | letter-spacing: 2px; 74 | } 75 | 76 | .top_navbar .menu .right_menu ul{ 77 | display: flex; 78 | } 79 | 80 | .top_navbar .menu .right_menu ul li{ 81 | position: relative; 82 | } 83 | 84 | .top_navbar .menu .right_menu ul li .fas{ 85 | font-size: 22px; 86 | cursor: pointer; 87 | color: #004D40; 88 | } 89 | 90 | .top_navbar .menu .right_menu ul li .profile_dd{ 91 | position: absolute; 92 | top: 35px; 93 | right: -10px; 94 | background: #fff; 95 | box-shadow: 0 0 2px rgba(0,0,0,0.5); 96 | padding: 10px 0; 97 | width: 180px; 98 | border-radius: 3px; 99 | display: none; 100 | user-select: none; 101 | } 102 | 103 | .top_navbar .menu .right_menu ul li .profile_dd.active{ 104 | display: block; 105 | } 106 | 107 | .top_navbar .menu .right_menu ul li .profile_dd .dd_item{ 108 | padding: 10px; 109 | cursor: pointer; 110 | color: #004D40; 111 | } 112 | 113 | .top_navbar .menu .right_menu ul li .profile_dd .dd_item:hover{ 114 | background: #E0F2F1; 115 | } 116 | 117 | .top_navbar .menu .right_menu ul li .profile_dd:before{ 118 | content: ""; 119 | position: absolute; 120 | top: -20px; 121 | right: 10px; 122 | border: 10px solid; 123 | border-color: transparent transparent #fff transparent; 124 | } 125 | 126 | .main_container .sidebar{ 127 | position: fixed; 128 | top: 60px; 129 | left: 0; 130 | width: 225px; 131 | height: 100%; 132 | background: #004D40; 133 | transition: all 0.3s ease; 134 | } 135 | 136 | .main_container .sidebar .sidebar__inner{ 137 | position: relative; 138 | } 139 | 140 | .main_container .sidebar .profile{ 141 | display: flex; 142 | align-items: center; 143 | color: #fff; 144 | padding: 20px 0; 145 | white-space: nowrap; 146 | transition: all 0.3s ease; 147 | } 148 | 149 | .main_container .sidebar .profile .img{ 150 | padding: 0 18px; 151 | } 152 | 153 | .main_container .sidebar .profile img{ 154 | width: 45px; 155 | } 156 | 157 | .main_container .sidebar .profile p:first-child{ 158 | font-size: 14px; 159 | color: #80CBC4; 160 | margin-bottom: 3px; 161 | } 162 | 163 | .main_container .container{ 164 | margin-top: 60px; 165 | width: calc(100% - 225px); 166 | margin-left: 225px; 167 | padding: 30px; 168 | transition: all 0.3s ease; 169 | } 170 | 171 | .main_container .sidebar ul li a{ 172 | color: #fff; 173 | font-size: 18px; 174 | padding: 20px 30px; 175 | white-space: nowrap; 176 | display: flex; 177 | align-items: center; 178 | margin-bottom: 1px; 179 | transition: all 0.3s ease; 180 | } 181 | 182 | .main_container .sidebar ul li a .icon{ 183 | margin-right: 15px; 184 | font-size: 28px; 185 | } 186 | 187 | .main_container .sidebar ul li a span{ 188 | display: inline-block; 189 | } 190 | 191 | .main_container .sidebar ul li a:hover, 192 | .main_container .sidebar ul li a.active{ 193 | background: #fff; 194 | color: #004D40; 195 | } 196 | 197 | .main_container .container .item{ 198 | background: #fff; 199 | border: 1px solid #E0F2F1; 200 | margin-bottom: 30px; 201 | padding: 20px; 202 | font-size: 14px; 203 | line-height: 22px; 204 | } 205 | 206 | /* after adding active class */ 207 | .wrapper.active .sidebar{ 208 | width: 80px; 209 | } 210 | 211 | .wrapper.active .sidebar ul li a span.title, 212 | .wrapper.active .profile_info 213 | { 214 | display: none; 215 | } 216 | 217 | .wrapper.active .main_container .container{ 218 | width: calc(100% - 80px); 219 | margin-left: 80px; 220 | } --------------------------------------------------------------------------------