: : : I don't know if the solution for this would be in the form of JavaScript or HTML so Im posting it here just in case.
: : :
: : : I created a slide out menu bar. That slides out when the mouse goes over it and back in when the mouse is off.
: : :
: : : Im using this menu because I need the full window for the content and have no room for a menu bar. (but my professor says I have to have one on each page.)
: : :
: : : My problem is this; I dont want to use frames because then I lose that space. That space gets reserved for the menu when it slides out.
: : : I dont what to retype the JavaScript code into every page. Because thats a lot of code over and over again. (i have 12 web pages in my site)
: : :
: : : So I was wondering if there is a way for me to create the menu bar in one page then link that menu bar to all other pages. Also I want it to look as though the menu was created in that page.
: : :
: : : Kind of like what you do with external CSS. You link that page to your web page then all info goes into the web page as though it was written to it.
: : :
: : : I hope this made sense.
: : : And I really really appreciate any help anyone can give me. Thanks again.
: : :
: : :
: : Hi,
: :
: : As usual, there are a few ways to do it...
: :
: : #1 external file with .js extention
: :
: : #2 use PHP to piece the page into place
: :
: : #3 define an XML schema
: :
:
: thanks, that was a lot of help.
:
I figure that was sarcastic... ?
I think you might want an example...
Normally I pasrse my data from a mysql database, using PHP, but you can also put your menu in a js file and just do this:
[i]js/menu.js[/i]
document.write('<ul id="Menu">');
document.write(' <li><a href="#">option1</a></li>');
document.write(' <li><a href="#">option2</a></li>');
document.write(' <li><a href="#">option3</a></li>');
document.write('<ul>');
then in your html file on the location you want the menu put this:
<script src="js/menu.js" language="JavaScript" type="text/JavaScipt"></script>
a nicer way I think would be something like this:
[i]js/menu.js[/i]
function Menu(parent) {
// Declare properties
//
this.parent = parent;
this.parent_object = document.getElementById(parent);
// Declare methods
//
this.Parse = mnu_Parse;
// Implement methods
//
function mnu_Parse() {
var ul = document.createElement('ul');
for(var i=0;i<10;i++) {
var li = document.createElement('li');
if(i==0) {
li.className = "firstitem";
}
var a = document.createElement('a');
ul.appendChild(li);
li.appendChild(a);
switch(i) {
case 0:
a.href = "option"+i;
a.innerHTML = "option"+i;
break;
case 1:
a.href = "option"+i;
a.innerHTML = "option"+i;
break;
case 2:
a.href = "option"+i;
a.innerHTML = "option"+i;
break;
case 3:
a.href = "option"+i;
a.innerHTML = "option"+i;
break;
case 4:
a.href = "option"+i;
a.innerHTML = "option"+i;
break;
case 5:
a.href = "option"+i;
a.innerHTML = "option"+i;
break;
case 6:
a.href = "option"+i;
a.innerHTML = "option"+i;
break;
case 7:
a.href = "option"+i;
a.innerHTML = "option"+i;
break;
case 8:
a.href = "option"+i;
a.innerHTML = "option"+i;
break;
case 9:
a.href = "option"+i;
a.innerHTML = "option"+i;
break;
}
}
this.parent_object.appendChild(ul);
}
}
[i]css/menu.css[/i]
* {
padding : 2px;
margin : 0px;
}
ul {
list-style-type : none;
}
li {
float : left;
padding : 0px 5px;
border-left : 1px solid #000000;
}
li.firstitem {
border : 0px;
}
#con_Menu {
position : absolute;
height : 5px;
width : 100%;
top : 0px;
left : 0px;
background : #000063;
overflow : hidden;
}
#con_Menu.unfold {
height : 25px;
}
#mnu_MyMenu {
position : relative;
}
#mnu_MyMenu a {
color : yellow;
font-weight : bold;
text-decoration : none;
}
#mnu_MyMenu a:hover {
text-decoration : underline;
}
and in each html file include both the stylesheet and the menu script:
[i]each.html[/i]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html lang="nl">
<head>
<title>website - page</title>
<link rel="Stylesheet" type="text/css" href="css/menu.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="R.V. van Doggenaar" />
<meta name="company" content="MAC-DOGGIE" />
<meta name="template" content="" />
<script type="text/JavaScript" Language="JavaScript" src="js/menu.js" ></script>
<script type="text/JavaScript" Language="JavaScript">
var menu;
function loaded() {
menu = new Menu("mnu_MyMenu");
menu.Parse();
}
</script>
</head>
<body onload="loaded()">
<div id="con_Menu" onmouseover="this.className='unfold'" onmouseout="this.className=''">
<div id="mnu_MyMenu">
</div>
</div>
</body>
</html>
hope this is usefull for you...
-mac-
mailto:mac_doggie@hotmail.com
the Netherlands...
