-
1. Re: Change background image or color for specific page
Ben Pleysier Sep 13, 2010 8:15 AM (in response to thersher)Have a look and play with the following markup
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" />
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
function InitPage() {
Spry.$$('#MenuBar1 li').forEach(function(node){
var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
if(a.href == window.location){
Spry.Utils.addClassName(node,"activeMenuItem");
}
});
}
Spry.Utils.addLoadListener(InitPage);
</script>
<style>
.activeMenuItem {
font-weight: bold;
}
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="products.html">Our Products</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>


