Responsive Dropdown Sidebar Menu using HTML CSS and JavaScript | Side Navigation Bar

[@CodingLabYT]

If you got any queries related to this tutorial, please let me know.

[@MyUmair12345]

Jooppppoppoò

[@SumonJena]

Which IDE you used in this video?

[@BelajarKeren]

Can be used along with bootstrap?

[@abhishekjaiswar9241]

Can you create multi level drop-down sidebar

[@florinionutpolifron6556]

Can you render this side bar with diferent buttons on diferent page? Like facebook navigation. Top navigation change side bar. I got stuck when I've try this..

[@englishlearn8344]

Many KZbinrs sell their project's source code, but you provide us free source code of every tutorial.. Thank you so much bruh.

[@linuxtutorials6594]

@@codingknowledge9148 You are right

[@CodingLabYT]

It's my pleasure, Happy to help

[@cristianmargineanu8279]

@@CodingLabYT you should run adds man, you need to monetize your work... also if you'd record your voice while recording you'll make hole lot of views and subscribers.. hope you well

[@MANOJKUMAR-cc8pu]

Right 👍

[@icedev8078]

@@cristianmargineanu8279 so i love just music c:

[@MohsenAlirezaeian]

This sidebar menu is one of the best sidebars that i know so far But there is two important UX hints that make this sidebar menu to a most premium and modern sidebar menu. 1. Place the hamburger menu button icon on the left of sidebar, so when you click to collapse or expand the sidebar, there is no need to move the mouse cursor on the left or right to close or open the sidebar. 2. Another important hint is when you click on arrow to show or hide the drop-down of every part, it will be better if the previous opened drop-down be closed, i mean for a better User Experience you can set the drop-downs to only one of them be opened at the same time and just when clicked on the another drop-down, the previous opened drop-down become closed. i was planning to design a sidebar menu for my website panel, but your lovely and professional sidebar menu made me Surprised 😍👏

[@CodingLabYT]

Yeah you are right and thanks for your tips.. But to make easy to understand for viewers , I used less codes.

[@MohsenAlirezaeian]

@@CodingLabYT that's so good and very well👏👏

[@KratosMAISTER]

Followed through your tutorial step by step and there was a bug you also noticed and fixed at 37:07 . Hats off and kudos to you sir for such an amazing tutorial and sharing of knowledge, i have learnt so much in terms of CSS coding.

[@CodingLabYT]

Glad to hear that, best regards!!

[@delidolu1adam]

One of the best designs I've ever seen. However, you should also add the following to your project. 1: Light/Dark theme 2: Topbar for Language selector, full screen, search bar, profile etc.

[@thieleslopespossa8849]

A 3 anos atrás eu pensei em um menu dessa forma, por não conseguir dominar programação nunca me arrisquei a fazer, ficou top demais!

[@jjjessee245]

Very educational. I'm relatively new with HTML/CSS, but was able to type along and complete a working model though it was challenging. Your layout asthetic is superb and your CSS code very well organized and easy to learn from. My next challenge will be to adapt this model to a website I'm creating for myself. I'm sure I will be back to this instruction many times before I might be able to gain a full mastery of these concepts. Thank you very much.

[@CodingLabYT]

Glad it was helpful!

[@jjjessee245]

@@CodingLabYT PS: Admitted color-geek. #1d1b31, the more I look at, the more I like it.

[@IITianTaniya]

Many KZbinrs sell their project's source code, but you provide us free source code of every tutorial.. Thank you so much bruh.😊

[@CodingLabYT]

Glad to hear that

[@haldharpatel3915]

This is some serious detailing which I couldn't have think of, thanks for this masterpiece 😍

[@CodingLabYT]

Glad you like it!

[@dryhail]

Thanks! Saves me an hour plus of work. You rock! thumbs up.

[@CodingLabYT]

Glad to hear that.

[@ngapoutomar]

Thanks for the concept

[@arctic_tea.9727]

I'm getting into programming and this helped me so much, thank you! The only thing I don't really understand is .sidebar.close ~ .home-section it all works except this one and I can't understand why.

[@englishmaster869]

You got a sub brother. You saved my 1 hour. Thanks and I am grateful to you

[@geovannygonzalez8379]

is what I was looking for for my very good Dashboard ❤

[@CodingLabYT]

