Member Avatar for TLCJohn

Hi there Guys and Gals

I am looking for some help, is there anywhere on the internet where I can find Pure CSS Code to replicate the main menu on the John Lewis webside. Have a look at the following link http://www.johnlewis.com/ the same kind on menu is on http://www.next.co.uk If any one can help I would be most grateful.

Thanks for reading my post.

All the very best

John

  • 1 Contributor
  • 1 Reply
  • 881 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by TLCJohn

Dani AI

Generated

Short practical notes for : the multi-column / mega-menu look you linked to can be done with pure CSS, but it helps to treat the dropdown as two problems — layout inside the panel (columns) and reliable open/close behavior (hover, keyboard, touch). The WittySparks post you found is a fine starting point; the checklist below fills in gaps you are likely to hit when re-creating John Lewis / Next style navigation.

A minimal, semantic starting structure:

<nav class="site-nav" aria-label="Main">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="has-mega">
      <a href="#">Shop</a>
      <div class="mega">
        <div class="mega-grid">
          <div>
            <h4>Category</h4>
            <ul><li><a href="#">Item</a></li></ul>
          </div>
          <div>...</div>
        </div>
      </div>
    </li>
  </ul>
</nav>

For layout: keep the top-level li as position: relative and the .mega panel as position: absolute; left: 0; width: 100% (or limited max-width). Inside the panel use CSS Grid or the columns module to split content into columns — grid gives the most control for headings + lists. (developer.mozilla.org)

Behavior and accessibility: do not rely on :hover alone. Combine :hover with :focus-within so keyboard users can tab into a submenu and keep it open; for touch/click-only scenarios use a native disclosure (<details><summary>) or a checkbox/label toggle for a JS-free click-open pattern — but test on Safari and screen readers because implementations vary. Follow WAI-ARIA guidance for navigation patterns and prefer semantic lists with aria-expanded only when you manage state. ()

Quick checklist: use semantic markup, build the panel with Grid, add keyboard support (:focus-within), provide a click/tap fallback (details or small JS), test with keyboard + VoiceOver/JAWS + mobile, and avoid over-using ARIA menu roles for site nav.

Member Avatar for TLCJohn

Hi there,

After another search this morning, on the Internet, I found very interesting page which explains how to do a multicolumn menu. If you are looking for the same kind of you, visit the following website for a lot more help.

All the very best to everyone.

John

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.