There are tons of free css menu systems available online and most are set up in the way you describe.
Hold it, Project VII and WebAssist do menus that are not lists?
Here's a Project VII menu that I have deployed:
<div id="p7PMM_1" class="p7PMMh08 p7PMMnoscript">
<li><a href="#">Bed Bugs</a>
<li><a href="bed/about.html">About Bed Bugs</a></li>
<li><a href="insect/bee.html">Solitary Bees</a></li>
<!--<li><a href="#">Other Insects</a></li> -->
<div class="p7pmmclearfloat"> </div>
And here's a WebAssist menu:
<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>
<li class="parent"><a href="products/pavers.html">Pavers</a>
<li><a href="products/pavers/kfbrick.html">KF Brick</a></li>
<li class="parent"><a href="products/retainingwalls.html">Retaining Walls</a>
<li><a href="../products/retainingwalls/ab.html">Allan Block</a></li>
<li class="parent"><a href="video/Walrock/walrock.html">Wallrock</a>
<li class="parent"><a href="products/masonry.html">Masonry</a>
<li class="parent"><a href="products/bulk.html">Bulk</a>
<li class="parent"><a href="products/culturedstone.html">Cultured Stone</a>
<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/nsvi.html">NSVI Veneers</a></li>
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
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).
- 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.
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.
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.
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:
... Spry navigation stuff here
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.
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.
I am using DreamWeaver CC
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.
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.
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.
And the three links I gave you above should get you well on the way to getting that done.
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.
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...
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.
Sorry, my editing the bulleted list didn't post the way I intended.
jQuery Superfish is a multi-level menu system that works on IE10 and Touch Screens:
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.