Sidebar Menu | With Sub-Menus - Using HTML, CSS & JQuery

In this tutorial, you can learn how to design an expandable and collapsible sidebar menu with dropdown sub-menus using HTML, CSS, and JQuery.
+ Like and Subscribe 🔔 for More! ❤
∎ Get This Project Source Codes - www.buymeacoffee.com/codingsn...
Book Me 🔖
-----------------------
∎ Book me to Fix your project Bugs & Issues - www.buymeacoffee.com/codingsn...
∎ Book me to Convert your Figma, PSD, and XD Design to an HTML Website - www.buymeacoffee.com/codingsn...
∎ Source Codes & Download Images - codingsnow.com
∎ Download All Source Files On Patreon - / 45915908
∎ Facebook Page - / codingsnow
∎ Instagram - / coding.snow
∎ Support From Paypal - paypal.me/codingsnowget
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - www.buymeacoffee.com/codingsnow
∎ Patreon - / codingsnow
#SidebarMenu #SidebarWithSubMenus
🎵 Background Music
---------------------------------------
Track: Besomorph & Arcando & Neoni - Army [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Besomorph & Arcando & ...
Free Download / Stream: ncs.io/Army
Track: Besomorph & Coopex - Redemption (ft. Riell) [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Besomorph & Coopex - R...
Free Download / Stream: ncs.io/RedemptionYO
____________________
Copyright Disclaimer under section 107 of the Copyright Act of 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, education, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing.

[@kuldeepsingh-wx6qk]

Loved it! So clean!

[@glenpalmer5893]

Thank you for sharing this, it's a fantastic tutorial! Very much appreciated.

[@CodingSnow]

You're very welcome!

[@Poosmiles]

THANK YOU YOU MADE MY PROJECT LOOK GOOD 🤗❤️😊

[@muhammadhussainshahbaz3812]

Excellent you make it very clean ♥

[@maximebgt857]

Very good work! I like the way you code!

[@CodingSnow]

Thank you very much! ❤

[@tiagobarbosa9993]

Very good!!! thank you

[@samuelk1623]

New look! great, Always perfect! thank you my friend ❤❤❤

[@CodingSnow]

Thanks my friend! ❤

[@kt-rin]

New tutorial! Thank you.

[@CodingSnow]

You're welcome ❤

[@webappreport3387]

Great video thank you

[@CreativeTutorialsWeb]

Great Video

[@hoangphuc1072]

Very Nice sir, thank you for sharing

[@xRoxuno]

Thanks bro !!

[@johnrusselfabroa3159]

Thankyou for this videooooo, I appreciate your tutorial so muchhhhh

[@CodingSnow]

You're most welcome! ❤️

[@cdtbotoficial4319]

Thanks. A new suscriptor

[@burgasdragonheirsilentgods]

Great work and code !

[@CodingSnow]

Thank you! ❤

[@seeker3686]

Intro is amazing...wow!😍

[@CodingSnow]

Thank you! ❤

[@angelomacapuno8542]

Thank you for posting

[@CodingSnow]

You're most welcome!

[@EhsanBahrami-hw3qo]

Thankkkkssss❤❤❤

[@3iTemplateITSolutions]

Thank you.

[@maurov6861]

Thanks a lot

[@farukweb]

Really nice menu ......

[@ComputerScienceSimplified]

Great video, keep up the amazing work! :)

[@CodingSnow]

Thank you ❤

[@romuloalves9349]

Ótimo vídeo parabéns 👏.

[@CodingSnow]

Thank you very much! ❤

[@um9963]

Good job

[@EhsanBahrami-hw3qo]

Verrrrrrrryyyy coolll

[@CreativeTutorialsWeb]

Nice work

[@CodingSnow]

Thank you ❤

[@rioabadiid]

Nice!

[@CodingSnow]

Thank you ❤

[@psalm2326]

you didn't click the sub-menu when the main menu still open up
when you hit the sub menu did the main menu still open up and not collapse?

[@dabygoidk5957]

very good video keep up the good work

[@CodingSnow]

Thank you friend!

[@halith2004]

Hey i want to do this same nav bar in right side, what line I want to change in your code. Please replay bro...

[@iradi99]

Brother you are the best👏 and how to add these empty cell texts?

[@kmsknight6600]

Thank You

[@CodingSnow]

You're welcome!

[@KelvinGuerra-ub5wp]

would it still work if the sub menu inside the menu had sub menu itseld. More like a deeply nested submenu

[@raphaelryanparas2226]

how to put text or images in the sub menus that you make?

[@lenalien]

How can I make this menu fixed to the side and just the content being scrollable

[@HermanHiltonx]

Did the Submenu stay open after select and after the Pagerefresh?

[@pathmashanthasenanayaka3193]

wow 😍 nice intro. I like it 💜️💜️

[@CodingSnow]

Thank you ❤

[@rumakumarithakur15_7_7]

Please make a video on how to make image slider using html only

[@retailescapeartist]

I really need to brush up on my jQuery stuff. Mostly just have a lot I learned and then kind of forgot it.

[@rijallatipudin]

terimakasih, semoga sukses

[@minhtriet2269]

Nice

[@CodingSnow]

Thank you ❤

[@thegamer7141]

Help doesn't work

[@techno7761]

Where is result of side menu selection?

[@alainden7802]

salut j'ai fait la meme chose mais un menu déroule l'autre bloque

[@humerasad]

How to collapse expanded drop-down when user click second sub-menu? 0:40

[@arvinds7381]

Hey great video ,and I'm having a doubt.I'm coding in VS code, like in 8.27 , i'm not able to make a click event , after writing that code. can you explain that to me again? What should I do? Thanks in advance.

[@abdulhalimabedin3123]

Can i use this offline?

[@AnimeThings_]

Awesome bro please make next version of 10k special please bro

[@CodingSnow]

Thanks bro! ❤
what did you mean by the next version?

[@AnimeThings_]

Sry for late reply I mean please bro make another cool video on 10k special effects

[@CodingSnow]

@@AnimeThings_ Oh..the circle burst animation effect. Okay, I Will do a new tutorial 🙂

[@carterjm]

Awesome video! Great content!
I love the the vanilla HTML and CSS.
I would love to see vanilla JavaScript instead of JQuery, but that is just me. :-)
const subBtn = document.querySelector('.sub-btn');
subBtn.addEventListener('click', function(e) {
//Do Stuff
}

[@carterjm]

Ah, SlideToggle. Nevermind. :-)

