Navigation list: vertical

README.md

Navigation: Vertical menu - full width

1. Reset default list styles

2. Make the links big and clickable:

   nav a {
     padding: 0.5rem 1rem;
   }

3. Remove the link underline and change default link colour:

   nav a {
     text-decoration: none;
     color: indigo;
   }

4. Add a hover state to provide user feedback:

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

5. Add a click state to provide even more user feedback:

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

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:
   • MDN: Descendant combinator
   • MDN: User action pseudo-classes
   • MDN: :hover
   • MDN: :active

See also

• Navigation: Reset list defaults
• Navigation: Horizontal menu
• Navigation: Horizontal menu - full width

index.html

<nav>
  <ul>
    <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 clickable vertical navigation menu */

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 */
/******************/
body {
  
  background-color: lightgrey;
  margin: auto 10vw;

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

nav ul {
  background-color: white;
  border: 1px solid black;
}

nav li {
  border: 1px solid black;
  text-align: center;
}