Active Menu Item In Offcanvas Menu With Link To Anchor
Cufe
Hello, I have a Onepage website, the menu items in the menu are made up of anchors, how can I get the menu item to be marked as active after clicking on it (I can edit the css), but I assume that this will be solved using java script. Template Helix Ultimate. And one more note: would it be possible to add to the default state of the template so that such JS is incorporated into the template? I think it will be useful for other users when they are creating a Onepage website. As a second JS, a script can be added that closes the offcanvas menu after clicking on the menu item referring to the anchor (menu item type external URL address)
Toufiq
Accepted AnswerHi there,
Thank you for reaching out, and I apologize for any inconvenience caused by this oversight. Which template do you use on your site?
Best regards,
Toufiqur Rahman (Team Lead, Support)
Toufiq
Accepted AnswerCould you kindly grant me access to your Joomla administrator area so that I can investigate the issue you're experiencing? Prior to providing access, please ensure that you have backed up your site. Additionally, it's important to note that providing login credentials is entirely voluntary on your part; we respect your decision either way. However, if you do choose to share the login details, it would greatly expedite the resolution process. Thank you for your cooperation.
Cufe
Accepted AnswerHi, i am attaching it to hidden content. Thank you
Cufe
Accepted AnswerNo, I didn't.
Cufe
Accepted AnswerI have a question: What do you need Super Administrator access to? What do you need to solve? I thought that if you know the template (Helix Ultimate) and have described the problem, that is enough information. As a result, it doesn't matter what the template is, since I use your template, I wrote to this forum for help. It seems to me that you have many questions instead of writing a solution (script). The solution exists on many Onepage pages, which are also created using PageBuilder. That's why I just need to send the solution using a script, or rather I gave you feedback that it is advisable to insert scripts directly into the default settings of the template or to make instructions for this in the documentation. Why do you need so much information and access to a website when you can simulate such a website? This is a basic installation of Joomla 5, the Helix Ultimate template and a few menu items as external links, anchors inserted instead of URLs, and the index page is like an article that has several paragraphs with anchors. Why don't you simply answer, it seems to me that you are just delaying the answer and the solution. Thank you.
Toufiq
Accepted AnswerAdd this code on your template main.js file.
templates/shaper_helixultimate/js/main.js
document.addEventListener('DOMContentLoaded', (event) => {
const handleClick = (e) => {
Array.from(document.querySelectorAll('.offcanvas-inner .menu > [class^="item-"]')).forEach(el => {
const currClass = el.getAttribute('class');
if (currClass.includes('current active')) {
el.classList.remove('current');
el.classList.remove('active');
}
})
e.currentTarget.classList.add('current');
e.currentTarget.classList.add('active');
}
Array.from(document.querySelectorAll('.offcanvas-inner .menu > [class^="item-"]')).forEach(el => {
el.addEventListener('click', handleClick);
});
});