Glad you like it. Best regards!!

[@tomchimere1992]

8:20 from that "iocn-link" i will not sleep today

[@CodingLabYT]

If you have any queries, let me know?

[@rezvanibeastx3452]

Wow! Awesome. Thank you so much

[@CodingLabYT]

Thank you too

[@COFFY_GAMING]

I hope you will reech 1lakh subscribers soon because you always came beautiful and amazing projects for us.

[@CodingLabYT]

Glad to hear that Jugal and thank you for liking my tutorials

[@gilbertog.cavalcante5571]

It's very...very...stunning....simply a work of art!!!

[@CodingLabYT]

Thank you! Cheers!

[@meysamghanavati5526]

Thanks for spreading the knowledge

[@CodingLabYT]

Any time!

[@jobdominic5894]

So much thanks man, I really appreciate it. It is good that something like this exist that helps beginners like me. Thanks!

[@CodingLabYT]

Glad it helped!

[@COFFY_GAMING]

Very awesome project sir 😍

[@CodingLabYT]

Thank you Jugal

[@manuelcaceres8977]

Excellent!! This is that I was looking for

[@CodingLabYT]

Cheers!!

[@gabrielgomes8538]

Thank you, I learned so much html and css from your video

[@CodingLabYT]

Glad it helped!

[@likhilchopde5745]

Really amazing sir ji

[@CodingLabYT]

Thanks a lot

[@normalcoding]

Good tutorial , thanks ✨✨

[@behindthescene2727]

Kamaal ki #webDesign tutorial

[@CodingLabYT]

Glad You like it.. best regards

[@baturserter6540]

Thanks for this amazing tutorial...

[@CodingLabYT]

Gald you like it.. Best regards!!

[@mearn_ctaftsman]

Hello brother, this is really awesome. Really pity on me, I didn't see your channel till today. Just subscribed now :)

[@CodingLabYT]

Glad to hear that. Welcome

[@asfandyar_ali]

Thanks and Excellent. Loved the way you teach. We expect more to come. God bless you dear :)

[@CodingLabYT]

Glad to hear that.. Sure I will

[@asfandyar_ali]

@@CodingLabYT Thank you and will stick to your channel since it's very different from others. I'd expect and appreciate if you could carry on with the complete dashboard pages since you've taught us the sidebar :)

[@CodingLabYT]

Thank you so much Asfandyar

[@carloss2202]

great work and adding value to all the people who want to increase their skills, thanks bro

[@CodingLabYT]

I appreciate that!

[@musfiqrahman2976]

It all works splendidly. Thank you so much for the step-by-step, especially for us, who are just getting into web dev. But I have had only one issue so far, its the navlink overflow. it has two of them: one at 27:42 and another at 34:55. Since only the second one works, the first one connected to in-sidebar scrolling stops working or gets overridden. Any solution to that?

[@CodingLabYT]

You can take source code, link is in video description.

[@SafalKumarRajbanshiMotu]

You are doing a great job. Bro ❤❤

[@CodingLabYT]

Thank you so much 😀

[@DimitarKrumov]

Great Job

[@walaaemam6001]

Thank You Sir♥️

[@CodingLabYT]

Most welcome

[@Onucodes]

Thank you very much for these

[@CodingLabYT]

My pleasure!

[@lakshsinghania]

Hi there , this is really cool and amazing. i have never seen this type of creativity like its really good Just subscribed now & i learned a lot from this video :)

[@CodingLabYT]

Thanks a ton.. and welcome.. Best regards!!

[@clydephillips4728]

well done sir

[@chetankjadhav]

Amazing Thanks for the tutorial and i am new to this learning from your tutorial. ....... 👏👏👏👏👏👏 Along with header and footer can be done an some data adding tables and all ..? will i get tutorial on this..?

[@CodingLabYT]

I have made lots of video tutorials on footer header and other that are essential for website... You can check?

[@petermuthiks]

I love the video because it is easy to follow, but am having two challenges. 1. How can i create a second level drop down. 2. Can the dropdown work the way accordion works (if i open one dropdown the already open dropdown should close)

[@CodingLabYT]

Glad you like it.. you need to add extra code for it

[@suraksha7841]