[@CodingSnow]

Thank you! ❤️
Also, I loved to do it with vanilla javascript too.
But the issue is "If there are more sub-menus", it will be a problem. It looks easy but it is hard to implement using vanilla js. Trust me I tried it hard.

[@JhonyHDV]

Jquery 2022?

[@MyGeorge1964]

Nobody use jQuery anymore especially with all the other more exciting libraries - you don' want extra weight. I know it's 2yo. Even then it was old.

[@satoshi151]

what app are you using ??

[@CodingSnow]

it's Atom editor

[@betao7070]

boa!

[@Harishcoder]

Hi iam too an HTML master.iam in eager to spread my knowledge. But i didn't find any suitable platform. If you give me an chance I will be an better teaching partner with you. Thank you. Stay ☺ smiled

[@alexandresiedschlag5896]

No github code :(

[@andikachsyfurdjasimilyaspa5066]

where i can get the source code?

[@CodingSnow]

Visit the channel website.

[@Abdelkarim726]

gode

[@youngjojo3052]

Save my ass, thank you friend

[@CodingSnow]

My pleasure! 😊

[@azizrahman3225]

Bro is it illegal if I copy your code

[@CodingSnow]

No, you can use it for you projects or any educational purpose under fair use.

[@azizrahman3225]

@@CodingSnow 🙏🏼🙏🏼🙏🏼

[@JamesWelbes]

Ew jQuery

[@CodingSnow]

Trust me I wanted to do it with javascript 🙂. I tried hard. But couldn't achieve some functionalities properly. Compared to javascript this sidebar is very effective with jquery for use.

[@JamesWelbes]

@@CodingSnow that's legit I wouldn't be able to do it with vanilla js either

[@PaulGreen-lk1ym]

Tired of tutorials like this... Ideal scenarios. Show me table with 100500 columns and with unpredictable cell content. Show me sidebar with 100500 nav items and with super long link text. I want to see suffering!