Create a beautiful hover-triggered expandable sidebar with simple HTML, CSS, and Javascript

and learn some CSS tricks along the way!

Today, we’ll learn how to make a sidebar that expands and collapses on hover. It looks beautiful and the implementation is a lot simpler than it looks. We’ll be doing this tutorial step-by-step, and along the way I’ll also be introducing some noteworthy HTML/CSS tricks.

Here’s a list of tips and tricks this article will touch on:

• Putting the bar in the sidebar
• Changing the items’ color on hover
• A problem with Google’s material icons that you need to know how to fix
• onmouseover and onmouseout events
• How to keep items in a single line and prevent wrapping around
• How to hide overflowed text in the sidebar
• How to implement smooth transition

Let’s begin!

Part 1: Create a simple sidebar

The complete code for this step can be found in this pen: https://codepen.io/dalisc/pen/rEjRWo

With only HTML, your webpage will look like the image below. What a difference some CSS can make! So we need to style it with some CSS to make it look like the above gif.

CSS tips and tricks to learn from Part 1:

• Putting the bar in the sidebar

.sidebar {
height: 100%;
width: 250px;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 60px;

This code gives the sidebar a width of 250px (width: 250px;), with a dark background color (background-color: #111;), and makes it extend vertically fully on the page (height: 100%;). Play around in the code pen to customise your sidebar.

• Changing the sidebar items’ color on hover

.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}

Here, we removed the text’s underline and blue color with “text-decoration: none;” and added some spaces around the sidebar items with padding and block display. The part which enhances the user experience is when the items change colour from grey to white and this is done via the code:

.sidebar a:hover {
color: #f1f1f1;
}

This code means that when you hover your mouse over elements tagged with <a> in the class “sidebar”, the color of the elements will change to whatever you set it to, in this case #f1f1f1.

• A problem with Google’s material icons that you need to know how to fix

If you use Google’s material icons, you’ll notice a frustrating problem: the icon and adjacent text do not properly vertically align by default.

.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
padding-bottom: 3px;
margin-right: 30px;
}

What you need to do is vertically align them in your CSS (vertical-align: middle;). Even then, the alignment is a little bit off, so give your icons a 3px vertical boost after that (padding-bottom: 3px;).

Part 2: Detecting whether your mouse hovers over the sidebar

Now we’ll add some Javascript, sincewe’re going to introduce some functionality to the sidebar. The complete code for this step can be found in this pen: https://codepen.io/dalisc/pen/orBVZg

• HTML tips: onmouseover and onmouseout

Two extremely useful events are onmouseover and onmouseout which detects whether your mouse is hovering over or out of a particular element ,respectively,. For our sidebar, we want the detection to be on any and every part of the sidebar, so we need to add these events into the <div> of the sidebar like so:

<div id=”mySidebar” class=”sidebar” onmouseover=”somethinghappens” onmouseout=”somethinghappens”>

Now we can dictate what happens in the event that the mouse hovers over or out from the sidebar. We need to replace “somethinghappens” with what we want to actually happen, but first, let’s check whether the detection happens by sending a message to the console.

Now let’s write two Javascript functions to confirm that the events are detected:

function testIn() {
console.log(“hovering in sidebar”);
}
function testOut() {
console.log(“hovering outside sidebar”);
}

And also update our sidebar division:

<div id=”mySidebar” class=”sidebar” onmouseover=”testIn()” onmouseout=”testOut()”>

Now do the hovering and check the console for the messages that we wrote. It should work! Now we have set up the detection needed to tell our sidebar whether to collapse or expand.

Part 3: Expand/collapse the sidebar

The full code for this final part can be found in this pen: https://codepen.io/dalisc/pen/qzRGxQ

We will call the collapsed sidebar the mini sidebar. We now want two looks for our sidebar depending on whether the mouse hovers over or out, so we need to create a boolean variable mini in our javascript portion.

We will also create a function to toggle the expansion of the sidebar. The logic of the function is as follows: if the sidebar is in mini mode, hovering the mouse over the sidebar will expand the sidebar into it’s full mode (and set the variable mini to false). If the sidebar is in full mode, hovering the mouse out of the sidebar will collapse it into mini mode (and set the variable mini to true).

Thus, we need to change our onmouseover and onmouseout events, and introduce the new function toggleSidebar() accordingly.

Change the html:

<div id=”mySidebar” class=”sidebar” onmouseover=”toggleSidebar()” onmouseout=”toggleSidebar()”>

Add to the JS (and we can delete testIn() and testOut() now):

var mini = true;
function toggleSidebar() {
if (mini) {
console.log(“opening sidebar”);
document.getElementById(“mySidebar”).style.width = “250px”;
document.getElementById(“main”).style.marginLeft = “250px”;
this.mini = false;
} else {
console.log(“closing sidebar”);
document.getElementById(“mySidebar”).style.width = “100px”;
document.getElementById(“main”).style.marginLeft = “100px”;
this.mini = true;
 }
}

As can be seen from the function, all it essentially does is change the width of the black block of the sidebar. The full mode has a width of 250px and the mini mode has a width of 85px. We also position the text and icon strategically such that the text is hidden completely when the sidebar is collapsed, leaving only the icons showing.

By default, we want our sidebar to be in mini-mode, so we also change the width of the sidebar (when originally untoggled) to 85px as well.

.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
transition: 0.5s;
padding-top: 60px;
}

Current default look:

At this point, there are still a few glitches with the text overflow, so I’m going to introduce some CSS tips and tricks!

CSS tips and tricks to learn from Part 3:

• How to get the icon and text in a single line

Add “white-space: nowrap;” to the sidebar CSS.

.sidebar {
height: 100%;
width: 85px;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 60px;
white-space: nowrap;
}

This will prevent the text from wrapping to the next line even if it is larger than the width of the sidebar. But as you can see below, although it is now in one line, it overflows and you can see the overflow…so we need to find a way to hide it!

• How to hide overflowed text in the sidebar

To hide overflowed text, simply add “overflow-x: hidden;” and “z-index: 1;” to the sidebar css. This will hide anything that is wider than the width of the sidebar.

.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}

Now our sidebar looks really good! (I went to change the main content as well but the main content is not covered in this tutorial, though it’s included in the code pen.)

• How to create a smooth transition for the expansion

Now we’ve come to the last glitch we need to fix to make the sidebar move smoothly. Currently, as the sidebar collapses and expands, there is no animation added to it so it looks a little bit choppy, like this:

So what we want is a very smooth transition as seen in the gif on the very first page. Right now, the change is happening immediately. For it to be smooth we need to slow down the change. Firstly, we need to make the sidebar expand slower, let’s say 0.5s. Add this to your sidebar CSS.

.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
white-space: nowrap;
}

We also need the main section to be pushed to the left at the same time.

#main {
transition: margin-left .5s;
padding: 16px;
margin-left: 85px;
}

And you’ve got a beautiful sidebar!

Find the full working code at the GitHub repository: https://github.com/dalisc/hover-collapsible-sidebar