Simple CSS Vertical Navigation Menu

There is a great article that explains how to build a simple CSS menu in detail. However, I want to build my own and record each step in my own tongue.

First of the first is to clarify requirements. Requirements are simple.

1. The menu is a vertical menu on small screens.
2. The menu is a horizontal navigation bar on large screens.

I would like to keep the code as simple as possible. HTML code for the menu is as follows. It is just a plain unordered list.

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Newsletter</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</header>

Change box-sizing to border-box. See this article for reasons.

* {
    box-sizing: border-box;
}

Remove bullets by following code. Reset padding and margin, since some browsers use padding for indenting <ul> and others use margin. Color background dark.

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #444;
}

Set font related stuffs. Make line-height as tall as the height to vertically center text.

nav li {
    font-family: sans-serif;
    font-size: 1.2rem;
    line-height: 3rem;
    height: 3rem;
}

Now this is perhaps the most important part. Remove the underline for links in the menu by setting text-decoration to none. Also set display to block. All links in the menu now take up all available width and stack on top of each other. Color words light for background being dark.

nav a {
    text-decoration: none;
    text-align: center;
    color: #555;
    display: block;
}

Set a state when links are hovered.

nav a:hover {
    background-color: #9AA0A2;
}

Set an indicative color for the link that is being activated. Set the cursor to default.

nav a.active {
    background-color: #84878E;
    color: #444;
    cursor: default;
}

The vertical menu is now completed.

A horizontal navigation menu is implemented in the next article.