Learning Code

Flex Menus

There are 3 major types of menus: vertical, horizontal, and horizontal drop-down. Using Flex allows for greater customization and flexibility.

A Basic Horizontal Flex Menu

At it's most basic, a flex based menu doesn't necessarily need a list structure. Keep in mind that without the list structure, a drop down menu is not feasible.

In the HTML

On the Html side, place links inside another element - such as nav (or use a list structure).

<nav id="basicflexmenu">
   <a href="#"> Menu Item 1 </a>
   <a href="#"> Menu Item 2 </a>
   <a href="#"> Menu Item 3 </a>
</nav>

In the CSS

Set the containing element (nav, ul or etc.) as a flex element. By default, this will create a horizontal orientation for the menu. Use justify-content to control the spacing of your links:

#basicflexmenu {display:-webkit-flex; display:flex; -webkit-justify-content: space-around; justify-content: space-around;}

Add some styles for the default link states:

#basicflexmenu a:link, #basicflexmenu a:visited {width: 100%; padding: 10px; text-align:center; background: white; color: cadetblue; }

Add some styles for the hover/focus states (opacity is a quick way to change the hover style in a way that complements your existing colors):

#basicflexmenu a:hover, #basicflexmenu a:focus {opacity: .7;}

A Basic Vertical Flex Menu

In the CSS

The parent element or wrapper should be set to display flex. This places the menu and the side content in a row:

.wrapper {display:-webkit-flex; display:flex; -webkit-justify-content: space-between; justify-content: space-between;}


It is sometimes helpful to use margin to add more space between the child elements:

.wrapper main {margin-left:1%;}


Make sure to set the menu as a flex parent and column. Flex-basis or a width could also be set to the menu:

nav {display:-webkit-flex; display:flex; -webkit-flex-flow: column; flex-flow: column; width:30%;}


Optional styles for the different link states:

nav a:link, nav a:visited {background: white; padding: 10px; margin:10px; text-align:center; color: cadetblue;}
nav a:hover, nav a:focus {opacity:.7;}

A Drop-down Menu with Flex

Setting a list to be a flex-parent element in combination with positioning and visibility creates an easily customized drop-down menu.

In the HTML

A drop down menu will need a list structure with sublists where any drop-downs should be. The list needs to have an id:

<ul id="drop">
    <li> <a href="#"> Menu Item 1 </a> </li>
    <li> <a href="#"> Menu Item 2 </a>
      <ul><li> <a href="#"> Sub Menu Item 1 </a> </li>
         <li> <a href="#"> Sub Menu Item 2 </a> </li>
      </ul>
    </li>
    <li> <a href="#"> Menu Item 3 </a> </li>
   </ul>

In the CSS

Set the list's id as a flex element. By default, this will create a horizontal orientation for the menu. Use justify-content to control the spacing of your links:

#drop {display:-webkit-flex; display:flex; -webkit-justify-content: center; justify-content: center;}


Add some styles to the list - make sure the list items have a relative position so that the drop-down can be positioned accurately:

#drop, #drop li li {background: white; list-style: none;}
#drop li {margin: 0 1px; position: relative; background: rgba(95, 158, 160,.1) }


Add some styles for the default link states:

#drop a:link, #drop a:visited {display:block; padding: 10px 30px; text-align:center; color: cadetblue; text-decoration:none;}


Add some styles for the hover/focus states:

#drop a:hover, #drop a:focus {opacity: .7; background: cadetblue; color:white;}


Add some styles for the for the drop-down - by default the drop-down should be hidden:

#drop li ul {visibility: hidden; opacity: 0; margin:0; width:100%; position: absolute;}


Then make the drop-down visible when hovering over the top-level list item:

#drop li:hover ul {visibility: visible; opacity: 1;}


Some optional styling for the drop-down:

#drop li ul li {margin:1px 0;}


Lastly, to prevent unwanted browser styling:

#drop, #drop ul {-webkit-padding-start: 0; -webkit-margin-start:0;}

Can you use the Try-it Editor to try out these concepts?