How to Create Side Extensible Navigation Buttons on Hover
Navigation
How To, for Web Applications
By: Chrysanthus Date Published: 14 Mar 2025
This tutorial explains How to Create Side Extensible Navigation Buttons on Hover. Each button is partly invisible into the left edge of the webpage. When the mouse pointer hovers the right visible part of a button, the whole button extends (moves) rightwards, completely into the webpage, in a short time (transition/animation) ending up with its left edge aligned to the left edge of the webpage. For the example in this tutorial, there are four buttons with names: About, Blog, Project and Contact. The four buttons have different colors. The buttons are not constructed from HTML button elements; they are constructed from HTML anchor elements. So they are actually hyperlinks that are styled to look like HTML button elements.
At the end of this tutorial is the complete webpage code for the example. The reader should copy the complete code into a text editor, save the file with any name having the extension, .html . Open the file in a browser. Hover each of the buttons, to appreciate the effects. The reader is advised to do that before continuing to read this tutorial.
The Webpage Skeleton Code
The webpage skeleton code, for which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Hoverable Sidenav Buttons</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
There are HTML tags in the HTML head element. The positioning and movement (extension) of the buttons are govern solely by the CSS rules in the style element. No JavaScript is used in this project (example). Any modern professional webpage should have the first four tags in this HTML head element.
The HTML Body Element
For this example, the content of the body element is:
<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>
<div style="margin-left:80px;">
<h2>Hoverable Sidenav Buttons</h2>
<p>Hover over the buttons in the left side navigation to fully extend them.</p>
</div>
There are two div elements here. The second div element is what contains the document (real body content) of the webpage. Its left margin is 80px. It is this big because the right half of the first div element will be placed in front of it (using CSS rules), and not cover content on the right, from the point of view of the user.
The first div element has the buttons (actually anchor elements). The design is such that, the right part by the vertical edge of the first div element, will be in front of the left margin of the second div element. This right part of the first div is not expected to be more than 80px wide. When any of the right parts of the anchor elements of the first div is on-hover, the anchor element will move rightwards, completely into the webpage, in a short time (transition/animation) ending up with its left edge aligned to the left edge of the webpage. As this anchor (hyperlink) element moves rightward, it covers content in the second div (which is the real document div).
This is a teaching (pedagogic) document; so the value of the href attributes for the anchor elements are each, just #, so that when each anchor element is clicked, no action takes place (no opening of any new webpage takes place).
The class-name of the first div is "sidenav" . A CSS rule in the style element uses this for the presentation (styling) of the first div. The ID of the first div is "mySidenav". This ID is also used in the style element.
The HTML Style Element
The positioning of the first div element, and movement (extension) of its anchor elements, are govern solely by the CSS rules in the style element. No JavaScript is used in this basic pedagogic project (example).
The Body Element Style
The CSS rule for the body element is:
body {
margin: 0;
}
The margin for the four sides of the body element is zero. This enables the left edge of the anchor elements (buttons) to flush to (align with) the left edge of the webpage, when fully extended rightwards. Note that the buttons are not actually extended by stretching; they are extended by moving as a whole, rightwards, exposing the entire left part.
Style for div.sidenav
The CSS rule for the first div is:
div.sidenav {
width: 0px;
position: fixed;
z-index: 1;
}
Its position is fixed and its z-index is 1, assuming that the z-index of the body element and that of the second div (which is the div for main content) is 0. With that, it is placed in front of the second div. Though it is placed in front of the second div, its width is zero px. In that way, it is just at the left edge of the left edge of the second div whose left margin is 80px. It is at the left edge of the 80px left margin.
The styling of the anchor elements in this first div is such that, each anchor element overflows rightwards, out of the zero width, and can extend up to 80px, over (in front of) the 80px margin of the second div.
The Anchor Element Style
In this simple project, all anchor elements are only in the first div. The common style for all the anchor elements is:
#mySidenav a {
display: block;
position: relative;
left: -80px;
margin-bottom: 5px;
width: 100px;
padding: 15px;
text-decoration: none;
font-size: 20px;
color: white;
text-align: center;
border-radius: 0 5px 5px 0;
transition: 0.3s;
}
The ID, "mySidenav" of the first div, has been used in the CSS rule selector, to address its containing anchor elements. The display property (declaration) of each anchor element is block. With that the anchor elements inside the first div will lie below one another, vertically instead of horizontally by their default inline nature.
The position of each anchor element is relative. This means that each anchor element should stay where it has been coded, unless it is displaced. Well, in fact, each anchor element is displayed by 80px (-80px) to the left, by this same CSS rule. For this simple project, it is assumed that the width of each anchor element is a maximum of 160px (i.e 160/2 = 80). So, while the right half of each anchor element is seen over (in front of) the left margin of the second div, the left half of each anchor element is on the left side of the left edge of the first div. Since the width of the first div is 0 and the left edge of the zero width first div, aligns with the left edge of the margin of the second div, and also aligns with the left edge of the zero margin body, the left part of each anchor element is cut off, and cannot be seen. Of course, this is intentional, to create the Side Extensible Navigation Buttons on Hover.
The width of each anchor element is made 100px and not 160px. If the width is made 160px, and since the left margin of the second div is 80px, the right half of each anchor element will cover (from view) some parts of the second div's content.
The property, "border-radius: 0 5px 5px 0;" makes the top-right and bottom-right corners of each anchor element rounded, allowing the top-left and bottom-left corners to be right-angled. In this way, when an anchor element is fully moved (extended) to the right, its left edge will aligned perfectly with the left edge of the webpage, without any curving of the left corners of the anchor element.
It takes, 0.3s for the anchor element to transition (animate) completely to the right, when the mouse pointer is on it (its right part), and still 0.3s for the element to retract, when the mouse pointer goes out of it.
Anchor Element On-hover Style
The on-hover CSS rule for each anchor element is:
#mySidenav a:hover {
left: 0;
}
This means that when the mouse pointer goes over an anchor element, its left edge has to become at its normal 0px position, from the -80px displacement position. The property "transition: 0.3s;" in the previous CSS rule, enables this transition to take place in 0.3s. Because of this property, the anchor element moves to the right in 0.3s (and would also move to its -80px displacement position in 0.3s).
The effect can be read as, "on hover, push the anchor element to the right by pushing its left end to its zero position".
Individual Style for Each Anchor Element
The background colors of the anchor elements are different. The CSS rules are:
#about {
background-color: #04AA6D;
}
#blog {
background-color: #2196F3;
}
#projects {
background-color: #f44336;
}
#contact {
background-color: #555
}
All these CSS rules plus the CSS rules above, are coded in the style element. Note that there is no JavaScript for this project.
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Hoverable Sidenav Buttons</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
body {
margin: 0;
}
div.sidenav {
width: 0px;
position: fixed;
z-index: 1;
}
#mySidenav a {
display: block;
position: relative;
left: -80px;
margin-bottom: 5px;
width: 100px;
padding: 15px;
text-decoration: none;
font-size: 20px;
color: white;
text-align: center;
border-radius: 0 5px 5px 0;
transition: 0.3s;
}
#mySidenav a:hover {
left: 0;
}
#about {
background-color: #04AA6D;
}
#blog {
background-color: #2196F3;
}
#projects {
background-color: #f44336;
}
#contact {
background-color: #555
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<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>
<div style="margin-left:80px;">
<h2>Hoverable Sidenav Buttons</h2>
<p>Hover over the buttons in the left side navigation to fully extend them.</p>
</div>
</body>
</html>
The reader should copy the complete code into a text editor; save the file with any name having the extension, .html . Open the file in a browser. Hover each of the button's right part, to appreciate the effects.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .BACK NEXT