Member Avatar for 3DProf4online

Could you advise please, where it is possible to find ready examples of horizontal menus to implement them into website?

  • 2 Contributors
  • 2 Replies
  • 82 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by 3DProf4online

Dani AI

Generated

Good starter pointer from . For reliable, modern horizontal menus the practical rules are: use semantic markup, style the list with Flexbox for predictable horizontal layout, and make dropdowns work for keyboard and touch (not just hover).

A short checklist and common fixes:

  • Mark up with nav and a ul/li of a links so screen readers and search engines understand the structure.

  • Use Flexbox to lay items out and to handle spacing/wrapping. Example:

    nav ul {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 600px) {
  nav ul { flex-direction: column; }
}

  • Avoid hover-only dropdowns. Use a real toggle (a button) that updates aria-expanded so keyboard and touch users can open menus.

  • Keep tap targets large, preserve visible focus styles, and test with keyboard-only navigation and on phones.

  • For complex menubars follow the WAI-ARIA authoring patterns; for simple collapsible items details/summary can be a low-JS option but test accessibility.

Further reading: MDN nav element (nav element), MDN Flexbox guide (Flexbox tutorial), and the WAI-ARIA Authoring Practices (WAI-ARIA APG).

Recommended Answers

All 2 Replies

Member Avatar for webfoot0

Hi
I found a great horizontal (or vertical) menu system at
http://sperling.com/web-tips.php

I have copied the essentials use on a web site.

The menu is quite configurable in pure css - do not miss the first lines of the web page

Member Avatar for 3DProf4online

oh, I see, thanks, very usesful information

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.