[Tutorial] How to style DropMenu with CSS

Scotty,
Great tutorial. Here is a great website that shows many examples of how to style an unorderd list. It shows you all of the css to get the list to look like the examples.

http://css.maxdesign.com.au/listamatic/

Kyle

thanks for posting that link kyle! I am a big fan of that site for list CSS!

-sD-

after sucessfully implementing this I found one shortcoming - any workarounds?

If one of the menu items is a folder with a blank template (not a page, just a folder) and it has children, it won’t reveal the 2nd level menu items when clicked.

Quote from: unclemeat at Apr 04, 2006, 01:42 AM

after sucessfully implementing this I found one shortcoming - any workarounds?

If one of the menu items is a folder with a blank template (not a page, just a folder) and it has children, it won’t reveal the 2nd level menu items when clicked.

Because you set it to blank template. Is there a site structural purpose for doing this? Why not just set the template of that page to be the same as the rest of the site. If you search the forums a bit there is a topic around here somewhere about having the first child of a page loaded when an empty parent folder is selected. I imagine that would be your best bet.

-sD-

Actually, I set it to a blank template on purpose. I wanted it to be a non-clickable "category header" with child pages.

Is there another way I can do this?

We’ve done the same with modxhost, the nav headers are all empty folders with clickable children - but, it’s with a particular menu in mind and the snippet was hacked to produce custom id’s that works with the script and css.

So, possible yes

Quote from: unclemeat at Apr 04, 2006, 05:44 AM

Actually, I set it to a blank template on purpose. I wanted it to be a non-clickable "category header" with child pages.

Is there another way I can do this?

Yes, I got that. I understand what you were saying. What I was asking, is there a reason that you insist on making it non clickable? why must it be set as a category header? I know they show this in the default install of 0.9.1, but I was wondering if there was something about it that is mission critical to your site. I mentioned above a topic in the forums here for having empty folders link to first child document. You should read it. I think this may work better for you. I don’t believe anything is impossible though. If it is really important to you, take a look at the HTML structure of the list that DropMenu puts out on your "category header". You may be able to find clues to styling with CSS.

here is the link to the empty folders topic:
http://modxcms.com/forums/index.php/topic,1394.0.html

later

-sD-

If you think about it, it makes sense that the "empty" folder would not display any children when clicked. The "empty" folder has no link, no page to go to, so how can it be give the .here class, since you are not going anywhere when you click on it? The change in menu structure, the adding of the .here class to the current item’s li container, occurs on the page refresh, when the DropMenu snippet’s code is run while parsing the new document. While going through the list of children to generate their links, if the child’s ID is the same as the document ID then the .here class is added to the li element. Just clicking on something will not do that.

Thanks for all your help and suggestions, Scotty...been working on other projects the last few days...and I’ll review the threads and see what I can do.!

It would seem to me that Stu Nicholl’s new drop menu method is dang near custom built for this treatment. And LOOK MA! NO JAVASCRIPT! Works in IE too.

And I gotta say, this was the EASIEST drop menu system to install ever. Drop it in. Change a bit of spacing and a few colors. Done.

The only thing I have to figure out is how exactly to script it so that IF the flyout happens under the far right toplevel it puts the class of "left" on the list item that contains the nested list. No big deal if it’s my site, but this one is a client site and you KNOW that means that is the first thing that the client does is put a nested list there . . . also, though it’s not NECESSARY for the menu to work, it would be cool to have the "drop" class on the anchor tag of the list item that has the nested list inside it so the little arrow or whatever image or different background or whatever you choose will appear and tip people off that this is a list item that has more links associated with it. Anybody who has better php coding skills than me (which is almost everybody) please let me know if you have an idea.