Sidebar Menu with sub-menu using HTML CSS & JavaScript
HTML-код
- Опубликовано: 28 мар 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 😁
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
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 😀
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?
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.
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!
You are doing very good social work for poor devs like us. thanks a lot.
You're welcome... Stay tuned 😁
That was awesome to watch. Can’t wait to build one!
Have fun!
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?
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
Learned so much in this video! thanks for sharing.
So glad!
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!
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.
Excelente video, gracias por el gran aporte
Thank You so much for creating this video....It helped a lot...
You're welcome.. Stay tuned 😁
You should put in the title of this vid that you are using JQuery as one of the techs
Very helpful! Thank you so much!
Glad it was helpful!
Thank U for this nice tutorial. Is it also possible to let the sub menu slide down smoothly?
Yes it's possible.
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 💙
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
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.
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
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.
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 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
i clear some problem to this video sir thank you
You are most welcome
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.
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
Can you please make a responsive megamenu .
Btw, Great Content.
I'll make video.
@@CodingNepal Thank you So much
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
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
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?
5:57 how did you get the hover sound :))
thanks for sharing such an amazing video
Glad you enjoyed it!
when is your website going to be available ?
Can you explain to me why the links are only colored when the a href="#"?
how can you do this?
left side coding & right side result at a time???
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.
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.
useful tutorial, I hope it responsive too
Here is responsive sidebar video - ruclips.net/video/c5kWKnESUjY/видео.html
arey fellow nepali boro good job hai keep going
Thanks bro
Nice guide, thx
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🙂
can you make the main menu shrink when the side bar appear, thanks that would be so helpful
Sure.. Stay tuned 💙
Thank you! Good!
You're welcome.. Stay tuned 😁
Thank you lods!
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
How can i make the menu displayed from beginning?
Thanks for sharing!
Thanks for watching!
I am using these code in nuxt so in click how i use javascript in this?
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.
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
😍
#Excelent!
Thank you 💙
how to close previous dropdown menu when clicking another dropdown menu?
Great absolutely great
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. :)
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.
pls answer my question , what app u used? D;
i wanna try to use it
I'm using Atom.. Here is the video - ruclips.net/video/55VjXTeYkTE/видео.html
thank u bro ;)
Welcome 😊
Great videos
Thank you 💙
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.
thanks a lot
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.
Very good
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.
How to create submenu without slide bar in dynamically in javascript drop-down
but why did u use $ on the js? mine doesnt work
excelente trabajo pero lo triste es que el autor perdio la voz....
this is great but as a newbie im overwhelmed afff
Can you post videos for courses? HTML and CSS
i like your answer
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
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?
thanks you
Your welcome 💙
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.
Wow Sir
Thank you 💙
I have a question can you talk me answer??
Nice
span function not working in my computer why?
thank u!
You're welcome
I liked it very much
Thank you.. Stay tuned 😁
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 @@
Thanks
You're welcome... 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.
Hey there , I am facing issue with the submenu! i need help!!
Contact on me Instagram - instagram.com/coding.np
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
how to set only one menu open, it one open, other menu is close
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?
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 - ruclips.net/video/V0O4pY2xX10/видео.html
Ok, I get it now, thanks so much
GREAT
Thank you 💙
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
Where is result of side menu selection?
I have done everythins according to the video but why submenu dosen't work?
hey, nice video but I need some help with the code to open the submenu.
How can I help you?
@@CodingNepal nevermind, It's fixed. Ty anyways
i hope you make to drag and drop file to the area.
Ok
@@CodingNepal Thank you so much, sir.
Seria mas chevere y mejor experiencia que cuando se de click al features o a cualquier otro item los demas se cierren solo.
Verdad jajaj
Seria mas chevere que aprendieras a apreciar el trabajo de otros, y si quieres algo extra, lo hagas tu mismo.
@@lucasgalvez3364 ya lo hice bb, ahora por q te arañas. Solo es un consejo, un punto de vista ahora dije seria más chevere no dije esto no sirve, como estará tu triste vida...
@@cesarcardenas3820 jajaja que combinación de palabras usaste, me quedo sorprendido, a ti ni te conozco, pero por tu comentario, ya deduzco que eres el tipo de gente que le gusta fijarse en lo malo y aun sabiendo eso intenta justificar sus comentarios con es solo un "punto de vista", si tu piensas que mi vida es triste pff, mas triste será la vida de la gente que te tiene cerca y tiene que aguantarte. Aprende a apreciar lo bueno de las cosas.
@@lucasgalvez3364 bebe seria mas chevere que primero entiendas lo que lees 6 después comiences a ladrar todo lo que quieras..