How TO - Side Navigation Buttons
Learn how to create hoverable side navigation buttons with CSS.
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:
Example
/* Style the links inside the sidenav */
#mySidenav a {
position: absolute;
/* Position them relative to the browser window */
left: -80px;
/* Position them outside of the screen */
transition: 0.3s;
/* Add transition on hover */
padding: 15px; /* 15px
padding */
width: 100px; /* Set a specific width */
text-decoration: none;
/* Remove underline */
font-size: 20px; /* Increase font size */
color: white;
/* White text color */
border-radius: 0 5px 5px 0; /*
Rounded corners on the top right and bottom right side */
}
#mySidenav
a:hover {
left: 0; /* On mouse-over, make the elements
appear as they should */
}
/* The about link: 20px from the top with
a green background */
#about {
top: 20px;
background-color: #4CAF50;
}
#blog {
top: 80px;
background-color: #2196F3; /* Blue */
}
#projects {
top: 140px;
background-color: #f44336; /* Red */
}
#contact {
top: 200px;
background-color: #555 /* Light Black */
}
Try it Yourself »
Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.