Thank you for sharing your valuable knowledge. I just admire how you create such beautiful navigation every time. Sometimes/ many times it gets above my head. Request: If you would add instructions by your voice I think it would be easier to understand (I hope its not asking for much). Thanks once again and I am very grateful to you.

[@CodingLabYT]

Wow, thank you!, Okey I will think about it.

[@RukayahGabus]

You are my hero bruh

[@bhagwanparshuramlover742]

It really awesome, great work design, when will do the same to your code will take more time .. so can help me short out time . Give drive or git repository .. there we can get,, thank you again for nice creativity 👍

[@CodingLabYT]

Thanks a lot Manoj.. Source code link has been uploaded on the video description.

[@bhagwanparshuramlover742]

@@CodingLabYT thank you very much ...

[@armagedonnov1017]

thank you was helpful

[@CodingLabYT]

You're always welcome

[@awcabezas]

Good video! 👏🏽👏🏽👍🏽 How would you put text under the Dropdown Sidebar?

[@shaderone07]

This is pretty awesome.

[@CodingLabYT]

Thank you Pixie

[@Youngduck93]

Quality Content! Thanks a lot!

[@CodingLabYT]

Much appreciated!

[@aynikill3365]

good video! Thank you

[@CodingLabYT]

You're always welcome

[@jimmymaina7322]

🔥🔥🔥🔥🔥🔥🔥

[@olanricardo]

Nice... 🤩

[@CodingLabYT]

Thank you! Cheers!

[@alejandroaleman1055]

Excelente, muchas gracias.

[@joaoantunes5450]

WOOW AMAZING

[@CodingLabYT]

Thank you bro

[@ferrywijaya6404]

Try to follow ur tutorial. Need css script source to compare. tq sir

[@Логовотестировщика]

Thanks!

[@CodingLabYT]

You're welcome

[@br1580]

Thanks very much.

[@RonierSilva-wt4nn]

Sensacional❤

[@abtncl1903]

Great jobs bro thank

[@CodingLabYT]

You're welcome Asmus

[@andalonds]

Ok all I figured out how to make it responsive on mobile. add the following to your header.

[@jessadefiesta7890]

Thank you Sir

[@CodingLabYT]

You're welcome Jessa

[@camvan6294]

Great job!! Keep moving forward!!

[@CodingLabYT]

Thank you cam

[@clumes]

Amazing! 👌

[@CodingLabYT]

Thank you Clumes

[@joseluisreyesdalenes1782]

excellent

[@CodingLabYT]

Many many thanks

[@CreativeTutorialsWeb]

This UI is amazing Sir

[@CodingLabYT]

Thank you bro

[@CreativeTutorialsWeb]

@@CodingLabYT You're Welcome Sir

[@figmawithrazib]

very nice tutorial

[@sundayz__]

WOW !! Great Stuff !!! Please upload the source code ;)

[@CodingLabYT]

Thankyou Emmanuel.. I will soon

[@pablooliveira8815]

Thank you very much friend. I wanted to add another submenu inside the submenu... I'm having trouble

[@deriftryd]

Thank you

[@CodingLabYT]

You're welcome

[@bingkaruangsatu1783]

God bless you

[@franciscojunior2052]

Congratulations!! Thank you my brother. Can we use this project? Is it free for use??

[@CodingLabYT]

Yes, of course

[@benedictfebrian4570]

hey brother, thanks for the video, it's absolutely amazing!! But I think there's one think u'r missing, (condition: sidebar close) while the menu icon () was clicked to open the sidebar, the and the show up first before the sidebar fully opened. I think there's something missing about the transition, but I don't know which one to be fixed LOL! So yeah, I do need ur help, thank u!

[@CodingLabYT]

It's easy, just add transition 0.5s for name and job div.. Thank you for liking my tutorial

[@adrielgomescosta]

add: overflow: hidden; (in .sidebar .profile-details {}

[@muhammadsajidrazaansari8074]

Super

[@墨汁-q1o]

很不错的设计

[@umalivealeatoria5474]

Thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@CodingLabYT]

You're welcome

[@jonathanestuardozorinherna9740]

good video bro keep it up

[@dmitrik4610]

it's doesn't work on mobile view, you should add 'overflow-y: scroll' for scrolling sidebar and vh-100 for content wrapper

[@NoufalKottola1]

