NAV BAR on side

Go to Administration Panel ► Display ► Templates ► General and edit (Edit) the overall_header template.

Locate this part of the template, which contains the variable {GENERATED_NAV_BAR} :

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">  <tr>  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>  </tr>  </table>

and replace it with :

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">  <tr>  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>  </tr>  </table>

Explanation :

By placing the variable that generates the navigation bar in a div, and giving it the class vertical_nav, will allow us to modify its style with CSS.

Once the modifications are complete​​, save and publish the template by clicking the green plus "Add" in the template list.

Modifying the CSS stylesheet

Go to Administration Panel ► Display ► Colors ► CSS stylesheet tab.

Add the following code to your sheet :

Code:

div.vertical_nav {
    position:absolute;
    top:50px;
    left:5%;
}

Explanation :
position:absolute; allows us to place the navigation bar as a floating element
top:50px; allows us to position our block 50 pixels from the top of the page
left:5%; allows us to position our block 5% from the left of the page

Note: If you want the block to stay where it is while scrolling the page, you must replace position:absolute; with position:fixed;

To finish, add the following code to your sheet :

Code:

div.vertical_nav a.mainmenu {
    display:list-item;
    list-style:none;
}

Explanation :
display:list-item; allows us to see the links in the navigation bar as a list from top to bottom
list-style:none; allows us to remove the style originally assigned to the lists (the bullets : •)

If you want to add a border to your navigation as in the demonstration above, just add on to the style of the element div.vertical_nav :

Code:

div.vertical_nav {
    background:#FFFFFF;
    border:1px solid #D0D0D0;
}

Explanation :
background:#FFFFFF; allows us to color the background of the block white
border:1px solid #D0D0D0; allows us to add a solid gray border of 1px

url: http://help.forumotion.com/t132126-phpbb2-have-a-vertical-navigation-bar#886922