15 Replies Latest reply: Jul 6, 2013 9:36 PM by Dennis48755 RSS

    Spry menu replacement

    Dennis48755 Community Member

      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

        • 1. Re: Spry menu replacement
          Jon Fritz II MVP

          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.

          • 2. Re: Spry menu replacement
            mhollis55 Community Member

            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.

            • 3. Re: Spry menu replacement
              Dennis48755 Community Member

              Thanks Jon,

               

              Can you suggest any that you have used?

               

              I get overwhelmed when I am confronted with "tons of free css menu systems available online" to choose from. Thats why I come to this forum in search of products reccommended by others more wise them me.

               

              Opps, I sent this before noticing that mhollis55 listed a couple suggestions.

               

              Dennis

              • 4. Re: Spry menu replacement
                Jon Fritz II MVP

                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)

                • 5. Re: Spry menu replacement
                  mhollis55 Community Member

                  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

                  • 6. Re: Spry menu replacement
                    Dennis48755 Community Member

                    Thanks mhollis55,

                     

                    I have licenses for all of the WebAssist extensions and I recently used their CSS Menu Writer (part of Design Extender) and it does create what appears to be a list in a menu.php file. However I would be uncomfortable just updating the list in that file because when I add an item to the menu with the CSS Menu Writer GUI, it updates at least three files in a CSSMenuWriter folder, which I then have to remember to synchronize.

                     

                    I am not familiar with the PVII menu systems although I do have their Tooltip Magic product. I was looking at their Tree Menu Magic even scanning through the users guide and all references to editing the menu referred to the GUI, no mention of editing/importing the list directly.

                     

                    Dennis

                    • 7. Re: Spry menu replacement
                      Dennis48755 Community Member

                      I am using DreamWeaver CC

                       

                      Mark,

                       

                      What you describe “Then build your navigation using their tool.” Is exactly what I am trying to avoid as I have numerous list with many tens of lines of items that I wish to reuse. I am not a typist and I can’t see copy/pasting into a tool when I already have the properly formed list.

                       

                      Dennis

                      • 8. Re: Spry menu replacement
                        mhollis55 Community Member

                        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

                        • 9. Re: Spry menu replacement
                          Nancy O. MVP

                          @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.

                          • 10. Re: Spry menu replacement
                            Jon Fritz II MVP

                            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.

                            • 11. Re: Spry menu replacement
                              Nancy O. MVP

                              @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.

                              • 12. Re: Spry menu replacement
                                Dennis48755 Community Member

                                Hi Nancy, I appreciate your chiming in.

                                 

                                Not a new menu (yet) but replacing Spry in numerous existing menus, see my post #1 for more details.

                                 

                                I want to replace the outdated Spry to make the websites more iOS friendly. 

                                 

                                Because some of the existing (Spry) menus are lengthy and I am a two-finger typist I would prefer to be able to reuse my existing UL lists. I also prefer editing a menu by editing the UL list code directly rather than using an extensions GUI and having multiple files to synchronize.

                                 

                                My first task is to update the menu at http://www.oldenglishsheepdogclubofamerica.org. You can see how large and multilevel the menu is and the “Health” item/area uses its own equally extensive menu.

                                 

                                You mention some good things in you bullets so I will reuse them…

                                 

                                * There are Responsive menus that change based on device width.

                                      * Do I need them if I want to eventually use DreamWeaver CC’s Fluid Grid Layout?

                                 

                                * There are Mega menus that consume lots of screen real estate.

                                      * No, No.

                                 

                                * There are diminutive one-level menus.

                                     * I don’t think so.

                                 

                                * And there are multi-level menus.

                                      * Flyout/dropdown submenus , but not multiple levels/lines displayed all the time.

                                 

                                * There are menus with really cool transition effects.

                                      * Might be nice but not of high importance (I’m migrating from boring Spry)

                                 

                                * Also, which devices/browsers do you need to support?

                                      * iPad/iOS most urgent, I just learned through Google Analytics that half of the visitors to the above website are using iPads.

                                 

                                I would value you feedback, especially if you have an opportunity to view the above website and have some suggestions.

                                 

                                I am not opposed to paying for a quality product especially if I can use it for other & future websites.

                                 

                                I am using DreamWeaver CC.

                                 

                                Thanks,

                                Regards,

                                Denny

                                 

                                Sorry, my editing the bulleted list didn't post the way I intended.

                                • 13. Re: Spry menu replacement
                                  mhollis55 Community Member

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

                                   

                                  ___

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

                                  - Mark Twain

                                  • 14. Re: Spry menu replacement
                                    Nancy O. MVP

                                    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.

                                    • 15. Re: Spry menu replacement
                                      Dennis48755 Community Member

                                      Thanks Nancy.

                                       

                                       

                                       

                                      Regards,

                                       

                                      Denny