1
\$\begingroup\$

I created a mega menu using flexbox, and because I'm not really into CSS, a review would be helpful.

I know it would be better to avoid the third ul-level but this is not possible, because the HTML is generated by another system. And we decided to use the second ul level as a marker for a new row in the mega menu.

With saying "Mega Menu" I mean that when you hover over "products" you will not just see a single list of sub items, but instead multiple lists. Often in "Mega Menus" they also add more content like text or pictures (not needed for me).

ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 0 0 0;
  padding: 0;
  position: relative;
  background: red;
}
ul li {
  flex: 1 1 auto;
  display: block;
  text-align: left;
}
ul li:hover {
  background: tomato;
}
ul li:hover ul {
  display: flex;
}
ul li a {
  display: block;
  padding: 1rem 0;
}
ul li ul {
  display: none;
  left: 0;
  width: 100%;
}
ul li ul li {
  flex: 0 0 auto;
}

@media screen and (min-width: 37.5em) {
  ul {
    flex-direction: row;
  }
  ul li {
    text-align: center;
    background: green;
  }
  ul ul {
    position: absolute;
  }
  ul ul a {
    padding: 1rem;
  }
  ul ul li {
    position: relative;
    text-align: left;
  }
  ul ul li ul {
    position: relative;
  }
  ul ul li ul li {
    flex-basis: 100%;
  }
}
<nav>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">products</a>
      <ul>
        <li><a href="#">short</a>
          <ul>
            <li><a href="#">long</a></li>
          </ul>
        </li>
        <li><a href="#">item 1</a>
          <ul>
            <li><a href="#">long item 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">whatever</a>
      <ul>
        <li><a href="#">superlong sub 1</a></li>
        <li><a href="#">s 2</a></li>
      </ul>
    </l>
    <li><a href="#">go</a></li>
    <li><a href="#">on</a></li>
  </ul>
</nav>

\$\endgroup\$
2
  • \$\begingroup\$ Welcome to Code Review. At least for me, a "mega menu" is a foreign term. Can you add a link to some external resources or---even better---describe in your own words what you intended to create? Thanks! (Keep in mind that you don't need to add "Update" or "Edit" to your edits; every post on Code Review has a revision log). \$\endgroup\$
    – Zeta
    Dec 21, 2018 at 16:11
  • \$\begingroup\$ @Zeta Thanks for the welcome. I tried to describe it in my own words. But I thought the term "mega menu" is quite common when talking about css menus. \$\endgroup\$
    – mnewmedia
    Dec 22, 2018 at 23:42

1 Answer 1

0
\$\begingroup\$

I'd change the color scheme, the colors are a retinal burning :) Also, it would make the colors easier to read. Also you have the sub menu over to the left irregardless of what choice is selected. I'm a fan of the choices being under the selection I mouse over myself. Other than that, it looks good!

\$\endgroup\$
1
  • \$\begingroup\$ the color's where just for development =) I tried to just make it as basic as possible and focus on functionality. will think about the choices under the selection. Thanks! \$\endgroup\$
    – mnewmedia
    Dec 21, 2018 at 15:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.