Menu

Sticky Side Tab

January 20, 2020 - Frontend Development, UI & UX Design
Sticky Side Tab

Sticky side tabs are a quick and easy way to conveniently access certain parts of your website. These tabs can be set to be available throughout your entire website, or you could simply put it on any page of your choosing. In this example, this is what the sticky tab will look like:

Let’s have a quick look at our HTML and CSS codes to get an overview.

HTML

<div class="sticky-tab">
  <h3>Sticky Side Tab</h3>
  <a href="#">Link to some page</a>
  <a href="#">Link to another page</a>
  <i class="fa fa-chevron-left"></i>
  <div class="social-links">
    <a href="#"><i class="fab fa-facebook"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
  </div>
</div>

CSS

body {
  background: wheat;
}

h3 {
  color: white;
  margin-bottom: 25px;
}

a, .fa {
  display: block;
  margin: 15px auto;
  color: white;
}

a {
  text-decoration: none;
}

.sticky-tab {
  box-sizing: border-box;
  background-color: #333;
  position: fixed;
  width: 250px;
  height: 250px;
  padding: 20px;
  text-align: center;
  right: -220px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 200ms linear;
}

.sticky-tab:hover {
  right: 0;
}

.social-links a {
  display: inline-block;
  margin: 25px 15px;
}

.fa-chevron-left {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-100%);
}

Sticky tabs are very easy to create. For this example, we’ll be using some icons from FontAwesome. To do this, simply copy and paste the following CDN link in the <head> section of your HTML markup.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css

We’re all set now, so let’s dig in deep.


HTML Markup

First, let’s create a simple HTML for our sticky tab.

<div class="sticky-tab">
  <h3>Sticky Side Tab</h3>
  <a href="#">Link to some page</a>
  <a href="#">Link to another page</a>
</div>

Here, we’ve created a div element with a class of .sticky-tab. Inside this element, we’ve set a header followed by a couple of anchor links. You can set the href links to go to any page or section you want.

Next, we’ll create another div element with a class of .social-links inside the .sticky-tab div element. This child div will contain social network links that can be linked to your Facebook and Twitter pages, or anything else you prefer. At this point, we can also include the left arrow indicator which will tell the user that when hovered, something will slide in from the right.

<div class="sticky-tab">
  <h3>Sticky Side Tab</h3>
  <a href="#">Link to some page</a>
  <a href="#">Link to another page</a>
  <i class="fa fa-chevron-left"></i>
  <div class="social-links">
    <a href="#"><i class="fab fa-facebook"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
  </div>
</div>

The left arrow uses the HTML ⇒  <i class="fa fa-chevron-left"></i>

CSS Styles

With our HTML set for now, let’s go ahead and style our elements.

We’ll use a light background for the <body> so let’s set that first.

body {
  background: wheat;
}

Since we’re going to use a dark background for the sticky tab, let’s use white as the color for all the elements inside the tab.

h3 {
  color: white;
  margin-bottom: 25px;
}

a, .fa {
  display: block;
  margin: 15px auto;
  color: white;
}

For our h3, a and .fa elements, we’ve used set a margin-bottom to create some spacing. We’ve also set the anchors to display as block elements because we want them to occupy block spaces. The same is set for the .fa classed elements.

While we’re at it, let’s change the default styling for our anchor links because we don’t want any underlines below our links.

a {
  text-decoration: none;
}

Next, let’s style our tab.

.sticky-tab {
  box-sizing: border-box;
  background-color: #333;
  position: fixed;
  width: 250px;
  height: 250px;
  padding: 20px;
  text-align: center;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

Here, we’re using the box-sizing property to include the padding within the total size of our box that we’ve set using the height and width properties. Using the property right will set the tab so that it sticks to the right side of the screen. Finally, we’ve used the top and transform properties to vertically center our tab. Here, the important thing to remember is that the sticky tab needs to have position: fixed so that it stays in place even when you scroll.

Next, let’s style up the icons inside the .social-links div element. Here, we want to display the icons next to each other, so let’s use display property value of inline-block.

.social-links a {
  display: inline-block;
  margin: 25px 15px;
}

Ok, so in our example, we want the sticky tab to peek out whenever the mouse is hovered over it. For this, we want to initially set the tab so that only a portion of it can be seen in its default state. So let’s change up the CSS for the value of the right property in our .sticky-tab class.

right: -220px;

Finally, let’s add the hover CSS properties.

.sticky-tab:hover {
  right: 0;
}

For a smooth transition effect when we hover, let’s add a transition CSS property to our .sticky-tab element.

transition: all 200ms linear;

The styling used in the example are very basic and have been intentionally kept this way. You can add as much styling as you wish and add even more links and icons. Just remember to space them out nicely so all that contributes to a good UI!

Leave a Reply

Your email address will not be published. Required fields are marked *