SIDE TABLE CONTENT HERE USE ONLY HTML FOR CONTENT!
Left Side CSS and Code.
SIDE TABLE CONTENT HERE USE ONLY HTML FOR CONTENT!
Instructions:
The instructions are the same for either side, so I will explain only the left side for this example.
Decide weather you want the side tables shown for members only or also for guests.
var L_memOnly=0; // Members Only? 1=Yes, 0=No
Change this to 1 (in the script) if you wish to hide the side tables from guests.
Each Peekaboo side table consists of 3 divs.
One outer div (leftNav), which holds two vertical divs: the content div (leftNavContent) and the toggle div (leftNavTog).
The first thing you need to decide is the width of your toggle div and the width of your content div (side table width). Enter your toggle div width in the script.
var L_TogWidth=24; // Width of Clickable area.
Now enter the SAME value in ALL the Maroon parts of the CSS.
#leftNav {
width: 24px;
height: 100%;
top: 0px;
right: auto;
left: 0px;
position: fixed;
_position: absolute;
}
#leftNavTog {
position: absolute;
width: 24px;
height: 100%;
right: 0px;
cursor: pointer;
background-image: url(http://i53.tinypic.com/2empxmu.png);
background-position: right center;
}
#leftNavContent {
position: absolute;
right: 24px;
width: 230px;
height: 100%;
overflow: auto;
text-align: center;
color: #FFFFFF;
background-image: url(http://i45.tinypic.com/28b9y6u.png);
}
Now enter your content width in the script:
var L_SideWidth=230; // Width of content.
#leftNavContent {
position: absolute;
right: 24px;
width: 230px;
height: 100%;
overflow: auto;
text-align: center;
color: #FFFFFF;
background-image: url(http://i45.tinypic.com/28b9y6u.png);
}