Member Avatar for kavithakesav

Hi All,

I need help in switch type menu.
I have a code for switch type menu (when u click on link sub links will come), but same effect i need on mouse over its self (without clickng i need this effect).

Plzzzzzzzzzzzzzzzzzzz

  • 2 Contributors
  • 2 Replies
  • 99 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by kavithakesav

Dani AI

Generated

Nice — replacing onclick with onmouseover (as suggested) is what used and it does provide the hover behavior. A few practical refinements make that pattern more robust across browsers, keyboard users, and touch devices.

Using mouseenter/mouseleave avoids the bubbling quirks of mouseover/mouseout:

const items = document.querySelectorAll('.menu > li');

items.forEach(li => {
  li.addEventListener('mouseenter', () => li.classList.add('open'));
  li.addEventListener('mouseleave', () => li.classList.remove('open'));
});

For unified pointer input (mouse, pen, touch) prefer pointerenter/pointerleave when available, and keep a touchstart fallback so touch users can open submenus without accidental navigation:

li.addEventListener('pointerenter', handler);
li.addEventListener('pointerleave', handler);
// fallback
li.addEventListener('touchstart', e => {
  li.classList.toggle('open');
});

Accessibility notes: hover-only menus exclude keyboard users. Add CSS :focus-within so keyboard focus opens the submenu, and use ARIA attributes on the trigger (for example aria-haspopup="true" and toggle aria-expanded) so screen readers understand the state:

.nav li:hover > ul,
.nav li:focus-within > ul { display: block; }

Finally, avoid inline handlers, use event delegation where convenient, close open menus on outside click, and add a small delay on mouseleave (via setTimeout/clearTimeout) to reduce flicker. Test the final behavior with keyboard navigation, a screen reader, and on mobile to ensure a consistent and accessible experience.

Recommended Answers

All 2 Replies

Member Avatar for ~s.o.s~

And replacing the onclick with onmouseover doesn't seem to work?

Member Avatar for kavithakesav

Hey, thanq. Its working fine...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.