Member Avatar for jcomputing

I am new to web design and development. I saw a mega menu on this site www.rackspace.co.uk. and love it after days of trying to develop it and lots of research I still can't get me head round how to do it. Does anyone have ideas for all your help is appreciated.

Thankyou

Jonathan

  • 3 Contributors
  • 2 Replies
  • 209 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by gotboots

Dani AI

Generated

For - a pragmatic, testable plan that expands on the hints from and : start with semantic HTML, lay out the panel with CSS Grid/Flex, then add a very small JS layer to handle touch and keyboard and to toggle ARIA states. The goal is progressive enhancement: links work without JS, CSS handles desktop layout, JS fixes touch and accessibility gaps.

<nav class="mega-nav" role="navigation">
  <ul class="menu">
    <li class="menu-item">
      <a href="#" aria-expanded="false">Products</a>
      <div class="mega-panel" aria-hidden="true">
        <div class="col"><a href="#">Product A</a></div>
        <div class="col"><a href="#">Product B</a></div>
      </div>
    </li>
    <!-- repeat items -->
  </ul>
</nav>

Use position: relative on .menu-item and position: absolute on .mega-panel so the panel anchors to its parent. Layout columns with Grid or Flex. Use :focus-within as a CSS-only enhancement (keyboard friendly) and add a small .open class set by JS for touch devices.

.menu-item { position: relative; }
.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-width: 1100px;
  display: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.menu-item:focus-within .mega-panel,
.menu-item.open .mega-panel { display: block; }

.mega-panel .col { display: inline-block; width: 220px; vertical-align: top; }

@media (max-width: 768px) {
  .mega-panel { position: static; display: none; }
  .menu-item.open .mega-panel { display: block; } /* simple accordion on small screens */
}

Tiny JS to toggle ARIA and handle Escape:

document.querySelectorAll('.menu-item > a').forEach(trigger => {
  const panel = trigger.nextElementSibling;
  trigger.addEventListener('click', e => {
    e.preventDefault();
    const open = trigger.getAttribute('aria-expanded') === 'true';
    trigger.setAttribute('aria-expanded', String(!open));
    panel.setAttribute('aria-hidden', String(open));
    trigger.parentElement.classList.toggle('open');
  });
  trigger.addEventListener('keydown', e => {
    if (e.key === 'Escape') {
      trigger.setAttribute('aria-expanded', 'false');
      panel.setAttribute('aria-hidden', 'true');
      trigger.parentElement.classList.remove('open');
      trigger.focus();
    }
  });
});

Quick troubleshooting checklist: avoid hover-only behavior (touchscreens), test keyboard/tab navigation and screen readers, check ancestor overflow or transform (can clip panels or create unexpected stacking contexts), keep content scannable (group related links, limit depth), and start by implementing one item then scale.

Recommended Answers

All 2 Replies

Member Avatar for Sahil89

Its not a big deal buddy, If you know just how these menu of Daniweb works you can do that in any size. Its all done in CSS. Unfortunately I dont have time to give you exact solution. Checkout CSS files on both the sites. Else I am sure some other Daniweber will help you out.
If you are doing it commercially then just search CSS Menu. If you are student then learn the concept and then implement. Maybe I can reply you tomorrow. I hope till that time you will get a reply with CSS.

Member Avatar for gotboots

Google CSS hover menu bud, there are heaps of tutorials and free scripts online

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.