Wow! Awesome work. I Created the same as per your tutorial. I notice one issue, Scrolling not working with Closed Sidebar. Kindly advice please.

[@CodingLabYT]

We should add limited icon while sidebar closed because we have usedt Tooltip and submenu while hover to show them we can't give overflow scroll while sidebar is closed. Otherwise Tooltip and submenu hides.

[@elmurodxolmurodov8920]

very good

[@mohamedfasil4891]

Thank you and Could you do same thing with using React js ?

[@s1ndestino1]

tanks !

[@CodingLabYT]

Your are welcome

[@fidibspgaming4428]

thankks

[@Dergicetea]

On the minute 9:41, when you were writing the padding: 6px, 6px, 14px, 80px; to set the submenu, it didn't work for me with: .sidebar .nav-links li .sub-menu{ Nothing happened. I had to write without the "li" tag like: .sidebar .nav-links .sub-menu{ Do you know why it did not work with the "li" as in the video? Thank you for your effort and time! :)

[@rezafikkri]

nice, i like this

[@CodingLabYT]

Thank you Reza

[@TheKingTermux]

Hey can I ask? How can the closed sidebar not display a profile photo, but instead use a button like logout? And it doesn't affect the logout button on profile page when the sidebar is opened, and appearing the logout button when sidebar is closed? Thanks

[@VictorAlves-jy6tq]

Wow! man this awesome. U can help me pls? How do I open the site with sidebar closed?

[@CodingLabYT]

Watch this your problem will be solved - kzbin.info/www/bejne/rXbJkqJ3lp5sjrs

[@paulohbsouza]

Like merecido! Parabéns, muito bom!!!

[@spidey354]

Clean code

[@CodingLabYT]

Thanks a lot Adi

[@carlosgomez7002]

Gracias

[@CodingLabYT]

Your always welcome

[@claytonmildy5731]

Hey thanks alot for the video, its awsome! i have a question, how to code and see the result at the same time like you? what did u use for that?

[@CodingLabYT]

You can use live server.

[@claytonmildy5731]

@@CodingLabYT ohh alr, thanks alot

[@claytonmildy5731]

@@CodingLabYT sorry, im a beginner but i followed with the same code with yours but my js didnt work eventho its the same, is there a solution??

[@녹차가좋아-u5x]

Thank you for the awesome video. I am practicing creating a website with this. :). If you don't mind, may I ask a question? I tried to figure it out by myself but it didn't go well. :'-( How should I set the closed sidebar as a default when the page loaded?

[@CodingLabYT]

Add 'Close' class in the sidebar tag first

[@녹차가좋아-u5x]

@@CodingLabYT Thank you so much! it works now!!

[@xxsuperignaxxx8038]

Great video! I just can't figure out how to make the sub menu go up instead of down

[@HeraseemAndMumu]

Thank's for lesson! What is a license of this code? Can i use it in my open source project?

[@CodingLabYT]

Yeah you can..

[@jabbarrefaghatjoo6897]

This is super cool, I have a wordpress website, i always use plugin in my website because I don't have experience in html, css, javascript, does anyone know how can I add this beautiful side menu to my website

[@jonathanbedoya8180]

Hi, thank you for sharing this great side bar, I have a quick question, how can I make the side bar to be closed by default?

[@zebod]

Great..amazing...how can i download this script!

[@CodingLabYT]

Thank you Ferry. Download Link is in Video Description

[@user-do8uv1pb3j]

which IDE do you use?

[@ramalsrougi]

😍😍😍👏

[@anistagoug2957]

Amazing source plz

[@CodingLabYT]

I will upload link soon

[@sheharzadsalahuddin80]

I need to know how to add multiple sub menu in this. Shall be thankful to you

[@TheAK47-Gaming]

Hello , this is amazing , but i wonder if this can handle another level on submenu and how it gonna work

[@Thesmoker485]

and this is well suited to mobile?

[@asfandyar_ali]

A quick suggestion : Hello Prem, What if you make the same tutorial using the grid system instead of display: flex? What's your thoughts on that. Isn't grid system better than the flex? :)

[@CodingLabYT]

Thank you for your suggestion bro.. Grid is better but in the small project.. I go for flex because it is easy to understand for viewers

[@asfandyar_ali]

@@CodingLabYT Thank you bro. I'm learning both flex and grids :)