Skip to Content
Author's profile photo Murali Balreddy

How To: Create a manila folder like vertical tabs using CSS

Using CSS, one can rotate any component using transform property by providing a degree of rotation.

In this blog, I will show how I used this CSS property to create a manila folder with vertical tabs as shown below.

/wp-content/uploads/2013/06/manila_folder_output_231574.jpg

I have used a panel for the main page and textboxes for the tabs. Use your preferred styles to format the visuals.

In my CSS for the active and the inactive tabs (the textboxes on the right), I have included the transform property with a 90 degree rotation as -ms-transform: rotate(90deg); (for cross browser compatibiltiy, use vendor prefixes). Use onclick script to alternate between CSS styles for activating the tabs.

Please see the attached document for the CSS used in this demo.

Note: using transform property, one can achieve the same effect using the tabstrip component also.

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Lars Schubert
      Lars Schubert

      Great idea! Thanks for sharing this, Murali

      Author's profile photo Xavier Hacking
      Xavier Hacking

      Cool!

      Author's profile photo Rama Shankar
      Rama Shankar

      Cook - thanks!

      Author's profile photo Jeroen van der A
      Jeroen van der A

      nice one, really good to see how you can get creative with CSS

      Author's profile photo Heather Worth
      Heather Worth

      where can I find the css for this to download please 

      Author's profile photo Viren P Devi
      Viren P Devi

      Thanks for the idea. Wheres the css?

      Author's profile photo Former Member
      Former Member

      Thanks for the idea. Could you please provide the CSS.