Surprise, new question about menus

Today I worked on getting the menu system set up. I was able to do so using [[Wayfinder?&startId=`0`]]. However that just created a vertical, indented list of pages navigating my site.

So a drop down menu is on order. I searched the site and found several references to ’DropMenu’ but I cannot find it in the repository. Anyone know where I can find that now?

Also, Im interested in learning some other ways to create a good drop down menu. I tried ’ListMenu’ I believe it was in etomite and got it to work fairly well, so that would be an option, but I just want a very cross browser friendly drop down menu while trying to avoid huge uses of javascript if possible at all.

Thanks again in advance for everybody’s help, it is greatly appreciated.

Dropmenu is the predecessor of Wayfinder, has nothing to do with a drop down menu. With Wayfinder you can style your output as you like, so a drop down menu can easily be achieved. Look at the samples provided in assets/snippets/wayfinder/examples. You can use them right from the start, take a look:

http://www.muddydogpaws.com/development/wayfinder/examples/example-1.html

I tried using that as I ran across it in the search (should have said that in the post) but I didnt have any success with it, but in fairness I also couldnt find the css for it but I didnt know it was provided as part of the MODx install. I’ll give it another try this evening.

Okay, I got everything working, but there are some quirks with it that I just dont care for. Are their any other ways to do this and still validate? I know that with enough time and patience I could probably work through it all and get it to work, but then there’s all the cross browser stuff and so on.

Is there a way to just make the wayfinder menu horizontal instead of vertical?

I did fine QuickMenu from OpenCube at http://www.opencube.com/ which looks to validate strict, which would be awesome. Is there a way to create the CSS from there and just point wayfinder to it? Seems that would be the easiest way to do things since there would be no need for javascript then you could just create different css files for IE6 and perhaps for IE5.

If none of that is possible then just a flat horizontal menu would be good, I can work with that.

Again, sorry to be such a pest but doing these menus and making sure they work in as many browsers as possible is not my strong point.

Is there a way to just make the wayfinder menu horizontal instead of vertical?

You can do this in the CSS by changing:
display: block; - to - display: inline;

You need to wrap the WF call in a div, then you can style it as needed.

for example if you do:

<div id="menu">
[!Wayfinder?startId=`0` &level=`1`!]
</div>

You can then style the WF menu in CSS by:
#menu ul li { display: inline; }

Thank you sir. I’ll give that a shot until I can work something out with the dropdown menu.

You know, you said I would need to wrap WF in a div. I already have it in a div in the template, I wonder if that is causing some of the quirks? The dropdowns all work as they should, its just that the second level doesnt always. That is to say, you see the dropdown, but when you go to move your pointer over it, it disappears. If I move the mouse fast enough sometimes, then it works okay. It exhibits this behavior in both Firefox and IE7.

Okay, I think I found the issue with the drop down menu, I just don’t know how to correct it.

The first level appears just fine. I can hover my mouse over a menu item and get the second level to show, that works fine. However when I move the mouse to the second level, it dissapears, like you had moved off the first level item. After playing with this a while I very slowly moved my mouse from the first level to the second level. There was a point when the second level began to flicker a lot, like there was a dead spot between the first and second levels.

I tried Stu Nicholls Menu: http://www.cssplay.co.uk/menus/final_drop.html
I tried the muddy dog paws menu: http://www.muddydogpaws.com/development/wayfinder/examples/example-1.html
I even tried a menu that says to be pure CSS and completely cross browser compatible: http://www.grc.com/menu2/invitro.htm

With each of them I get the flickering and lost focus issue. Its relatively intermittent as well it seems as some times I can hover over the first level and move to the second level without issue. Im not sure which part of the CSS is at play here though. Ive tried changing settings and playing around to see if I could stumble on to something, but nothing I do is making any difference.

If anyone has had any experience with this issue and can help out or get me in the right direction, I would greatly appreciate it.

There was a point when the second level began to flicker a lot, like there was a dead spot between the first and second levels.

There may be some unwanted margin being set between the menus. Check the css and try setting all left/right margins to 0.

Thanks for the reply dev_cw. I think I got it worked out. Ive been playing around with Stu Nicholls style sheets for his drop down menus and I found that there was a conflict I guess between my style sheet and the menu stylesheet. I had three header sections, superheader, midheader and subheader. I was putting the menu in the subheader. The template I was using already called up a style sheet for the layout, which of course had styling for the subheader.

When I activated the menu, and called the stylesheet for the drop down menu it too addressed specifically the subheader and both my style sheet and the menus had styling for links and so forth, though my style sheet didnt address specifically <li> and <ul>. I just disabled the subheader in my style sheet all together and let the menu style sheet address all that and so far its been working.

Its not ideal though, most of the menu stlye sheets only go a couple levels down and since my site deals with automotive stuff I could need several more to drill down to model specific stuff and trying to figure out how to do all that has been the next challenge. I guess I need to look into how to call up different menus or something. In joomla I can have infinite menus with different names and I can call them up individually so that the main page may have a different menu than say the articles page. But I havent figured out how to do that in MODx yet.