Sidebar Menu with sub-menu using HTML CSS & JavaScript

[@CodingNepal]

Nowadays font awesome CDN link/script that I provided not support so your icons may not be showing. Just replace that line no.8 script tag with this

[@daniellopes4050]

where to replace this code? is it complete?

[@daniellopes4050]

Sorry but im a newbie.

[@minalkanth7711]

Aagain it's not working now

[@45sachindige14]

Literally I m searching this tutorial for many days And finally get this perfect one 👌 Just one word for you dude #Awesome

[@CodingNepal]

Thank you so much 😀

[@super-TechCctv]

mainy sirf is liye subscribe kiya hai q k itna acha code milla hai mujhy or wo bhii free to is liye ek subscribe to banta hai. Lekin hats of jo mehnat hai apki love you from Pakistan brother!

[@T00Lazy2Scope]

Followed it step by step checking myself every few lines/change, works great and learned a lot.

[@CodingNepal]

Thank you 😁

[@GG-zj7oi]

This is the best sidebar tutorial I've ever seen!! And with the source code! subscribed! You deserve a lot more subscribers

[@CodingNepal]

Wow, thanks!

[@admdebases-rudye.p.6773]

@@CodingNepal how use it like template ? What is it I need?

[@aartijalgaonkar1709]

Hello...my .sidebar toggleClass is not working...after clicking on bar they are not showing sidebar menu...plz help me

[@CodingNepal]

You may did some mistakes please download codes from description link and check it with your codes.

[@aartijalgaonkar1709]

Yes I corrected@@CodingNepal

[@aartijalgaonkar1709]

I want to add sidebar and navigation bar on same page...plz guide me for this if you can@@CodingNepal

[@Smurfis]

I very much see an artistic approach with that Hover effect mr designer

[@zahidshaikh3122]

You are doing very good social work for poor devs like us. thanks a lot.

[@CodingNepal]

You're welcome... Stay tuned 😁

[@paris6679]

I have 2 questions: How the pages for each menu option will open. 1) For each page do I have to write the menu? 2) If the answer to 1 is no, then where in the code do I insert the page content? Thank you Marcos São Paulo/BR

[@TheMusicalHarmonee]

That was awesome to watch. Can’t wait to build one!

[@CodingNepal]

Have fun!

[@hernanzoccoli2113]

HI there! I have a question, how would you implement a scrolling bar in the sidebar menu? Thanks!

[@CodingNepal]

Just put this... .sidebar{ overflow: scroll; } If this not work... Please contact me on Instagram and I'll do the codes of this and send to you.

[@manjirijawanjal1768]

@@CodingNepal can you please send me the code

[@Smurfis]

These are truly inspirational keep uploading please.. you are fielding me to keep learning

[@CodingNepal]

Thank you 💙😁... Keep learning.

[@Smurfis]

Is it possible to do a version of the css for this header, I will I just get stuck a lot and get.. disheartened with no teacher it’s difficult. But your videos to study and learn from is a positive ♥️ now I just need to work out a few things I don’t get yet..

[@Smurfis]

Song name?

[@CodingNepal]

Song name link is in description... Yes it is possible to styling elements in html file using tag inside tag

[@2010appra]

Currently, when clicked on the menus it opens the submenus and when click another menu it again open the submenu but How to close rest of the opened dropdown submenus while clicking one of the menu?

[@CodingNepal]

You may did some mistakes on codes.... Download codes from here - www.codingnepalweb.com or contact me Instagram for further help - instagram.com/coding.np

[@bsparaujo]

Learned so much in this video! thanks for sharing.

[@CodingNepal]

So glad!

[@albertojeraldr.3520]

thank you for the wonderful lesson i watch i hope you got more blessings to come thank you have a great day always!

[@CodingNepal]

Thank you too

[@kasa1982]

Hi Mr. Very nice. I have just one doubt, When I clicked over a submenu option, one of the menus remains selected. How can I remove when clicked above other option menu?

[@korkmazmerve]

thanks for sharing such an amazing video

[@CodingNepal]

Glad you enjoyed it!

[@vivektrivedi8086]

Is there any way to put an with a source in white body area?

[@CodingNepal]

Yes...you can use any other on the white space like video, images etc.

[@miamaxim7662]

5:57 how did you get the hover sound :))

[@justexceed8353]

