0 Replies Latest reply on Jan 6, 2009 2:07 AM by Amal_Bukhari

    Spry menu bar gone nuts

    Amal_Bukhari
      Hello all,

      I'm playing and experimenting with dynamically populating my Spry menu bar with contents pulled from database. My sketch of links are as follows:
      Home - Newsflash
      Blog - Recently added, Most popular, Candid snaps
      Activities - ColdFusion, Eateries, Making money
      About - Me?, Contact me!

      So I added all those links into a database. In case I want to add a new link filed under Activities as Movies, I just add an entry into the database. Following is my database structure:
      [links: id, linkName, linkCategory, categoryID]
      1, Newsflash, Home, 1
      2, Recently added, Blog, 2
      3, Most popular, Blog, 2
      4, Candid snaps, Blog, 2
      5, ColdFusion, Activities, 3
      6, Eateries, Activities, 3
      7, Making money, Activities, 3
      8, Me?, About, 4
      9, Contact me!, About, 4
      *categoryID is the order of the menu bar's parent category.

      I compiled a CFC to dynamically produce the ULs and LIs for the Spry menu bar as follows:
      <cfcomponent hint="Produces navigation links, listens and redirects client requests, queries database and generates contents.">
      <cffunction name="getLinks" hint="Produces navigation links." access="public" output="true" returntype="void">
      <cfquery name="getLinks" datasource="cfnut">
      SELECT *
      FROM links
      GROUP BY linkCategory, id
      ORDER BY categoryID, id
      </cfquery>
      <ul id="navigationLinks" class="MenuBarHorizontal">
      <cfoutput query="getLinks" group="linkCategory">
      <li><a href="##" class="MenuBarItemSubmenu">#linkCategory#</a></li>
      <ul>
      <cfoutput>
      <li><a href="##">#linkName#</a></li>
      </cfoutput>
      </ul>
      </cfoutput>
      </ul>
      </cffunction>
      </cfcomponent>

      I store the CFC in a folder named "components". index.cfm is in the webroot. A snippet of my index.cfm follows:
      <html>
      ...
      <div id="navigationContainer">
      <cfinvoke component="components.cfnut" method="getLinks">
      </div>
      ...
      <script type="text/javascript">
      var navigation = new Spry.Widget.MenuBar("navigationLinks");
      </script>
      </body>
      </html>

      Following is a snippet of my CSS styling:
      #navigationContainer {
      top: 52px;
      left: 150px;
      right: 150px;
      position: fixed;
      z-index: 2;
      }

      The output works fine in IE7. The submenus appear as how I hard-code it in HTML. In FF 3.0.5, the submenus don't appear. Viewing the source code from both IE and FF generates the same HTML code. I've tried adjusting the z-index, hard-coding it back in HTML, but still haven't found why it doesn't appear well in FF. Ray Camden suggested me to remove CF and hard-code it in HTML, did it, but nothing favourable returned. It works all fine in HTML. In both cases (CF and plain HTML), Firebug doesn't display any error. Does any of you guys have any idea what's going on? This thing owed me three sleepless nights.