This may seem a little long winded guys but i'm at my wits end trying to work it out
Here's what i've done so far
I've created a simple webpage, added a background image to the page, then inserted a spry menu bar
What i'm trying to do is have the spry menu bar appear on the other pages without having to insert a new spry menu to each page
here's the code from my stylesheet
@charset "utf-8";
/* CSS Document */
body {
background-image: url(Backgrounds/page_background_template.jpg);
background-repeat: no-repeat;
}
as you can see, the page is blank just a background image
now here's the code from the index page with the spry menu on
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:120px;
top:148px;
width:665px;
height:63px;
z-index:1;
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="apDiv1">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
i just cant for the life of me figure out how to get the spry menu linking to the other html pages
I've looked at countless youtube tutorials and can't seem to find what i'm looking for, lots of tutorials on how to build the spry menu, but nothing on how to link it to the other pages on your site