Navigation list: horizontal

README.md

Navigation: Horizontal menu

1. Style menu links

2. Create a flexbox container:

   .container {
     display: flex;
   }

3. Use justify-content to control how items are horizontally positioned (when in row direction):

   Centre items within container:

   .container {
     justify-content: center;
   }

   OR, pack items toward the end of the flex-direction:

   .container {
     justify-content: flex-end;
   }

   OR, distribute items evenly on the line; first item is on the start line, last item on the end line:

   .container {
     justify-content: space-between;
   }

   OR, distribute items on the line with equal space around them:

   .container {
     justify-content: space-around;
   }

   OR, distribute items so that the spacing between any two items (and the space to the edges) is equal:

   .container {
     justify-content: space-evenly;
   }

Assumptions

Standard html navigation menu:

<nav>
  <ul class="container">
    <li><a href="#">Fighter</a></li>
    <li><a href="#">Wizard</a></li>
    <li><a href="#">Bard</a></li>
    <li><a href="#">Rogue</a></li>
  </ul>
</nav>

Background material

1. HTML:
   • The Navigation Section element
2. CSS Selectors:
   • Class selectors
3. Flexbox:
   • MDN: Flexbox basics
   • MDN: justify-content
   • Reference: Complete Guide to Flexbox

Relevant Gists

• Reset list defaults
• Vertical nav menu
• Horizontal nav menu - full width

index.html

<nav>
  <ul class="container">
    <li><a href="#">Fighter</a></li>
    <li><a href="#">Wizard</a></li>
    <li><a href="#">Bard</a></li>
    <li><a href="#">Rogue</a></li>
  </ul>
</nav>

style.css

/* Import a fancy font from Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap');

/*******************************************/
/* Objective: Create a horizontal nav menu */
/*******************************************/

.container {
  /* Create flexbox container */
  display: flex;

  justify-content: center;

  /* justify-content: flex-end; */

  /* justify-content: space-between; */

  /* justify-content: space-around; */

  /* justify-content: space-evenly; */
}

/*********************/
/* Additional styles */
/*********************/

/* Usable links are obviously clicakable */
nav a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: indigo;
}

nav a:hover {
  background-color: papayawhip;
}

nav a:active {
  background-color: indigo;
  color: white;
}

/* Reset browser defaults */

nav ul {
  padding-left: 0;  
}

nav li {
  list-style: none;
}

nav a {
  display: block;
}

/* Make it pretty(ier) */
body {
  
  background-color: lightgrey;
  margin: 0;

  font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 36px;
}

nav ul {
  border: 1px solid grey;
}

nav li {
  background-color: white;
}