The Dell Menu
May the Flex be with You!

Meouzer meouzer@gmail.com © 2019 Meouzer Consortium
loading
Programmers ask me all the time. Meouzer! How do I make a great professional Menu that I can be proud of? I say it's just just six lines of CSS that form the basis of every great looking Menu!
Meouzer

The Dell menu is possibly the most killer menu we've seen. So we duplicate it by using six magic lines of CSS. Everything else is just mere sizing and positioning that can be done with eye to CSS coordination.

It is to be emphasized that the menu can have mixed vertical columns and horizontal rows. For example you might have a menu that goes vertical-vertical-horizontal-vertical-horizontal. Its easy to accomplish just by setting or not setting the row attribute of an unordered list.

Introduction

The Six Lines of CSS to Make Menus Rock
1ul.menu, ul.menu ul
{
 padding:0;
 list-style:none;
}
  1. Must eliminate paddings
  2. No bullets
2 ul.menu li
{
  margin:0;
  position:relative;
  white-space:nowrap;
  padding:0.5em;
  text-align:left
}
  1. Must eliminate margins
  2. Relative position since submenus are absolute
  3. Nowrap forces browsers to recognize an items intrinsic width and height
3ul.menu li > ul
{
 visibility:collapse;
 position:absolute;
 left:100%;
 top:0;
}
  1. display:none doesn't work with flex.
  2. Must be absolutely positioned or the menu will expand and contract
  3. Left and top are good defaults for a menu's position relative to its parent item. Can be overriden inline if desired
4 ul.menu li:hover > ul
{
 visibility:visible
} 		When hovering over an item, show its menu if any.
5 ul.menu.row, ul.menu ul.row
{
  display:flex;
} 		Allow row/horizontal menus and submenus
6 ul.menu.row > li > ul,
ul.menu ul.row > li > ul
{
  left:0;top:100%;
} 		Best default positioning of submenu of row menu

It doesn't matter how broad or deep the menu goes
The six lines of code you must know
So don't be a fuddy
And this article do study
So you'll have great menus to show

OK! We prettified the menu after the basic six lines, but it needs to be emphasized that the basics work out of the box to accomplish 95% of the work that needs to be done.

To prove this point, see Unadorned Menu, which uses only one extra CSS statement beyond the basics. Also the ordered list on which the menu is based is just an ordered list with absolutely no markup except to indicate which ordered lists should be row menus. That means the basic six lines of CSS are very powerful stuff!

Markups we did for the menu displayed on this web-page are minor.

  1. top of uls set to snap them to grid
  2. heights a few uls set for the same reason
  3. width of uls (or lis) set to create room to float a > symbol indicating an item has submenu

The Menu CSS and HTML (auto generated)


CSS for the Menu






HTML for the Menu