Hi there Rangana
I cant give a url because it is currently only on my machine locally. (im still building it you see)
However i will gladly put the Css and the JS here if it will help you help me
CSS for the template page
Code:
/* CSS Document */
body {
font-family: "Times New Roman", Times, serif;
font-size: medium;
width: 100%;
margin: 30px auto;
text-align:center;
background-color: #9FB9FA;
}
#outer {
padding: 0px;
position: relative;
text-align:center;
background-color: #bbd2f6;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid #000000;
overflow: auto;
width: 800px;
}
#Header {
display:block;
height: 107px;
width: 800px;
margin: 0px auto;
background-image: url(../website_bits/worldwithwhiteboarder.gif);
background-repeat: no-repeat;
background-position: center center;
}
#links {
min-height: 400px;
width: 150px;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: large;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: center;
list-style-position: inside;
margin: 0px;
background-color: #bbd2f6;
border-right-width: thin;
border-left-width: thin;
border-right-style: none;
}
#Main {
min-height: 400px;
font-family: "Times New Roman", Times, serif;
float:left;
Width: 626px;
background-color: #bbd2f6;
background-repeat: no-repeat;
border-top-style: none;
border-left-color: #bcc5d2;
padding: 10px;
border-left-width: 1px;
border-left-style: solid;
}
#Footer {
display:block;
width: 800px;
height: 80px;
background-image: url(../website_bits/Company%20Fonts_Logos/Footer.jpg);
background-repeat: no-repeat;
background-position: center center;
float: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.bl {
background-image: url(../website_bits/corner.gif);
background-color:#FFFFFF;
background-repeat: no-repeat;
background-position: 0 100%;
height: 100%;
width: 100%;
}
.br {
background-image: url(../website_bits/cornerbr.gif);
background-repeat: no-repeat;
background-position: 100% 100%;
}
.tl {
background-image: url(../website_bits/cornertl.gif);
background-repeat: no-repeat;
background-position: 0% 0%;
}
.tr {
background-image: url(../website_bits/cornertr.gif);
background-repeat: no-repeat;
background-position: 100% 0%;
padding-right: 10px;
padding-left: 10px;
}
#Menu {
height: 20px;
bottom: 0px;
top: 76px;
position: relative;
padding-left: 160px;
text-align: left;
}
This is the CSS for the left hand Navigation bar
Code:
div.sdmenu {
width: 150px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #2c2d96;
background: #489fcb;
}
div.sdmenu div {
background: url(title2.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(toptitle2.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #2c2d96;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url(linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}
This is the JS for the left hand Navigation bar
Code:
function SDMenu(id) {
if (!document.getElementById || !document.getElementsByTagName)
return false;
this.menu = document.getElementById(id);
this.submenus = this.menu.getElementsByTagName("div");
this.remember = true;
this.speed = 3;
this.markCurrent = true;
this.oneSmOnly = false;
}
SDMenu.prototype.init = function() {
var mainInstance = this;
for (var i = 0; i < this.submenus.length; i++)
this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
mainInstance.toggleMenu(this.parentNode);
};
if (this.markCurrent) {
var links = this.menu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
if (links[i].href == document.location.href) {
links[i].className = "current";
break;
}
}
if (this.remember) {
var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
var match = regex.exec(document.cookie);
if (match) {
var states = match[1].split("");
for (var i = 0; i < states.length; i++)
this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
}
}
};
SDMenu.prototype.toggleMenu = function(submenu) {
if (submenu.className == "collapsed")
this.expandMenu(submenu);
else
this.collapseMenu(submenu);
};
SDMenu.prototype.expandMenu = function(submenu) {
var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var links = submenu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
fullHeight += links[i].offsetHeight;
var moveBy = Math.round(this.speed * links.length);
var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight + moveBy;
if (newHeight < fullHeight)
submenu.style.height = newHeight + "px";
else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "";
mainInstance.memorize();
}
}, 30);
this.collapseOthers(submenu);
};
SDMenu.prototype.collapseMenu = function(submenu) {
var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight - moveBy;
if (newHeight > minHeight)
submenu.style.height = newHeight + "px";
else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "collapsed";
mainInstance.memorize();
}
}, 30);
};
SDMenu.prototype.collapseOthers = function(submenu) {
if (this.oneSmOnly) {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
}
};
SDMenu.prototype.expandAll = function() {
var oldOneSmOnly = this.oneSmOnly;
this.oneSmOnly = false;
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i].className == "collapsed")
this.expandMenu(this.submenus[i]);
this.oneSmOnly = oldOneSmOnly;
};
SDMenu.prototype.collapseAll = function() {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
};
SDMenu.prototype.memorize = function() {
if (this.remember) {
var states = new Array();
for (var i = 0; i < this.submenus.length; i++)
states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
var d = new Date();
d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
}
};
Any help your able to give me, i would greatly apreciate it.
If there is anything else you need me to do, just let me know.
Dariune
Bookmarks