Member Avatar for ben.matthews18

Hi,

I'm just playing around with basic mobile site design, here's what i'm trying to do:

I have a button called categories, when it's pressed i want to display all the categories i have below the categories button.

bit like how the 'a:hover' works.

as you can't really use the 'a:hover' class for mobile sites how can i achieve this?

Thanks

  • 3 Contributors
  • 2 Replies
  • 64 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by moyk

Dani AI

Generated

The simplest reliable pattern for a mobile "Categories" button is to treat it as a toggle, not a hover. As pointed out, hover does not map to touch. You can keep your existing list markup (as hinted) and wrap a semantic button around a toggle action. Two practical approaches: use the native details element for quick, accessible behavior, or add a small, accessible JS toggle so you control open/close, animations and focus.

Example (minimal, accessible toggle):

<button id="catsToggle" aria-expanded="false" aria-controls="catsList">Categories</button>

<ul id="catsList" hidden>
  <li><a href="/cat1">Category 1</a></li>
  <li><a href="/cat2">Category 2</a></li>
</ul>

<script>
const btn = document.getElementById('catsToggle');
const list = document.getElementById('catsList');

btn.addEventListener('click', () => {
  const open = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!open));
  if (open) list.setAttribute('hidden', '');
  else list.removeAttribute('hidden');
});

document.addEventListener('click', (e) => {
  if (!btn.contains(e.target) && !list.contains(e.target)) {
    btn.setAttribute('aria-expanded', 'false');
    list.setAttribute('hidden', '');
  }
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') { btn.setAttribute('aria-expanded', 'false'); list.setAttribute('hidden', ''); btn.focus(); }
});
</script>

Notes and best practices: prefer details for quick wins (details on MDN). For a custom toggle follow the ARIA disclosure pattern for aria-expanded and keyboard behavior (WAI-ARIA disclosure guidance). Use click or pointer events (see Pointer Events on MDN), close the menu on outside taps, support Escape, and animate with transform/opacity rather than height for smoother mobile performance.

Recommended Answers

All 2 Replies

Member Avatar for dany12

The html remains the same ,I think that your are talking about jquery and on mouseover do semthing.

Member Avatar for moyk

onMouseOver for a mobile site is quiet useless, considering the user can just press a button, and not pass his mouse over it.
However, if you wish to display more menu items when the user presses the button, then JQuery is the way to go.

Edited by moyk
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.