how do you link the html pages of the submenu without collapsing the submenu after getting directed? for example i clicked on Features > Pages, the dropdown "Features" is open on the main page, when i get directed to the "Pages", the sidebar menu should be open and the Features dropdown should also still be open while it is highlighted as it is active.

[@semnomeporenquanto2]

Can you explain to me why the links are only colored when the a href="#"?

[@TheAlibaadshah]

good but my question is that. side bar active show as block when i click then side bar hide?

[@CodingNepal]

I didn't understand

[@TheAlibaadshah]

how i send screen short of this site email? fb link?

[@camelalejandro]

Hola, no me funciona el botón de salida. Me dice que el objeto no se encuentra localizado. Ya verifique que la ruta se encuentre en ..procesos/salida.php. lo coloque el href de la etique a. ¿Cuál podría ser el error?. Erro 404.

[@flick--spadegaming9617]

arey fellow nepali boro good job hai keep going

[@CodingNepal]

Thanks bro

[@ogunkayodeoluwaseun9348]

thank you so much this tutorial is pretty amazing and I loved how you always referenced what you were styling by going back to the html page and clicking on it for us to follow along... I'm not so great with JS yet is there a work around to make it work with css where the menu does not hide but the dropdowns can be displayed when you click

[@MsamerieJohnson]

Hi, I have a Question: how do you get the content to slide over too, when you push the menu button?

[@CodingNepal]

There i used input checkbox and label.

[@MsamerieJohnson]

@@CodingNepal Thank you🙂

[@proxnoob2]

I want to make background blur when sidebar opens and then remove background blur when sidebar closes and I want to close the sidebar when clicking out side it, can you help pls

[@Thesmoker485]

How can i make the menu displayed from beginning?

[@paulandres7074]

Very helpful! Thank you so much!

[@CodingNepal]

Glad it was helpful!

[@weizhe3103]

i wanted to ask how can i insert an image next to my sidebar???? because i dont really get it on how to do it

[@CodingNepal]

Watch this - kzbin.info/www/bejne/jGGyZaOPZ92LZ5I

[@weizhe3103]

Ok, I get it now, thanks so much

[@ArunSharma-ii4sh]

i like your videos and i learn also.

[@CodingNepal]

Thank you 💙

[@ArunSharma-ii4sh]

@@CodingNepal hello sir i need ur help, sir i want to make mlm web so how to make this site with logic. Plz help me sir.

[@padnote7103]

Bro same style ma tara side bata nabayera mathi bata launa mildaina ? Yeso bandim na bro

[@CodingNepal]

Milxw bro... Mero navbar videos herw... Sikihalxau.

[@tomato7993]

I used this code, but this overrides the other css properties. How can we have two css linked to a single html page without overlapping. Adding the sidebar makes a lot of changes to my original css

[@veerpat5331]

Grear utulity and nice video.. How do i change the fonts for the menu options. Fo instance there is a mandatory to use system fonts like Arial in the company. If i change the style ".Sidebar .text" for Arial font its not working..

[@CodingNepal]

You've to use font-family css property to change font.

[@hiralpatel148]

Thank You so much for creating this video....It helped a lot...

[@CodingNepal]

You're welcome.. Stay tuned 😁

[@liankatheringuevara1437]

Excelente video, gracias por el gran aporte

[@yummypeach3592]

pls answer my question , what app u used? D; i wanna try to use it

[@CodingNepal]

I'm using Atom.. Here is the video - kzbin.info/www/bejne/a2a5m4uKmr6eiqc

[@umpinscherquetagrr6790]

that part of the arrow didn't work for me :( But I'm working! Thank you man! The best video!

[@someonesomewhere5613]

How to add these JS scripts in wordpress i'm using wp and this script is unable to run ->caret btn please give the solution

[@CodingNepal]

Just add this script tag before the end of body tag

[@yeetfetus1540]

the /f00d cross is not working, could you help?

[@CodingNepal]

Make sure you've linked font awesome and you're connected to the Internet.

[@shraddhamandekar3272]

Code have an error... if I add many menus in sidebar that menus at bottom becomes invisible please correct it

[@CodingNepal]

Add this code on css file: body, .sidebar{ overview: auto; } If this won't work contact me on Instagram.

[@shraddhamandekar3272]

I message you on instagram..still it is not working@@CodingNepal

[@manishamin4859]

Useful video. using HTML side menu can we create data entry module and data should save in google sheet.

[@CodingNepal]

Sorry I don't know about it

[@ImranKhan-xi4jz]

