How to close sidebar menu when click outside of it using html, css & javascript.

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ก.ย. 2024
  • In this video, I will show you how to close a sidebar menu when a user clicks outside of it using HTML, CSS, and JavaScript. This is a great way to improve the user experience of your website or web application.
    We will start by creating an HTML sidebar menu. Then, we will add some CSS to style the sidebar menu. Finally, we will write some JavaScript code that will listen for the click event outside of the sidebar menu and close the menu accordingly.
    For Source Code visit:
    www.maketechst...
    You may have to search ('menu') on website.

ความคิดเห็น • 17

  • @mikesalinas6245
    @mikesalinas6245 5 หลายเดือนก่อน +2

    Bien explicado... genial el vídeo!! Saluditos desde Mty

  • @JupiterTheReal3816
    @JupiterTheReal3816 3 หลายเดือนก่อน

    Great Thing To Show Us!

  • @thestar001Official
    @thestar001Official 7 หลายเดือนก่อน +2

    You know you could have just cut out the first part 😏

  • @bigjoshallen
    @bigjoshallen 11 หลายเดือนก่อน +2

    How come you don't use a links to create the nav bar

  • @raniranu2601
    @raniranu2601 10 หลายเดือนก่อน +1

    How know the background music 😂😂😂😂😂😂😂😂😂😂😂

  • @sogenohata1948
    @sogenohata1948 ปีที่แล้ว +2

    can you simply add ".active" before another class name on CSS, without defining it first on HTML?

    • @Maketechstuffs
      @Maketechstuffs  ปีที่แล้ว +1

      Yes you can add, but if that another class is not in html, then styles will not applied to it. or may be show error, when you add that active class using javascript.

    • @louisestreem
      @louisestreem 5 หลายเดือนก่อน

      @@Maketechstuffs why it dons't work on mine in vscode i followed the steps but it didn't work broooooooooooooooooooooooooooooooooooooooooooo!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    • @Maketechstuffs
      @Maketechstuffs  5 หลายเดือนก่อน

      Source code available on maketechstuff.com website. You can compare both the codes (yours and mines).

  • @verbena0815
    @verbena0815 ปีที่แล้ว +1

    Finally.. thanks sir ❤️

  • @laugh_learn_cartoon
    @laugh_learn_cartoon 8 หลายเดือนก่อน

    Please what's the purpose of that .active class you add to it?

    • @Maketechstuffs
      @Maketechstuffs  8 หลายเดือนก่อน

      I've explained in blog post. www.maketechstuff.com/2022/11/close-sidebar-menu-when-click-outside-of-it.html

  • @farshidmedia
    @farshidmedia ปีที่แล้ว +1

    Perfect 👌

  • @KareemNasser07
    @KareemNasser07 11 หลายเดือนก่อน +1

    It works, thanks

  • @lightingvulture
    @lightingvulture ปีที่แล้ว +1

    thank you