Slide Down Menu Help - Is this possible?, (I know it is but how?)
Is this possible, the answer is probably yes, but have no idea how to do it.
I am going to redesign my website that has 200+ pages. The menu I have chosen is a slide own menu. The main link to the section will have a sub menu.
As the script will be quite a lot I want to try and have it so its a similar system as a .js file, where I enter a simple piece of code to the left and it calls the menu. Plus with it external will make updating the links much easier as only one file to edit.
I could go the old fashioned way and put a inline frame as the menu but want to get away from that. Is it possible to make the script below callable via an external file similar to .js
I am only interested in the code between <body and </body> the rest is ok.
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<style type="text/css">
body
{
background-color: #FFFFFF;
color: #000000;
}
</style>
<style type="text/css">
.SlideMenu2_folder
{
font-family: Arial;
font-size: 15px;
text-transform: uppercase;
background-color: #FFD700;
padding-left: 5px;
width: 100%;
border-style: solid;
border-width: 1px;
border-color: #FF0000;
}
.SlideMenu2_item
{
font-family: Arial;
font-size: 15px;
background-color: #00005E;
padding-left: 5px;
width: 100%;
border-style: solid;
border-width: 1px;
border-color: #DAEAFF;
}
.SlideMenu2_folder_a
{
color: #000000;
font-weight: bold;
text-decoration: none;
}
.SlideMenu2_folder_a:hover
{
color: #006BF5;
font-weight: bold;
text-decoration: none;
border-color: #DAEAFF;
}
.SlideMenu2_item_a
{
color: #FFD700;
font-weight: normal;
text-decoration: none;
}
.SlideMenu2_item_a:hover
{
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
}
</style>
<script type="text/javascript">
<!--
function FindObject(id, doc)
{
var child, elem;
if(!doc)
doc=document;
if(doc.getElementById)
elem=doc.getElementById(id);
else
if(doc.layers)
child=doc.layers;
else
if(doc.all)
elem=doc.all[id];
if(elem)
return elem;
if(doc.id==id || doc.name==id)
return doc;
if(doc.childNodes)
child=doc.childNodes;
if(child)
{
for(var i=0; i<child.length; i++)
{
elem=FindObject(id,child[i]);
if(elem)
return elem;
}
}
var frm=doc.forms;
if(frm)
{
for(var i=0; i<frm.length; i++)
{
var elems=frm[i].elements;
for(var j=0; j<elems.length; j++)
{
elem=FindObject(id,elems[i]);
if(elem) return elem;
}
}
}
return null;
}
function ToggleExpand(id)
{
var obj = FindObject(id);
if (!obj)
{
return false;
}
if (obj.style.display == "none")
{
obj.style.display = "";
}
else
{
obj.style.display = "none";
}
return false;
}
//-->
</script>
</head><body>
<div id="wb_SlideMenu2" style="position: absolute; left: 132px; top:
57px; width: 160px; height: 408px; z-index: 1;" align="left">
<table cellpadding="0" cellspacing="0" width="160">
<tbody>
<tr>
<td>
<table cellspacing="1" width="100%">
<tbody><tr>
<td class="SlideMenu2_folder"
onmouseover="this.style.backgroundColor='#DAEAFF'"
onmouseout="this.style.backgroundColor='#FFD700'"><a
class="SlideMenu2_folder_a" href="#">Folder 1</a></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
<tbody id="SlideMenu2_Folder1">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellspacing="1" width="100%">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<table cellspacing="1" width="100%">
<tbody><tr>
<td class="SlideMenu2_folder"
onmouseover="this.style.backgroundColor='#DAEAFF'"
onmouseout="this.style.backgroundColor='#FFD700'"><a
class="SlideMenu2_folder_a" onclick="return
ToggleExpand('SlideMenu2_Folder2')" href="#">Folder 2</a></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
<tbody id="SlideMenu2_Folder2">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellspacing="1" width="100%">
<tbody><tr><td class="SlideMenu2_item"
onmouseover="this.style.backgroundColor='#FF0000'"
onmouseout="this.style.backgroundColor='#00005E'"><a
class="SlideMenu2_item_a" href="">sub menu1</a></td></tr>
<tr><td class="SlideMenu2_item"
onmouseover="this.style.backgroundColor='#FF0000'"
onmouseout="this.style.backgroundColor='#00005E'"><a
class="SlideMenu2_item_a" href="">sub menu 2</a></td></tr>
<tr><td class="SlideMenu2_item"
onmouseover="this.style.backgroundColor='#FF0000'"
onmouseout="this.style.backgroundColor='#00005E'"><a
class="SlideMenu2_item_a" href="">sub menu 3</a></td></tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<table cellspacing="1" width="100%">
<tbody><tr>
<td class="SlideMenu2_folder"
onmouseover="this.style.backgroundColor='#DAEAFF'"
onmouseout="this.style.backgroundColor='#FFD700'"><a
class="SlideMenu2_folder_a" onclick="return
ToggleExpand('SlideMenu2_Folder3')" href="#">Folder 3</a></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
<tbody id="SlideMenu2_Folder3">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellspacing="1" width="100%">
<tbody><tr><td class="SlideMenu2_item"
onmouseover="this.style.backgroundColor='#FF0000'"
onmouseout="this.style.backgroundColor='#00005E'"><a
class="SlideMenu2_item_a" href="">sub menu1</a></td></tr>
<tr><td class="SlideMenu2_item"
onmouseover="this.style.backgroundColor='#FF0000'"
onmouseout="this.style.backgroundColor='#00005E'"><a
class="SlideMenu2_item_a" href="">sub menu 2</a></td></tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<table cellspacing="1" width="100%">
<tbody><tr>
<td class="SlideMenu2_folder"
onmouseover="this.style.backgroundColor='#DAEAFF'"
onmouseout="this.style.backgroundColor='#FFD700'"><a
class="SlideMenu2_folder_a" onclick="return
ToggleExpand('SlideMenu2_Folder4')" href="#">Folder 4</a></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
<tbody id="SlideMenu2_Folder4" style="display: none;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table cellspacing="1" width="100%">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body></html>
CSS Codes
Reply With Quote
Originally Posted by stringcugu
Bookmarks