Last Updated - Thu Oct 05 2017

There is so much we can do with web pages that were overly complicated just a few years ago. Thanks for CSS3 Transforms we can do some really cool effects. Today I want to show how to create a vertical menu, or a menu rotated -90 degrees so instead of horizontal text the text is vertical. I have posted the sample code on jsFiddle for you to try out, http://jsfiddle.net/docluv/tNext/3/.

vertical CSS3 Menu

First we need to create the markup. For this I wrap the menu items in a NAV tag, which semantically indicates the child items are navigation items. We will style this later to do the rotation. Inside the NAV tag is a series of SPAN tags. You could use DIVs or any other tag you want to use, the important thing is you apply the style rules I will share in a few moments.

<
nav
class
="vertical-menu"
>

<
span
class
="nav-item"
>
BLUE</
span
>

<
span
class
="nav-item nav-item-selected"
>
RED</
span
>

<
span
class
="nav-item"
>
GREEN</
span
>

<
span
class
="nav-item"
>
YELLOW</
span
>

<
span
class
="nav-item"
>
PURPLE</
span
>

</
nav
>

Now the wrapping element, NAV, has a CSS class called vertical-menu, which you can see the rules below. You should notice the transform:rotate(-90deg) rule. This causes the element to rotate 'backwards' 90 degrees around its center, the assumed axis. The child elements will go along for the ride, making them vertical. There is an issue at this point because the element is rotate around it's center of mass, so it looks like it is floating in space. You will want to move the element into a more natural position. For my purposes I want the menu to be close to flush to the left side and of course down far enough so the element does not cover the header or go out of the view port. To accomplish this I added X & Y translations of both -80px. I chose -80 pixels because I need it to move about a 1/3 of the element's width and 80 pixels worked well for me. You made need to adjust these numbers to make it position the way you need.

As a side note if you don't want to use the X & Y translates you can absolutely position the element. This is what I originally did. When you us absolute positioning left is a negative value and the top is positive.

.vertical-menu
 {
text-align
:center;

 -moz-transform: rotate(-90deg) translateX(-80px) translateY(-80px);
 -webkit-transform: rotate(-90deg) translateX(-80px) translateY(-80px);
 -o-transform: rotate(-90deg) translateX(-80px) translateY(-80px);
 transform: rotate(-90deg) translateX(-80px) translateY(-80px);
width
: 250px;

height
: 70px;

margin
: 0;
}

The last rule is the text-align:center. This will move the child elements so they are fairly equally positioned in the wrapping NAV element. The width and height provide the element's dimensions. In this example I wanted 2 rows. If you want a single row increase the width and reduce the height to fit your needs.

The remaining CSS rules define how the navigation elements render. In this case I wanted rounded corners and a red background. I added a selected class that changes the background color to visual indicate it's selection.

.nav-item
 {
background-color
: #c30000;

color
: #fff;

border
-radius: 4px;

height
: 24px;

line-height
: 24px;

vertical-align
: middle;

margin
: 5px auto;

padding
: 2px 10px;

display
: inline-block;

}
.nav-item-selected
 {
background-color
: #7F0000;

}

So I hope this inspires you to take advantage of CSS3 effects in your web applications. Visit my jsFiddle to see this effect in action.

How to Make a Vertical Menu Using CSS3 Transforms