Adding a Fixed Side Tab to a Website

A static side tab, either on the left or right hand side of a web page, can be used to provide fixed information related to the content or links to social media websites.

I’ve seen travel and holiday booking websites include a static summary area with a summary of the trip details: flights; insurance; dates; and hotels details.

Another idea is to add links to your contact points: social media, telephone, email and contact page on the side of the page.

The side tab can also be configured to slide out into the page revealing more information, for example hovering over the telephone icon will slide to show the number as a link.

I have also seen this used to provide a handy reference link to help pages associated with the page content.

Generally a good way of providing access to related content on a webpage which you wish to be accessible once the page has scrolled down.

Static DIV with Content

Add a static side tab to the one or other side of a website. This is often used to provide links for the more popular social media sites, such as Twitter and Facebook

Grouping the Social media website links together within a tab on the side of the web page, either to the left or the right.

Here’s the HTML, which can be tucked within the page body header content.

<div class="social-media-sidebar">
  <ul class="social-media-icons">
    <li id="facebook"><a href="https://www.facebook.com/" target="_blank"><i class="fa  fa-facebook"></i> Facebook</a></li>
    <li id="twitter"><a href="https://www.twitter.com/" target="_blank"><i class="fa  fa-twitter"></i> Twitter</a></li>
    <li id="instagram"><a href="https://www.instagram.com/" target="_blank"><i class="fa  fa-instagram"></i> Instagram</a></li>
  </ul>
</div>

And the associated CSS. The outer div with class of social-media-sidebar is positioned and sized. The social media icons are organised using a list. Here I’ve used Fontawesome, which is already in use on the website, to create the associated icons.

.social-media-sidebar{
  position:fixed;
  right:0px;
  top:100px;
  z-index:999;
  width:30px;
  background-color:#eecc00;
}
.social-media-sidebar ul{
  list-style:none;
  padding:0;
  margin:0;
 }
.social-media-sidebar ul li{
  padding:0;
  margin:0;
  background-color:#ccee00;
  width:30px;
  height:30px;
  font-size:24px;
}
.social-media-sidebar ul li:hover{
  background-color:#ddaa00;
}

Images could be created and implemented within the HTML code added to the header.

Sliding DIV

With a little additional CSS we can configure this tab to slide in or out according to the mouseover action, exposing the links more fully.

After all we all want the visitors to our website to head off to the social media sites to extol the virtues of the site which they are visiting.

CSS code here with relevant HTML and popup extra

<div class="social-media-sidebar">
  <ul class="social-media-icons">
    <li id="facebook"><a href="https://www.facebook.com/" target="_blank"><i class="fa  fa-facebook-f"></i></a></li>
    <li id="twitter"><a href="https://www.twitter.com/" target="_blank"><i class="fa  fa-twitter"></i></a></li>
    <li id="instagram"><a href="https://www.instagram.com/" target="_blank"><i class="fa  fa-instagram"></i></a></li>
  </ul>
</div> 

The HTML above has had additional text for the social media names added.

.social-media-sidebar{
  position:fixed;
  right:0px;
  top:100px;
  z-index:999;
  width:30px;
  background-color:#eecc00;
}
.social-media-sidebar ul{
  list-style:none;
  padding:0;
  margin:0;
 }
.social-media-sidebar ul li{
  padding:0;
  margin:0;
  background-color:#ccee00;
  width:30px;
  height:30px;
  font-size:24px;
  white-space:no-break;
  overflow:hidden;
  transition: 0.4s;
}
.social-media-sidebar ul li:hover{
  transform: translateX(-100px);
  width:200px;
  background-color:#ddaa00;
}

In the CSS above the hover has been given a transition for slow slide. I’ve chosen to use translateX to move the element to the left.

Thoughts and Comments

Don’t forget to give the fixed side tab div sufficient height, setting its z-index above entries below so that it can be seen.