Our mobile menu is getting flagged for having an <a> tag with no href. This is the specific code getting flagged “”$(‘.hs-mobile-trig a’).before(‘<div class=“mobile-trigger”><a>Menu</a></div>’);“”
Should the formatting of this be changed?
On top of this. Our mobile menu usees jQuery, I would love to rewrite the code into vanilla javascript. Has anyone done this for their HubSpot mobile menu? Would it be worth it even?
Hey @SEsposito4,
as somebody who loves jQuery, I have to admit, that getting rid of jQuery is worth a thought, especially since you can do many things with vanilla JS today.
As for your flagged code - it should look like this:
"$('.hs-mobile-trig a').before('<div class="mobile-trigger"><span>Menu</span></div>');"
Also, if you’re thinking about getting rid of jQuery, you might want to think about solving this with pure CSS to minimize the JS code. A CSS solution could look like
.mobile-trigger:before{
content:'Menu';
display:inline-block;
}
best,
Anton
One final question @Anton , if I do convert this whole mobile menu from jQuery to vanilla JS. Would there be any potential dangers to doing that?
Vanilla JS:
document.addEventListener("DOMContentLoaded", function () {
/**
* Mobile Nav
*
* Hubspot Standard Toggle Menu
*/
// Add mobile trigger button with 'Menu'
const mobileTrigLink = document.querySelector('.hs-mobile-trig a');
if (mobileTrigLink) {
const mobileTriggerDiv = document.createElement('div');
mobileTriggerDiv.classList.add('mobile-trigger');
const mobileTriggerLink = document.createElement('a');
mobileTriggerLink.href = '';
mobileTriggerLink.textContent = 'Menu';
mobileTriggerDiv.appendChild(mobileTriggerLink);
mobileTrigLink.before(mobileTriggerDiv);
}
// Event listener for mobile menu trigger
const mobileTrigger = document.querySelector('.mobile-trigger');
if (mobileTrigger) {
mobileTrigger.addEventListener('click', function (event) {
event.preventDefault(); // Prevent default link behavior
document.body.classList.add('mobile-open'); // Add the 'mobile-open' class
});
}
// Close mobile menu on 'close' button click
const closeBtn = document.querySelector('span.close');
if (closeBtn) {
closeBtn.addEventListener('click', function (event) {
event.preventDefault();
document.body.classList.remove('mobile-open'); // Remove 'mobile-open' class
});
}
// Back to top button
const backToTopButton = document.createElement('a');
backToTopButton.id = 'back-to-top';
backToTopButton.href = 'top';
const backToTopIcon = document.createElement('i');
backToTopIcon.classList.add('fa', 'fa-chevron-up', 'fa-2x');
backToTopButton.appendChild(backToTopIcon);
const footerContainerWrapper = document.querySelector('.footer-container-wrapper');
if (footerContainerWrapper) {
footerContainerWrapper.after(backToTopButton);
}
backToTopButton.style.display = 'none';
window.addEventListener('scroll', function () {
if (window.scrollY > 100) {
backToTopButton.style.display = 'block';
} else {
backToTopButton.style.display = 'none';
}
});
// Scroll to top on back to top button click
backToTopButton.addEventListener('click', function (event) {
event.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' }); // Smooth scroll to the top
});
// Add padding to body if no banner area exists
const bannerArea = document.querySelector('.hs-banner-area');
if (!bannerArea) {
document.body.classList.add('hs_has_padding'); // Add padding if no banner exists
}
// Add scroll-body class on scroll
window.addEventListener('scroll', function () {
if (window.scrollY > 10) {
document.body.classList.add('scroll-body');
} else {
document.body.classList.remove('scroll-body');
}
});
// Adjust restaurant item min-height on load/resize
const restaurantItems = document.querySelectorAll('.hs-restaurants-group .hs-item');
function adjustRestaurantItemHeight() {
restaurantItems.forEach(function (item) {
const hover = item.querySelector('.hover');
if (hover) {
item.style.minHeight = hover.offsetHeight + 20 + 'px';
}
});
}
window.addEventListener('load', adjustRestaurantItemHeight);
window.addEventListener('resize', adjustRestaurantItemHeight);
// Smooth scroll for anchor links
const anchorLinks = document.querySelectorAll('a[href*=""]:not([href=""])');
anchorLinks.forEach(function (link) {
link.addEventListener('click', function (event) {
const target = document.querySelector();
if (target) {
event.preventDefault();
window.scrollTo({ top: target.offsetTop, behavior: 'smooth' });
}
});
});
});