├── asstes ├── css │ └── style.css └── js │ └── app.js ├── README.md └── index.html /asstes/css/style.css: -------------------------------------------------------------------------------- 1 | #sideNav{ 2 | width: 0px; 3 | display: none; 4 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Side Navbar Using JavaScript 2 | **** 3 | ### Using Tools 4 | * HTML:5 5 | * Tailwind CSS 6 | * JavaScript 7 | 8 | ### Live Website link 9 | Click -------------------------------------------------------------------------------- /asstes/js/app.js: -------------------------------------------------------------------------------- 1 | const btn=document.querySelector('.btn') 2 | const sideNav=document.getElementById('sideNav') 3 | 4 | // menu toggle by click 5 | let result=false 6 | btn.onclick=()=>{ 7 | if(sideNav.style.width='0px' && result==false){ 8 | sideNav.style.width = "200px"; 9 | sideNav.style.display = "flex"; 10 | result=true 11 | }else if(result){ 12 | sideNav.style.width = "220px"; 13 | sideNav.style.display = "none"; 14 | result=false 15 | } 16 | } 17 | 18 | 19 | sideNav.onclick=(e)=>{ 20 | if(e.target.classList.contains('link')){ 21 | const li=document.querySelectorAll('li') 22 | // remove style from inactive link 23 | li.forEach(item=>{ 24 | item.classList.remove( 25 | "before:h-[42px]", 26 | "before:left-0", 27 | "before:content-['']", 28 | "before:top-[1px]", 29 | "relative", 30 | "before:absolute", 31 | "before:w-1", 32 | "before:inline-block", 33 | "before:bg-[#ac4743]", 34 | "text-[#ac4743]" 35 | ); 36 | }) 37 | // style active link 38 | e.target.parentElement.classList.add( 39 | "before:h-[42px]", 40 | "before:left-0", 41 | "before:content-['']", 42 | "before:top-[-.5px]", 43 | "relative", 44 | "before:absolute", 45 | "before:w-1", 46 | "before:inline-block", 47 | "before:bg-[#ac4743]", 48 | "before:h-11", 49 | "text-[#ac4743]" 50 | ); 51 | } 52 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Sidebar navigation menu 10 | 11 | 12 | 13 | 24 |
25 | 26 |

27 | This is a heading 28 |

29 |

30 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis veritatis, provident rerum natus tempore cupiditate ex voluptate magnam sit earum, ea cumque, necessitatibus optio sunt nihil. Repellat, dolorem id? Voluptates quo quaerat, itaque laborum minus dicta nobis aliquam vel odio obcaecati animi minima. Fugit autem illum enim rem? Nesciunt porro fuga est! Quo maxime magnam ducimus animi consequuntur! Fuga necessitatibus animi repellendus magnam saepe amet ab at. Ab inventore aperiam accusamus adipisci laudantium quo quas numquam, perspiciatis tenetur, in soluta quod commodi vel velit aspernatur sit. Consequuntur error, voluptatem dignissimos, hic ratione expedita quia sequi aliquid accusantium modi corrupti incidunt nisi cum at inventore nobis soluta est aperiam quae? Deserunt sit nesciunt tempore, aliquam inventore animi tenetur doloremque voluptatibus perspiciatis eaque neque voluptates explicabo cupiditate nemo odit voluptatem debitis fugit blanditiis illo quod. Cum ad dignissimos doloremque. Recusandae minus dolorem eligendi amet voluptatibus blanditiis sunt debitis iste distinctio magnam, expedita repellat? Consectetur pariatur molestias id animi culpa perferendis obcaecati doloremque ut consequuntur, ab aut nobis, laboriosam recusandae, dolores eligendi! Itaque, quaerat quisquam magnam nesciunt nostrum velit, sed maiores recusandae quam, consectetur labore eius aliquid! Laborum itaque, reprehenderit consequuntur illum ipsum, at nihil rerum mollitia porro omnis, unde possimus animi accusamus? 31 | 32 |

33 |

34 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis veritatis, provident rerum natus tempore cupiditate ex voluptate magnam sit earum, ea cumque, necessitatibus optio sunt nihil. Repellat, dolorem id? Voluptates quo quaerat, itaque laborum minus dicta nobis aliquam vel odio obcaecati animi minima. Fugit autem illum enim rem? Nesciunt porro fuga est! Quo maxime magnam ducimus animi consequuntur! Fuga necessitatibus animi repellendus magnam saepe amet ab at. Ab inventore aperiam accusamus adipisci laudantium quo quas numquam, perspiciatis tenetur, in soluta quod commodi vel velit aspernatur sit. Consequuntur error, voluptatem dignissimos, hic ratione expedita quia sequi aliquid accusantium modi corrupti incidunt nisi cum at inventore nobis soluta est aperiam quae? Deserunt sit nesciunt tempore, aliquam inventore animi tenetur doloremque voluptatibus perspiciatis eaque neque voluptates explicabo cupiditate nemo odit voluptatem debitis fugit blanditiis illo quod. Cum ad dignissimos doloremque. Recusandae minus dolorem eligendi amet voluptatibus blanditiis sunt debitis iste distinctio magnam, expedita repellat? Consectetur pariatur molestias id animi culpa perferendis obcaecati doloremque ut consequuntur, ab aut nobis, laboriosam recusandae, dolores eligendi! Itaque, quaerat quisquam magnam nesciunt nostrum velit, sed maiores recusandae quam, consectetur labore eius aliquid! Laborum itaque, reprehenderit consequuntur illum ipsum, at nihil rerum mollitia porro omnis, unde possimus animi accusamus? 35 | 36 |

37 |
38 | 39 | 40 | --------------------------------------------------------------------------------