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

👋 Welcome to my channel!
🌟 In this video tutorial, I'll guid you how to build a Responsive Sidebar Menu using HTML CSS and JavaScript | Dropdown Side Navigation Bar step by step guide.
Download Starter Files:
bit.ly/42PV0BK
=================================
👉 Subscribe to my channel to stay up-to-date with the latest web development content.
Don't forget to hit the notification bell to be notified of new uploads!
/ @opensourcecoding
=================================
💻 Want access to all the source codes and more support?
Become my supporter on Patreon and get exclusive benefits.
Follow the link to check it out: / opensourcecoding
=================================
👉 If you have any problems or questions,
Join my Discord channel where I'll be happy to help:
/ discord
=================================
👥 You can also follow me on social media to stay connected and get updates:
GitHub: github.com/opensource-coding
Facebook: / opensourcecoding
=================================
🙋‍♀️ Have a tutorial request or need an explanation on a particular topic?
Leave a comment and let me know. I'd love to hear from you and make content that meets your needs.
=================================
Thank you for watching, and I look forward to helping you on your web development journey! 🚀
#sidebar #webdevelopment #webdevelopmenttutorial #HTML #CSS #JavaScript #MERNStack #MEANStack #LAMPStack #BackendDevelopment #FrontendDevelopment #CodingTutorials #OpenSourceCoding #LearnToCode #ProgrammingTips #CodeNewbie #CodeCommunity #GitHub #Patreon #SocialMedia #SubscribeToMyChannel #NotificationBell #TutorialRequest #ExplanationVideo #ProgrammingEducation #sidebar

[@sanvedesign]

Nice 🎉 From : Sanve Design

[@moiseshonorato7825]

Mano você é muito bom no que faz, parabéns! Abraços do Brasil.

[@rocksirmubala]

How can you add the function that can make the nev to slide back without clicking the menu-btn but outside please please 🙏

[@steveFx69]

Can u please do the mobile version for this

[@moha_kunX]

Please what is the extension ur using while u just type the two first letters of the property in css
Like font size u type only fs and it gives u the font size can u help me to get this !

[@opensourcecoding]

its a feature in vs code not an extension

[@moha_kunX]

@@opensourcecoding thank you my brother i didn't know that because I'm
a beginner

[@naeemanjum6419]

❤❤

[@atultyagi5904]

jQuery is not working in my code as i am following the same code which you have written

[@willianveloso9942]

If you want to avoid using jQuery and use only native JavaScript methods, you can adapt it as follows
function slide_navigation(event) {
// Convert the event object to a DOM element
const clickedElement = event.currentTarget;
// Remove the "active" class from siblings
const siblings = Array.from(clickedElement.parentNode.children);
siblings.forEach(sibling => {
if (sibling !== clickedElement) {
sibling.classList.remove("active");
// Close other submenus
const submenu = sibling.querySelector("ul");
if (submenu) {
submenu.style.display = 'none';
// Remove the "active" class from submenu items
Array.from(submenu.querySelectorAll("li")).forEach(submenuItem => {
submenuItem.classList.remove("active");
});
}
}
});
// Add or remove the "active" class to the clicked element
clickedElement.classList.toggle("active");
// Open or close the submenu of the clicked element
const clickedSubmenu = clickedElement.querySelector("ul");
if (clickedSubmenu) {
clickedSubmenu.style.display = clickedSubmenu.style.display === 'none' ? 'block' : 'none';
}
}
const menu_click = document.querySelectorAll(".menu > ul > li")
menu_click.forEach(element => {
element.addEventListener("click", slide_navigation);
});

[@ismaelharijhon8299]

Can you please show me your VS Code Extension about css

[@opensourcecoding]

Which one?

[@naeemanjum6419]

0:34

[@atultyagi5904]

18:37 from here my code is not working please sort it out

[@furkanasd-eq8vz]

Yazdığımı çevirirsin diye düşünüyorum. Video sahibi bahsetmemiş ama body kısıma jquery script kodunu yazmış ondan dolayı çalışmıyor.Body kısmına cdnjs sitesindeki jquery.js kodunu yaz çalışacaktır.

[@ashishauti8]

Bhai responsive ka matlab pata he na😂

[@daltonrandall4348]

script.js is blank, and github is awful. Thumbs down.

[@IT-CULI]

fucking scam