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;}