i clear some problem to this video sir thank you

[@CodingNepal]

You are most welcome

[@monsurrahman8773]

how to close previous dropdown menu when clicking another dropdown menu?

[@AnjuGupta-jy6lj]

i have written all the code but when i seeing ti on browser only menu icon is coming and when i am clicking on it it is only sliding and showing up my menu

[@blakisdds2787]

bonjour, Merci d'abord pour la video, cependant, je n'ai pas compris d'où est sortir le menu 'berger' vers la fin. Ensuite, comment on peut faire pour placer le menu verticalement?

[@xinyuejin3979]

Hi,there.I can’t see the full import url in the video.can anyone type it to me.I’m just a beginner.I don‘t know if it is necessary for the Js file.

[@musfiqurrahman8279]

how can you do this? left side coding & right side result at a time???

[@blessed-favored]

Good job. Kindly do a video with both the top navbar and the sidebar.

[@CodingNepal]

Just watch our navbar videos and changes some codes.

[@phen1768]

Thank you for your great video! but i have a problem when i click .feat-btn, it does toggle but after 1 sec the page refresh itself automatically. How can i solve this?

[@CodingNepal]

Have you downloaded my codes?

[@phen1768]

No, i haven't. I wrote all code just like in your video.🥺

[@CodingNepal]

Now download my codes and check where you did mistakes.

[@phen1768]

Thank you, I found my issue because i forgot to put # in href. :)

[@mahmudabd41]

Bro I was walking with you step by step, but when I’m clicking the caret-down the hidden ul isn’t showing. The only thing I didn’t understantd is the show we added after feat-show.show, where did the .show came from?

[@CorawlKings]

Same

[@CorawlKings]

I have the excact same problem

[@CorawlKings]

did you fint the answer yet?

[@yasirijaz3238]

Which software u r using for coding

[@CodingNepal]

Atom.. I've made a video on it - kzbin.info/www/bejne/a2a5m4uKmr6eiqc

[@yasirijaz3238]

@@CodingNepal thanks👍

[@sahildudani4658]

I am using these code in nuxt so in click how i use javascript in this?

[@andreaagresti608]

I saw that you write a JQuery function for both dropdowns. isn't there a way to write a single function for both?

[@CodingNepal]

Single function will open both Drop-down at same time. So I created onclick function for each dropdown.

[@yvng4697]

but why did u use $ on the js? mine doesnt work

[@bermanramadhan872]

can you make the main menu shrink when the side bar appear, thanks that would be so helpful

[@CodingNepal]

Sure.. Stay tuned 💙

[@SandeepKumar-bt3hw]

span function not working in my computer why?

[@Roro-mf8oe]

Hi, Thank you for the superb video. If I add some content in the content area and the page is not scrolled up and down. please let me know how to resolve it?

[@CodingNepal]

First add overflow: scroll; and the sidebar has also position: fixed; so your page isn't scrolled... Change the position of sidebar to position: relative; .. You can contact me on Instagram for further help - instagram.com/coding.np

[@bambindien3327]

Thank U for this nice tutorial. Is it also possible to let the sub menu slide down smoothly?

[@CodingNepal]

Yes it's possible.

[@e-boipidif6737]

Hlw, I need this code...when I click on download button, it said that Maintenance mode is on...

[@CodingNepal]

You can get source codes here codingnepalyt.blogspot.com

[@e-boipidif6737]

@@CodingNepal thanks a lot

[@sahiltiwari5590]

amazing background music, and video also

[@CodingNepal]

Thank you 💙

[@matheusvieira7762]

is it possible to open this sidebar in right side of the page?

[@samuelzin8267]

How do I add opacity to this menu?

[@CodingNepal]

use opacity property in css

[@kennethdelgado2001]

the @import url in the css part, it's not complete. what's the full code of it?

[@CodingNepal]

That is google font link. You can add there any fonts. If you want it then contact me on Instagram.. I'll send you code.

[@BirukHailu-us9gf]

Thanks it is very helpful

[@RicardoBelfort]

