Spry Menu 1.6.1 vs Spry Menu 2.0 (1.7) aka UI Menubar

Question

I have been working with the original Spry Menu that came with CS5 for some time now.  Slowly I have been learning how to use it, and more importantly, edit it without breaking it.  There are some great articles out there by David Power that I printed out and keep in a folder at my desk.  Great stuff.
Now I want to build a menu that is supported on touch pads like an iPad.  Having spent many hours trying to figure it all out, I found a post that said you had to use the Spry Menu 2.0 version for touch features.  Oops, did not know that.  Having upgraded to the new version in the Widget Browser, customized it for colors and such, I put into a test page.  This is where it went all wrong. 
I have no access to anything in the Properties Selector area.  It’s just blank, no options at.  If I go back to one of my old menus, it works just fine.  So I can't add top or submenu items to the menu like I could in the old version, unless I want to type out the code.  The menu does not display is design view like a finished product.  All I get is a listing of the menu.  I have to display the page in a browser or in live view mode to see it display right.  Which throws the page all out whack and it’s hard to edit with this big long list of text.
So, I guess my question here is.  Does this sound right to everyone?  I saw a posting by Gramps, which makes me think I understand the problem above it true and because of that he sticks to the original version.  I want the touch pad access so I need to upgrade. 
Is there a fix I have not found?  Some code change to make it all happy again?  Should I just dump the idea of using the Spry Menu and use something else?
Thanks to everyone out there who take the time to answer our questions.  I think this is a my very first posting. 

Answer 1

Amy, welcome to our fold.
You have struck the epitome of the problem when using Spry Menu 2.0, it is a beast when one tries to shape and style it outside of the Widget Browser. The markup looks very meek and mild as in
<ul id="MenuBar">
  <li> <a href="#">Home</a></li>
  <li> <a href="#">Entertainment</a></li>
  <li> <a href="#">Politics</a></li>
  <li> <a href="#">Sports</li>
</ul>
but once it is interpreted by the JavaScript, it looks like
<div class="MenuBar  MenuBarLeftShrink" id="MenuBar">
    <ul id="" class="MenuBarView">
    <li class="MenuItemContainer"><a href="#" class="MenuItem MenuItemFirst" tabindex="0"><span class="MenuItemLabel">Home</span></a></li>
    <li class="MenuItemContainer"><a href="#" class="MenuItem" tabindex="-1"><span class="MenuItemLabel">Entertainment</span></a></li>
    <li class="MenuItemContainer"><a href="#" class="MenuItem" tabindex="-1"><span class="MenuItemLabel">Politics</span></a></li>
    <li class="MenuItemContainer"><a href="#" class="MenuItem" tabindex="-1"><span class="MenuItemLabel">Sports</span></a></li>
    <a href="#" class="MenuItem" tabindex="-1"><span class="MenuItemLabel MenuItemLast"></span></a>
  </ul><br class="MenuBarBreak">
</div>
<a href="#">
<!-- rest of markup -->
</a>
</body>
</html>
There are certain aspects that I do not understand without spending time to follow them through. There is no documentation so you are left on your own. When submenu levels are added, the generated markup looks even stranger.
The main problem with the original SpryMenuBar is its lack of support for touch screens; alternatively one could say that the problem lies with touch screens and their lack of ability to register hover events.
This means that if we had a menubar that is not reliant upon hover events, our menubar will work in touch screen clients. In our menu above (that is the one that has not been reformed by JS), there is no hover event. All of the menuitems, being single level, follow the link with a click event. It is when a menuitem has a link as well as submenus that a hover event is required. If we remove the link when a menuitem has submenus, we also remove the need for a hover event and it will work in touch screen devices. To illustrate this
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a> <!-- no link -->
    <ul>
      <li><a href="mylink11.html">Item 1.1</a></li>
      <li><a href="mylink12.html">Item 1.2</a></li>
      <li><a href="mylink13.html">Item 1.3</a></li>
    </ul>
  </li>
  <li><a href="mylink2.html">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a> <!-- no link -->
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <!-- no link -->
        <ul>
          <li><a href="mylink311.html">Item 3.1.1</a></li>
          <li><a href="mylink312.html">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="mylink32.html">Item 3.2</a></li>
      <li><a href="mylink33.html">Item 3.3</a></li>
    </ul>
  </li>
  <li><a href="mylink4.html">Item 4</a></li>
</ul>
There are commercial extensions available that do work within DW as opposed to products from the Widget Browser that do not allow for DW interaction.
Gramps