Spry MenuBar Active

Question

Is there a way to set the active state on the Spry MenuBar?
Have looked through the forums and not found solution with Spry. I
have this code set up:
quote:
<ul id="MenuBar5" class="MenuBarHorizontal">
<cfoutput>
<li><a id="home" href="
http://#Variables.sDomain#/index.cfm">Home</a></li>
<li><a id="directories" href="
http://#Variables.sDomain#/index.cfm?sPageInclude=Menu.cfm&PageID=11">Directories</a></li>
<li><a id="reports" href="
http://#Variables.sDomain#/index.cfm?sPageInclude=Menu.cfm&PageID=12">Reports</a></li>
<li><a id="documents" href="
http://#Variables.sDomain#/index.cfm?sPageInclude=Menu.cfm&PageID=13">Documents</a></li>
<li><a id="financial" href="
http://#Variables.sDomain#/index.cfm?sPageInclude=Menu.cfm&PageID=14">Financial</a></li>
<li><a id="aboutUs" href="
http://#Variables.sDomain#/index.cfm?sPageInclude=Menu.cfm&PageID=15">About
Us</a></li>
<li><a id="helpDesk"
href="mailto:[email protected]">HelpDesk</a></li>
</cfoutput>
<li>
<cfif IsDefined("Client.EmployeeID")>
<a id="logout"
href="/index.cfm?Logout=1">Logout</a>
<cfelse>
<a id="login"
href="javascript:OpenLogin('/index.cfm');">Login</a>
</cfif>
</li>
</ul>
<script type="text/javascript"><!--
var MenuBar5 = new Spry.Widget.MenuBar("MenuBar5",
{imgDown:"images/SpryMenuBarDownHover.gif",
imgRight:"images/SpryMenuBarRightHover.gif"});
//-->
</script>
I'm interested in putting this 'request' to work on several
in-house sites.
Thank you,
Gary

Answer 1

The last solution worked fine if
- You only had one layer of menus
- you were willing to manually create the menus and links,
not using the properties tool in DW
because that solution wrapped the menu calls in php tags so
javascript calls got messed up
This solution will give you the ability to
- have more than one level of menu (I used two, you can
extend the thinking to more layers if you want)
- like using the DW tools and property window to create
menus
(in other words, it is a much better, more refined solution
=============================================================
<div id="container">
<div id="header">
<h1>Ayuda</h1>
<!-- end #header -->
</div>
<div id="SubHeader">
<div id="NavBar">
<?php
// Get the name of this page - the page being viewed
$ThisPage = $_SERVER['PHP_SELF'];
$ThisPage = basename($ThisPage);
// Set to "BeingViewed" the style for the MenuItem of this
page
// and the style of the MunuItem of all the pages in the
path to get to this page
// including the top-level MenuItem
// with the "BeingViewed" style being defined in the header
above or CSS
// This changes the style
// so that the MenuItem of the page being viewed and in the
path
// look different than the MenuItem for the other pages
// Note that the "NotBeingViewed" style (also defined in the
header above or CSS)
// does nothing. It just leaves the MenuItem as is
// Create one array per top-level MenuItem,
// with all the subordinate pages to that MenuItem included
in the array
// Make sure each page is included in one of the arrays
// Even if a page can be reached by more than 1 path
// it is better (but not mandatory) to include it in only
one path here
// So each page is ideally in one and only one array
// Declare the number of top-line MenuItems
$NumMenuItems = 6;
// Enter each the pages subordinate to each MenuItem in its
respective arrays
// Make sure to label the array variable $Menu[X] where X is
the sequence 0,1,2,...
$Menu[0] = array("index.php");
$Menu[1] = array("AboutUs.php");
$Menu[2] = array("Services.php");
$Menu[3] = array("Customers.php","Pantry.php");
$Menu[4] = array("ContactUs2.php");
$Menu[5] = array("sitesearch.php");
// Initialize the style for all MenuItems to
"NotBeingViewed"
for ( $i=0 ; $i < $NumMenuItems ; $i++)
$CountMenu[$i] = count($Menu[$i]);
for ( $j=0 ; $j < $CountMenu[$i] ; $j++)
$MenuItemStyle[$i][$j] = "NotBeingViewed";
// Set the style for all MenuItems in the path to the page
being viewed to "BeingViewed"
for ($i=0 ; $i < $NumMenuItems ; $i++)
if (in_array($ThisPage,$Menu[$i]))
// Set the style for the top and landing page to
"BeingViewed"
$MenuItemStyle[$i][0] = "BeingViewed";
$LandPageNum = array_search($ThisPage,$Menu[$i]);
$MenuItemStyle[$i][$LandPageNum] = "BeingViewed";
else
// Leave the style for this whole menu as NotBeingViewed
?>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../index.php"><span
class="<?php echo $MenuItemStyle[0][0];
?>">Home</span></a> </li>
<li><a href="../AboutUs.php"><span
class="<?php echo $MenuItemStyle[1][0]; ?>">About
Ayuda</span></a></li>
<li><a href="../Services.php"><span
class="<?php echo $MenuItemStyle[2][0];
?>">Services</span></a></li>
<li><a href="../Customers.php"
class="MenuBarItemSubmenu"><span class="<?php echo
$MenuItemStyle[3][0]; ?>">Customers</span></a>
<ul>
<li><a href="../Pantry.php"><span
class="<?php echo $MenuItemStyle[3][1];
?>">Pantry</span></a></li>
</ul>
</li>
<li><a href="../ContactUs2.php"><span
class="<?php echo $MenuItemStyle[4][0]; ?>">Contact
Us</span></a> </li>
<li><a
href="../z_HiddenPages/sitesearch.php"><span class="<?php
echo $MenuItemStyle[5][0];
?>">Search</span></a></li>
</ul>
<!-- end #NavBar-->
</div>
<!-- end #SubHeader -->
</div>
<div id="mainContent">
<!-- TemplateBeginEditable name="MainBody" -->
Select this text and replace it with the content you want on
this page
<!-- TemplateEndEditable -->
<!-- end #mainContent -->
</div>
<div id="footer">
<p>Thank you for visiting our site.</p>
<!-- end #footer -->
</div>
<!-- end #container -->