How to Make a Side Tab in CSS

by Sara Williams

A tab on the side of a Web page is often accompanied by a script that runs when the user clicks on it such as a pull-out form for logging in or sharing on a social network. Before you can do that, however, you must create the tab itself. With the “transform” property in CSS level 3 (CSS3) you can create a nice tab out of a link and rotate it sideways. Although this is CSS3 code there is even an Internet Explorer filter that works on versions six through eight.

1

Open your Web page in an editor – Notepad works – and add a new div just after the opening “<body>” tag:

<div id=”tab”> <a href=”#”>Page Tab<a> </div>

Give the div an ID name such as “tab” and place text for the tab inside the “<div>” tags. Make the text clickable by placing it inside a pair of anchor tags. Replace the hash symbol in the example with a URL if you need the link to point to another Web page.

2

Style your tab in CSS giving it a background color, text style and borders that fit the page's design:

tab a {

background-color: lightblue; color: darkblue; border: 2px solid darkblue; font-family: Arial, sans-serif; font-weight: bold; padding: 20px; }

This style rule applies the styles to the anchor tags so as to keep the entire tab clickable. If you added padding to just the tab div itself, less of the tab's area would be clickable.

3

Curve the two top corners of the tab, if you want, using the “border-radius” property:

border-top-left-radius: 20px; border-top-right-radius: 20px;

These two lines of code, when added to the “#tab a” style rule, will make the top of your tab rounded.

4

Rotate the tab so it becomes sideways:

transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The first line shown above is the standard CSS3 method of rotating an HTML element. As of September 2011 most browsers need prefixed code. The prefixes each specify a browser except for “-webkit” which effects both Chrome and Safari. Earlier versions of Internet Explorer use the filter, shown last. All of this code must go inside the “#tab a” rule.

5

Position the tab at the far-left side of the browser screen and make it stick in one place when the user scrolls down the page:

position: fixed; left: 0; top: 50%; margin-top: -100px;

While you do not have to set a position from the top of the screen, doing so will let you determine the vertical position of the tab. If you gave your tab a particular width, then cut that width in half and make that number negative to come up with a value for “margin-top.” Setting this negative margin with a 50 percent “top” position will vertically center the tab on the screen.

About the Author

Sara Williams lives in western New York, where she is a freelance Web designer and content writer. She specializes in Web design, development and computer-hardware topics. Williams holds an Associate of Applied Science in computer information systems.