├── pic.png
├── README.md
├── styles.css
└── index.html


/pic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingmarket07/SideBar-Menu-N19/HEAD/pic.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # SideBar-Menu-N19
2 | How to create the SideBar Menu Using HTML CSS and Jquery
3 | 


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>SideBar Menu</title>
  6 | 	<link rel="stylesheet" href="styles.css">
  7 | 	<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
  8 | 	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  9 | 	<script>
 10 | 		$(document).ready(function(){
 11 | 			$(".hamburger .hamburger__inner").click(function(){
 12 | 			  $(".wrapper").toggleClass("active")
 13 | 			})
 14 | 
 15 | 			$(".top_navbar .fas").click(function(){
 16 | 			   $(".profile_dd").toggleClass("active");
 17 | 			});
 18 | 		})
 19 | 	</script>
 20 | </head>
 21 | <body>
 22 | 
 23 | <div class="wrapper">
 24 |   <div class="top_navbar">
 25 |     <div class="hamburger">
 26 |        <div class="hamburger__inner">
 27 |          <div class="one"></div>
 28 |          <div class="two"></div>
 29 |          <div class="three"></div>
 30 |        </div>
 31 |     </div>
 32 |     <div class="menu">
 33 |       <div class="logo">
 34 |         Coding Market
 35 |       </div>
 36 |       <div class="right_menu">
 37 |         <ul>
 38 |           <li><i class="fas fa-user"></i>
 39 |             <div class="profile_dd">
 40 |                <div class="dd_item">Profile</div>
 41 |                <div class="dd_item">Change Password</div>
 42 |                <div class="dd_item">Logout</div>
 43 |             </div>
 44 |           </li>
 45 |         </ul>
 46 |       </div>
 47 |     </div>
 48 |   </div>
 49 |     
 50 |   <div class="main_container">
 51 |       <div class="sidebar">
 52 |           <div class="sidebar__inner">
 53 |             <div class="profile">
 54 |               <div class="img">
 55 |                 <img src="https://i.imgur.com/Ctwf8HA.png" alt="profile_pic">
 56 |               </div>
 57 |               <div class="profile_info">
 58 |                  <p>Welcome</p>
 59 |                  <p class="profile_name">Alex John</p>
 60 |               </div>
 61 |             </div>
 62 |             <ul>
 63 |               <li>
 64 |                 <a href="#" class="active">
 65 |                   <span class="icon"><i class="fas fa-dice-d6"></i></span>
 66 |                   <span class="title">Dashboard</span>
 67 |                 </a>
 68 |               </li>
 69 |               <li>
 70 |                 <a href="#">
 71 |                   <span class="icon"><i class="fab fa-delicious"></i></span>
 72 |                   <span class="title">Forms</span>
 73 |                 </a>
 74 |               </li>
 75 |               <li>
 76 |                 <a href="#">
 77 |                   <span class="icon"><i class="fab fa-elementor"></i></span>
 78 |                   <span class="title">UI Elements</span>
 79 |                 </a>
 80 |               </li>
 81 |               <li>
 82 |                 <a href="#">
 83 |                   <span class="icon"><i class="fas fa-chart-pie"></i></span>
 84 |                   <span class="title">Charts</span>
 85 |                 </a>
 86 |               </li>
 87 |               <li>
 88 |                 <a href="#">
 89 |                   <span class="icon"><i class="fas fa-border-all"></i></span>
 90 |                   <span class="title">Tables</span>
 91 |                 </a>
 92 |               </li>
 93 |             </ul>
 94 |           </div>
 95 |       </div>
 96 |       <div class="container">
 97 |         <div class="item">
 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 |         </div>
100 |         <div class="item">
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 |         </div>
103 |         <div class="item">
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 |         </div>
106 |         <div class="item">
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 |         </div>
109 |         <div class="item">
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 |         </div>
112 |         <div class="item">
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 |         </div>
115 |         <div class="item">
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 |         </div>
118 |       </div>
119 |   </div>
120 |   
121 | </div>	
122 | 
123 | </body>
124 | </html>


--------------------------------------------------------------------------------