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.
- The menu is a vertical menu on small screens.
- 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.