Sidebar Menu with sub-menu using HTML CSS & JavaScript
Vložit
- čas přidán 28. 03. 2020
- Sidebar Menu with sub-menu using HTML CSS & JavaScript
Responsive Sidebar Menu using only HTML & CSS
➤ • Responsive Side Menu B...
Responsive Dropdown Menu with Search Box
➤ • Responsive Dropdown Me...
Responsive Mega Menu using only HTML & CSS
➤ • Responsive Mega Menu a...
Download Codes From Here (You may have to search the title of this video there) - codingnepalweb.com
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • BEAUZ & JVNA - Crazy |...
Track: Lost Sky - Dreams pt. II (feat. Sara Skinner) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Lost Sky - Dreams pt. ...
ROY KNOX - Blue Eyed Demon [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • ROY KNOX - Blue Eyed D...
Track: Culture Code - Feel Again (feat. Harley Bird) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Culture Code - Feel Ag...
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
where to replace this code? is it complete?
Sorry but im a newbie.
Aagain it's not working now
I very much see an artistic approach with that Hover effect mr designer
Followed it step by step checking myself every few lines/change, works great and learned a lot.
Thank you 😁
Literally I m searching this tutorial for many days
And finally get this perfect one 👌
Just one word for you dude
#Awesome
Thank you so much 😀
That was awesome to watch. Can’t wait to build one!
Have fun!
This is the best sidebar tutorial I've ever seen!! And with the source code! subscribed! You deserve a lot more subscribers
Wow, thanks!
@@CodingNepal how use it like template ? What is it I need?
You are doing very good social work for poor devs like us. thanks a lot.
You're welcome... Stay tuned 😁
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
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!
Learned so much in this video! thanks for sharing.
So glad!
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.
thank you for the wonderful lesson i watch i hope you got more blessings to come thank you have a great day always!
Thank you too
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?
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
These are truly inspirational keep uploading please.. you are fielding me to keep learning
Thank you 💙😁... Keep learning.
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..
Song name?
Song name link is in description... Yes it is possible to styling elements in html file using tag inside tag
that part of the arrow didn't work for me :( But I'm working! Thank you man! The best video!
Excelente video, gracias por el gran aporte
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?
Very helpful! Thank you so much!
Glad it was helpful!
Good job. Kindly do a video with both the top navbar and the sidebar.
Just watch our navbar videos and changes some codes.
amazing background music,
and video also
Thank you 💙
Thank You so much for creating this video....It helped a lot...
You're welcome.. Stay tuned 😁
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.
You should put in the title of this vid that you are using JQuery as one of the techs
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
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.
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
this tutorial is excellent, and I want ask: How close the sub-menu in the sidebar after closing Hamburger Icon?, because when opening the Hamburger Icon all sub-menu is closed.
i clear some problem to this video sir thank you
You are most welcome
Can you explain to me why the links are only colored when the a href="#"?
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
Thank U for this nice tutorial. Is it also possible to let the sub menu slide down smoothly?
Yes it's possible.
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
thanks for sharing such an amazing video
Glad you enjoyed it!
HI there! I have a question, how would you implement a scrolling bar in the sidebar menu? Thanks!
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.
@@CodingNepal can you please send me the code
i like your videos and i learn also.
Thank you 💙
@@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.
useful tutorial, I hope it responsive too
Here is responsive sidebar video - czcams.com/video/c5kWKnESUjY/video.html
arey fellow nepali boro good job hai keep going
Thanks bro
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?
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
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.
Hello...my .sidebar toggleClass is not working...after clicking on bar they are not showing sidebar menu...plz help me
You may did some mistakes please download codes from description link and check it with your codes.
Yes I corrected@@CodingNepal
I want to add sidebar and navigation bar on same page...plz guide me for this if you can@@CodingNepal
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.
You can get source codes download link in the description.
i'll appreciate if you write jquery instead of javascript on the title, because its confusing and both things aren't the same
I apologize for that.
Useful video. using HTML side menu can we create data entry module and data should save in google sheet.
Sorry I don't know about it
Can you please make a responsive megamenu .
Btw, Great Content.
I'll make video.
@@CodingNepal Thank you So much
Nice guide, thx
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..
You've to use font-family css property to change font.
How can i make the menu displayed from beginning?
I saw that you write a JQuery function for both dropdowns. isn't there a way to write a single function for both?
Single function will open both Drop-down at same time. So I created onclick function for each dropdown.
can you make the main menu shrink when the side bar appear, thanks that would be so helpful
Sure.. Stay tuned 💙
Hi, I have a Question: how do you get the content to slide over too, when you push the menu button?
There i used input checkbox and label.
@@CodingNepal Thank you🙂
how to close previous dropdown menu when clicking another dropdown menu?
the @import url in the css part, it's not complete. what's the full code of it?
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.
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!
Give z-index to your content.
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
Just add this script tag before the end of body tag
I am using these code in nuxt so in click how i use javascript in this?
Great videos
Thank you 💙
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?
how can you do this?
left side coding & right side result at a time???
Thank you lods!
Is there any way to put an with a source in white body area?
Yes...you can use any other on the white space like video, images etc.
Thank you! Good!
You're welcome.. Stay tuned 😁
Hey there , I am facing issue with the submenu! i need help!!
Contact on me Instagram - instagram.com/coding.np
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?
Send me your code here - instagram.com/coding.np
CodingNepal ok I’ll send to you thanks
me too, i want to implement it into my angular project but this is so confusing @@
is it possible to open this sidebar in right side of the page?
WOW
Uploaded 29 March 2020...
I'm here on 29 March 2021
lmao
😍
good but my question is that. side bar active show as block when i click then side bar hide?
I didn't understand
how i send screen short of this site email? fb link?
Code have an error... if I add many menus in sidebar that menus at bottom becomes invisible please correct it
Add this code on css file:
body, .sidebar{
overview: auto;
}
If this won't work contact me on Instagram.
I message you on instagram..still it is not working@@CodingNepal
excelente trabajo pero lo triste es que el autor perdio la voz....
Very good
Can you post videos for courses? HTML and CSS
i like your answer
Thanks for sharing!
Thanks for watching!
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?
Have you downloaded my codes?
No, i haven't. I wrote all code just like in your video.🥺
Now download my codes and check where you did mistakes.
Thank you, I found my issue because i forgot to put # in href. :)
#Excelent!
Thank you 💙
this is great but as a newbie im overwhelmed afff
u are great....
pls answer my question , what app u used? D;
i wanna try to use it
I'm using Atom.. Here is the video - czcams.com/video/55VjXTeYkTE/video.html
when is your website going to be available ?
5:57 how did you get the hover sound :))
Great absolutely great
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
Watch this - czcams.com/video/V0O4pY2xX10/video.html
Ok, I get it now, thanks so much
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?
Same
I have the excact same problem
did you fint the answer yet?
thanks you
Your welcome 💙
thank u bro ;)
Welcome 😊
but why did u use $ on the js? mine doesnt work
thanks a lot
I liked it very much
Thank you.. Stay tuned 😁
Bro same style ma tara side bata nabayera mathi bata launa mildaina ? Yeso bandim na bro
Milxw bro... Mero navbar videos herw... Sikihalxau.
how to set only one menu open, it one open, other menu is close
How to create submenu without slide bar in dynamically in javascript drop-down
Thanks
You're welcome... Stay tuned 😁
GREAT
Thank you 💙
Nice
span function not working in my computer why?
I wish someone would teach me to work so well with CSS and HTML :С
No one will teach you. You have to learn by yourself by watching videos, blogs.
@@CodingNepal I am much better at programming, for example, Javascript, PHP, Other Backend Languages, but with web design trouble
@@fallecido5893 php is more easy
@@kelali i know, i prefer backend
thank u!
You're welcome
Wow Sir
Thank you 💙
How do I add opacity to this menu?
use opacity property in css
I have done everythins according to the video but why submenu dosen't work?
i hope you make to drag and drop file to the area.
Ok
@@CodingNepal Thank you so much, sir.
kindly create a admin panel html css top navigation and left menu responsive
Okk