Skip navigation
Currently Being Moderated

Spry menu replacement

Jul 2, 2013 10:41 AM

Hi,

 

I have developed numerous websites with Spry menu's which I now want to migrate to jQuery.

 

I am aware of the fine products from WebAssist and Project VII, however I prefer menu systems built on lists. It is so much easier (in my opinion) to edit the list and upload the single page, then opening a DreamWeaver Extensions UI to edit the menu and having multiple files that have to be synchronized. Also since my existing Spry menus are built on lists, to update to jQuery I just need to replace the code for the scripts and not have to recreate the menus in an extensions UI.

 

Searching this forum I have come across the reference to Dynamic Drive Smooth Navigational Menu and indeed this looks like a good alternative.

 

I am curious why I don’t see any reference to the jQuery-UI Menu Widget? And in fact why might Adobe decided not to include the menu widget when they have included most of the other widgets?

 

I am interested in your thoughts about the jQuery-UI Menu Widget before I decide on ddsmoothmenu.

 

As i second thought/question, will ddsmoothmenu remain a good alternative when I decide to migrate to a reponsive layout?

 

Thanks,

Dennis

 
Replies
  • Currently Being Moderated
    Jul 2, 2013 10:43 AM   in reply to Dennis48755

    Many of the javascript options available are not the best way to go as far as menus are concerned. They tend not to get indexed by search engines and if someone has their .js turned off, they can't navigate your site.

     

    It's much better to use a pure CSS driven menu system than one which relies on javascript (jQuery).

     

    There are tons of free css menu systems available online and most are set up in the way you describe.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2013 11:13 AM   in reply to Dennis48755

    Hold it, Project VII and WebAssist do menus that are not lists?

     

    Since when? I have purchased both Project VII and WebAssist menuing systems and all of them are based on unordered lists. Every single one of them is completely editable and re-editable without running the Dreamweaver plugin, provided you can understand how the HTML is built (you don't need to understand the CSS or the JavaScript—to the extent they use JavaScript—to make changes).

     

    Here's a Project VII menu that I have deployed:

     

          <div id="p7PMM_1" class="p7PMMh08 p7PMMnoscript">

            <ul class="p7PMM">

              <li><a href="index.html">Home</a></li>

              <li><a href="about.html">About</a></li>

              <li><a href="#">Services</a>

                <div>

                  <ul>

                    <li><a href="service/residence.html">Residential</a></li>

                    <li><a href="service/commercial.html">Commercial</a></li>

                  </ul>

                </div>

              </li>

              <li><a href="#">Bed Bugs</a>

                <div>

                  <ul>

                    <li><a href="bed/about.html">About Bed Bugs</a></li>

                    <li><a href="bed/treatment.html">Treatment</a></li>

                  </ul>

                </div>

              </li>

              <li><a href="#">Insects</a>

                <div>

                  <ul>

                    <li><a href="insect/termite.html">Termites</a></li>

                    <li><a href="insect/ant.html">Ants</a></li>

                    <li><a href="insect/roach.html">Roaches</a></li>

                    <li><a href="insect/flea.html">Fleas</a></li>

                    <li><a href="insect/bee.html">Solitary Bees</a></li>

                    <!--<li><a href="#">Other Insects</a></li> -->

                  </ul>

                </div>

              </li>

              <li><a href="#">Rodents</a>

                        <div>

                <ul>

                          <li><a href="rodent/mice.html">Mice</a></li>

                    <li><a href="rodent/rats.html">Rats</a></li>

                  </ul>

                </div>

              </li>

              <li><a href="wildlife.html">Wildlife</a></li>

              <li><a href="contact.php">Contact</a></li>

            </ul>

            <div class="p7pmmclearfloat"> </div>

          </div>

     

    And here's a WebAssist menu:

     

    <div id="topNavigation">

        <ul class="level-0" id="cssmw_home">

          <li><span><a href="aboutus.html">About Us</a></span></li>

          <li class="parent"><span><a href="products.html">Products</a></span>

              <ul class="level-1">

                <li class="parent"><a href="products/pavers.html">Pavers</a>

                    <ul class="level-2">

                      <li><a href="products/pavers/anchor.html">Anchor</a></li>

                      <li><a href="products/pavers/belgard.html">Belgard</a></li>

                      <li><a href="products/pavers/kfbrick.html">KF Brick</a></li>

                      <li><a href="products/pavers/cambridge.html">Cambridge</a></li>

                    </ul>

                </li>

                <li class="parent"><a href="products/retainingwalls.html">Retaining Walls</a>

                    <ul class="level-2">

                      <li><a href="../products/retainingwalls/ab.html">Allan Block</a></li>

                      <li><a href="../products/retainingwalls/anchor.html">Anchor</a></li>

                      <li><a href="../products/retainingwalls/belgard.html">Belgard</a></li>

                      <li><a href="../products/retainingwalls/cambridge.html">Cambridge</a></li>

                      <li><a href="../products/retainingwalls/keystone.html">Keystone</a></li>

                    </ul>

                </li>

                <li class="parent"><a href="video/Walrock/walrock.html">Wallrock</a>

                </li>

                <li class="parent"><a href="products/masonry.html">Masonry</a>

                </li>

                <li class="parent"><a href="products/bulk.html">Bulk</a>

                </li>

                <li class="parent"><a href="products/culturedstone.html">Cultured Stone</a>

                    <ul class="level-2">

                      <li><a href="products/culturedstone/thinbrick.html">Sunset Veneers</a></li>

                      <li><a href="products/culturedstone/cultured.html">Cultured Stone</a></li>

                      <li><a href="products/culturedstone/robinson.html">Robinson</a></li>

                      <li><a href="products/culturedstone/nsvi.html">NSVI Veneers</a></li>

                    </ul>

                </li>

              </ul>

          </li>

          <li><span><a href="tools.html">Tools</a></span></li>

          <li><span><a href="contact.php">Contact</a></span></li>

          <li><span><a href="directions.html">Directions</a></span></li>

        </ul>

      </div>

     

     

    Funny, they really look like lists to me. Now maybe I don't get lists, or maybe I don't understand lists as you know them, but these look an awful lot like lists to me and they are currently deployed and working. In all browsers.

     

    What I would recommend is that you consider what the good folks at Project VII have for responsive layouts and their menus. And you can also roll your own, as there are tons of pure CSS dropdown menus out there

     

    Here is one from Lukasz Fiszar

    Here is one from Webdesigntuts plus.

    Here's another one from Osvaldas Valutis

     

    None of these require jQuery and I personally think you're heading down a wrong path in picking a jQuery system.

     

    • First, you do not need jQuery for responsive (please see the three examples above and there are more).
    • Second, you're going to have to know and understand JavaScript and how the ddsmoothmenu plugin works with it when jQuery is updated, because the jQuery community is completely uninterested in backwards compatibility. So, unless you are maintaining your own code, you're going to get into trouble in the future.
    • Third, the three examples above as well as the menuing system that Project VII sells (that you say is not based on lists) do not rely on jQuery, which means you're looking into a menuing system that will increase download times unnecessarily on your websites.

     

    So survey your real options and pick something that you like. In my opinion, something based on jQuery will tend to be a real problem.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2013 1:06 PM   in reply to Dennis48755

    I generally write my own now days.

     

    Here's a good paid one IIRC: http://cssmenumaker.com/dreamweaver-css-menu-extension

     

    (depending on your DW version)

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2013 1:16 PM   in reply to Dennis48755

    The reason why there are "tons of free CSS menu systems available online" is because if you look at any web page, you can view the source. When you view the source, you get to see how someone else did something. When you see how someone else did something, you get to use what they did and add your own refinement.

     

    Jon is incorrect. JavaScript has nothing to do with site indexing. Web crawlers will look at all of the linked content on your web page and follow those links. And navigation systems that use JavaScript don't use JavaScript for linking, they use it to show/hide pull-down menus (which are always visibile to web crawlers and blind persons).

     

    If you have a lot of websites with Spry navigation, I would buy Project Seven's Pop Menu Magic or Drop Menu Magic. These come in .MXP and .ZXP plugins for Adobe Dreamweaver and will let you rip out your old navigation and put in new navigation in your website.

     

    So if you have:

     

    <div class="navigation">

    ... Spry navigation stuff here

    </div>

     

    You can take out the stuff between the open and closing div tags, get rid of the links in your <head> are to the Spry code and then place your cursor in the div you had set up for navigation and activate the Project 7 plugin. Then build your navigation using their tool.

     

    Drop Manu Magic works with the new Responsive websites, Pop Menu Magic works with the older fixed-width sites. Both are rockin' tools that will get you where you want to go and, if you divide the cost of the plugins by the number of websites you have, you'll find them cheap.

     

    The links I gave you above are links to tutorials that will show you how to do this without a plugin and manage your code yourself.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2013 2:23 PM   in reply to Dennis48755

    Then you do not have to use their tool—though you can simply create a menu with one entry.

     

    But if you look through the two menus that i put up there, you will see differences in the way the two companies handle sub-menus.

     

    With the WebAssist tool, you're using class="level-0" or "level-1" or "level-2" in order to determine level. That's not all that hard to understand. And even with a complicated structure, you're going to be able to edit that list just fine.

     

    With Project VII, they're using <div> to do sub-menus and there is no specific class name. That might actually be easier.

     

    With both tools, in order to stay compliant with Internet Exploder version 6 and all of the permutations of the stupidity Microsoft put into their browsers, there is some JavaScript code. I will reiterate:

     

    While JavaScript does hide sub-menus (until they are needed) it does not provide any linking and does not prevent any search engine's web crawler from accessing your content and it does not prevent screen readers for the blind from accessing pages in your navigation.

     

    Older versions of Spry did not correctly activate on Mobile and, when Adobe saw the limitations of the Spry framework they dumped it. You can still use it, but Adobe has decided to not support it.

     

    So you can do minimal navigation using these two tools and then flesh everything out with your current lists, taking care to add <div> and classes where needed.

     

    Again, look at the menu lists above.

     

    If what you have are simply pure lists, then you need a pure CSS menu. The lack of JavaScript will probably mean that you cannot support Internet Exploder 6. I don't find that a problem.

     

    And the three links I gave you above should get you well on the way to getting that done.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2013 2:31 PM   in reply to Jon Fritz II

    @Jon,

    I don't agree with your assertion that jQuery menus are bad.  The good ones work in all devices with or without JS because they are primarily CSS styled lists.  

     

    Pure CSS drop-menus are great for one level navigation lists.  But sub-lists don't perform well on touch screens without help from JS.  And looking forward, we need to consider touch screens because that's where all our machines are headed.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2013 2:49 PM   in reply to Nancy O.

    Sorry folks, I've been running for about 36 hours without sleep and the coffee ran out a while ago.

     

    I do have to admit that was a glaringly obvious brain fart in the above post.

     

    I'm not sure exactly what I was thinking about to be honest.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2013 5:32 PM   in reply to Dennis48755

    @Dennis,

    I'd be happy to make recommendations.  But first, you need to be more specific about what you want.  Just saying "I need a new menu" isn't telling us much.  

     

    • There are Responsive menus that change based on device width. 
    • There are Mega menus that consume lots of screen real estate. 
    • There are diminutive one-level menus. 
    • And there are multi-level menus. 
    • There are menus with really cool transition effects.
    • Also, which devices/browsers do you need to support? 

     

    The devil is in the details...

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2013 12:04 PM   in reply to Dennis48755

    Heck, then just update Spry. It's now compatible.

     

    ___

    "A discriminating irreverence is the creator and protector of human liberty."

    - Mark Twain

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 6, 2013 1:05 PM   in reply to Dennis48755

    jQuery Superfish is a multi-level menu system that works on IE10 and Touch Screens:

    http://users.tpg.com.au/j_birch/plugins/superfish/

     

    FluidGrid Layouts need Responsive Menus.  Also, in smaller devices you must re-think how many menu items are truly essential.   When the time comes, look at Project Seven's Responsive Tabs.

    http://www.projectseven.com/products/tools/tpm2/tutorials/miracle-menu /page1.htm

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)