Being new to programming, I am currently exploring a problem related to my college application. My goal is to loop through the entire navigation menu and apply an additional CSS class that will modify its style. I also need this modification to affect the submenus as well!
Although I have made some progress using JQuery, I believe there might be a more efficient way to accomplish this task using vanilla JavaScript.
$(document).ready(function () {
var speed = 200;
$(".sidebar-menu > li.have-children > a").click(function(e){
e.preventDefault();
if ( ! $(this).parent().hasClass("active") ){
$(".sidebar-menu li ul").slideUp(speed);
$(this).next().slideToggle(speed);
$(".sidebar-menu li").removeClass("active");
$(this).parent().addClass("active");
} else {
$(this).next().slideToggle(speed);
$(".sidebar-menu li").removeClass("active");
}
}); });
// ADD CLASS="SELECTED" TO "A" HTML ELEMENT IN "parent-menu" LINK
$(document).ready(function() {
$(".parent-menu").click(function () {
$(this).addClass("selected");
$(".parent-menu").not(this).removeClass("selected");
}); });
// ADD CLASS="SELECTED" TO "A" HTML ELEMENT IN "children-menu" LINK
$(document).ready(function() {
$(".children-menu").click(function () {
$(this).addClass("selected");
$(".children-menu").not(this).removeClass("selected");
}); });
Here's an example implementation: https://jsfiddle.net/clovisrosa/gw3myLfs/1/
The initial concept for this menu design was inspired by the "VSCode Docs" website. https://code.visualstudio.com/docs
As observed in the demonstration, clicking on the menu items triggers a change in style. However, I aim to have the "Home" button pre-selected when the page loads and then shift its selection as other buttons are clicked. Additionally, the current code appears somewhat convoluted!