Hello there, I`m trying to implement this in my project but I'm using Angular 8 and unfortunately is not working. Can you help?

[@CodingNepal]

Send me your code here - instagram.com/coding.np

[@RicardoBelfort]

CodingNepal ok I’ll send to you thanks

[@Winn-n]

me too, i want to implement it into my angular project but this is so confusing @@

[@ahmedyasin5684]

Hi, is there a video explaining how to create input forms after clicking on the some sidebar menu? great video by the way, i followed your step and i could achieve the same sidebar menu, keep it up please.

[@vivektrivedi8086]

Instead of sub menu text I inserted svg files icon, which sowing properly in chrome and Microsoft eade, but in Firefox and internet explorer submenu showing blank

[@CodingNepal]

Maybe they aren't support.

[@vivektrivedi8086]

@@CodingNepal ok

[@justynaszulecka9691]

Thanks for sharing!

[@CodingNepal]

Thanks for watching!

[@ashishsivadas18]

I'm facing a problem with the font awesome icons and its style properties. Could u plz help me. And also please provide me the font awesome js link. I didn't get anything like this.

[@CodingNepal]

You can get source codes download link in the description.

[@ainurrahman5826]

Great videos

[@CodingNepal]

Thank you 💙

[@jureeanne3108]

what is the full @import url in css?

[@CodingNepal]

Here it is: @import url('fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

[@jureeanne3108]

@@CodingNepal thank you 😀

[@peterhuszar2132]

Thank you! Good!

[@CodingNepal]

You're welcome.. Stay tuned 😁

[@daliamohammed1018]

Hey there , I am facing issue with the submenu! i need help!!

[@CodingNepal]

Contact on me Instagram - instagram.com/coding.np

[@mohammadtahmidislam5014]

when is your website going to be available ?

[@b-laggersvlog2182]

Good day! I use this on my project. It's cool but it always overlaps my main content. can you help me how to solve this? thank you so much!

[@CodingNepal]

Give z-index to your content.

[@oscardbg9654]

i'll appreciate if you write jquery instead of javascript on the title, because its confusing and both things aren't the same

[@CodingNepal]

I apologize for that.

[@abraradnan854]

useful tutorial, I hope it responsive too

[@CodingNepal]

Here is responsive sidebar video - kzbin.info/www/bejne/mWbOiH6keriIoLs

[@typicalprogrammer3542]

Can you please make a responsive megamenu . Btw, Great Content.

[@CodingNepal]

I'll make video.

[@typicalprogrammer3542]

@@CodingNepal Thank you So much

[@soussysporttv7029]

Can you post videos for courses? HTML and CSS

[@truongminhphuc4337]

i like your answer

[@haripriya.u6951]

How to create submenu without slide bar in dynamically in javascript drop-down

[@shriyanscreativestudios5603]

I liked it very much

[@CodingNepal]

Thank you.. Stay tuned 😁

[@scottsaccenti]

You should put in the title of this vid that you are using JQuery as one of the techs

[@ridmapasan]

I have done everythins according to the video but why submenu dosen't work?

[@NooblantisDistrict]

WOW Uploaded 29 March 2020... I'm here on 29 March 2021 lmao

[@CodingNepal]

😍

[@andrewlu8432]

how to set only one menu open, it one open, other menu is close

[@rkmixy1748]

I have a question can you talk me answer??

[@jvalideshop6399]

thank u bro ;)

[@CodingNepal]

Welcome 😊

[@japbautista1259]

Thank you lods!

[@stouttaaddis989]

Hello, i couldn't find the code on your site. Could you please post a direct link? Thank you.

[@stouttaaddis989]

@@CodingNepal Thank you.

[@sijooj-h1m]

u are great....

[@someshlakhe563]

I didn't even know about jQuery, but adding jQuery link and using javascript like that way i got that jQuery is nothing but just a short-hand

[@techno7761]

Where is result of side menu selection?

[@joaogirao824]

hey, nice video but I need some help with the code to open the submenu.

[@CodingNepal]

How can I help you?

[@joaogirao824]

@@CodingNepal nevermind, It's fixed. Ty anyways

[@kevinsatria8312]

Nice guide, thx

[@kishorkadavil550]

JQuary not relevant these days. Anyhow great content. Thanks

[@CodingNepal]

Yes.. Don't forget to watch our other videos

[@medoxhunter6699]

Great absolutely great

[@arianh]

great 👌👌👍

[@CodingNepal]

Thank you 💙

[@kohbangsai5735]

i hope you make to drag and drop file to the area.

[@CodingNepal]

Ok

[@kohbangsai5735]

@@CodingNepal Thank you so much, sir.

[@andikachsyfurdjasimilyaspa5066]

where i can get the source code?

[@CodingNepal]

Go to our website - www.codingnepalweb.com and search title of this video