How TO – Side Navigation Buttons

Learn how to create hoverable side navigation buttons with CSS.

Hoverable Sidenav Buttons

Hover over the buttons in the left side navigation to open them.

Try it Yourself

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
#mySidenav a {
position: absolute;
left: -80px;
transition: 0.3s;
padding: 15px;
width: 100px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
}

#mySidenav a:hover {
left: 0;
}

#about {
top: 20px;
background-color: #04AA6D;
}

#blog {
top: 80px;
background-color: #2196F3;
}

#projects {
top: 140px;
background-color: #f44336;
}

#contact {
top: 200px;
background-color: #555
}
</style>
</head>
<body>

<div id=”mySidenav”>
<a href=”#” id=”about”>About</a>
<a href=”#” id=”blog”>Blog</a>
<a href=”#” id=”projects”>Projects</a>
<a href=”#” id=”contact”>Contact</a>
</div>

<div style=”margin-left:80px;”>
<h2>Hoverable Sidenav Buttons</h2>
<p>Hover over the buttons in the left side navigation to open them.</p>
</div>

</body>
</html>

How To Create a Hoverable Sidenav

Step 1) Add HTML:

Example

<div id=”mySidenav” class=”sidenav”>
  <a href=”#” id=”about”>About</a>
  <a href=”#” id=”blog”>Blog</a>
  <a href=”#” id=”projects”>Projects</a>
  <a href=”#” id=”contact”>Contact</a>
</div>

Step 2) Add CSS: