Home/ Questions/Q 9117319
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T04:52:19+00:00

I’m developing a small script which transforms formatted HTML into dynamic menus. This is

  • 0

I’m developing a small script which transforms formatted HTML into dynamic menus. This is being done to allow form writers to create dynamic menus without knowing much JavaScript. The idea is that they’ll just write semantic markup and the javascript code will make the menu for them.

You can see demo in this fiddle.

Basically, it takes HTML that looks like this:

<ul data-menu-horizontal="true" data-menu-width="500px">
   <li><a href="index.html">Home</a></li>
   <li><a href="index.html">Blog</a></li>
   <li><a href="index.html">News</a></li>
   <li><a href="index.html">Code</a></li>
   <li>
      <ul data-menu-horizontal="true" datamenu-header="Sub-Menu 1" data-menu-width="500px">
         <li><a href="index.html">Home</a></li>
         <li><a href="index.html">Computer Blog</a></li>
         <li><a href="index.html">More News</a></li>
      </ul>
   </li>     
   <li>
      <ul data-menu-vertical="true" data-menu-header="Sub-Menu 2" data-menu-width="500px">
         <li><a href="index.html">Home</a></li>
         <li><a href="index.html">Computer Blog</a></li>
         <li><a href="index.html">More News</a></li>
      </ul>
   </li>
</ul>

… and transforms it into this:

<ul id="13575820577141" class="menu-horizontal" style="width: 500px;">
   <li><a href="index.html">Home</a></li>
   <li><a href="index.html">Blog</a></li>
   <li><a href="index.html">News</a></li>
   <li><a href="index.html">Code</a></li>
   <li>
          <h2 class="menu-horizontal-header">Sub-Menu 1</h2>
      <ul id="13575820577142" class="menu-horizontal" style="display: none; position: absolute; width: 500px;">
         <li><a href="index.html">Home</a></li>
         <li><a href="index.html">Computer Blog</a></li>
         <li><a href="index.html">More News</a></li>
      </ul>
   </li>     
   <li>
      <h2 class="menu-vertical-header">Sub-Menu 2</h2>
      <ul id="13575820577143" class="menu-vertical" style="display: none; position: absolute; width: 500px;">
         <li><a href="index.html">Home</a></li>
         <li><a href="index.html">Computer Blog</a></li>
         <li><a href="index.html">More News</a></li>
      </ul>
   </li>
</ul>

There is jQuery (starting in the makeMenus() function) which assigns show/hide functionality to each menu ul and menu header (marked as h2) mouseover/mouseout that shows/hides the appropriate sub-menu.

The show/hide functionality works great in all browsers that I’ve tested so far. The problem is that in IE7, the “mouseover” functionality breaks whenever it hits any whitespace, even between li elements. I don’t want to simply remove all extra whitespace because some whitespace will be needed to “prettify” the menu.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hah… you’ll never guess what the problem was. I needed to set a background color on the ‘ul’ elements. I guess that IE7 doesn’t consider a transparent background as part of the element’s box, at least as far as mouse-overs are concerned. Now I’m forced to choose explicit background colors for my menu elements. What a drag!

    Thanks to anyone who took a look. Hopefully this can help somebody else in the future.

    • 0