[Tutorial] How to style DropMenu with CSS

This question comes up a lot on the forums here at MODxCMS so I thought I would address it here in the Tips/Tricks section.

This is the technique for selectively hiding menu items contained in a folder, then revealing them when the folder item is selected in the menu. This tutorial will cover Menus up to 3 levels deep, but once you read and understand the formula MODx’s DropMenu applies to the list it generates, you can append this to cover folder structures of an unlimited depth.

the Scenario:
Your site map looks like this

Home
About Me
Folder1
-SubPage1
-SubPage2
-SubFolder3
-SubFolderItem1
-SubFolderItem2
Contact-us
FAQ
-FAQ1
-FAQ2
-FAQ3

In an unstyled world, MODx’s DropMenu would output this list exactly as above in an HTML unorderd list (<ul>) with List Items (<li>). It will apply special classes to these items, depending on which one is selected. If you call the snippet as [[DropMenu]], the snippet will display an unordered, nested list of every page (checked to "Show in menu") from the site root on down.

Let’s say we put our drop menu in a div called "menu". In our template HTML file the menu sectin would look like this:



to display only root level items, we would use our CSS to hide anything in the unordered list (<ul>) deeper than the first <ul><li> by using the following code:



Now we want the items below the root (we will call them level 2 items and folders) to display in our list when their parent item is selected or active. to do that, we use this in the style sheet:



Ok, so now what we have is a list menu that displays the items and folders on the root of your site, and when you select a menu item with children, the children become visible under that listed item ( and slightly indented to show that they are children of that folder). We can style them like this:



The problem is that the level 3 children are also visible, but we don’t want them to appear until their level 2 parent is selected. The solution:



Now we should style the Level 3 items, so they appear seamless with the rest of our style:



There you have it! A DropMenu that hides child elements until their parent is activated!

enjoy,

-sD-
Scotty Delicious

I forgot to mention, you can see this in action at my website [ http://www.scottydelicious.com/ ]. The "photos" section has 3 levels of sub-menus.

later

-sD-

Thanx for sharing this. Think a lot of new users having troubles with DropMenu, maybe this will help them...

Yes, that was very helpful and clever, Scotty, However, I do hope that Modx (or someone) builds this functionality into the dropmenu snippet - that is, the ability to selectively show child levels of the current document.

Steve

Is it possible to set a custom class for the <li>s that are not considered as ’here’ ?

Quote from: grunt_lord at Mar 30, 2006, 09:34 PM

Is it possible to set a custom class for the <li>s that are not considered as ’here’ ?

Yes, but not without heavily modifying the snippet <*wink> (My current project). I will keep you posted. I sent you a PM

-sD-

Quote from: steveua at Mar 30, 2006, 05:13 PM

Yes, that was very helpful and clever, Scotty, However, I do hope that Modx (or someone) builds this functionality into the dropmenu snippet - that is, the ability to selectively show child levels of the current document.

Steve

The output generated by MODx’s DropMenu is a semantically perfect XHTML list. Most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such. MODx is unique and progressive in that it is first and formost a CMS and PHM Application Framework that is capeable of outputting 100% XHTML 1.1 validating pages. Search around a bit and you will find less than a handful of others that can do this.

The beauty of MODx and it’s powerful XHTML generation is that there can be complete separation of content and style. View my site without the CSS! You will notice that it is very simply organized, and in the form of an outline using <h1>-<h6>tags as significance delineators, not as a way to adjust text size.

Having a list or part of it’s items hidden or visible falls under the realm of style. MODx does not do style. XHTML in general should not do style! This is the job of CSS! That is why DropMenu is perfect. The fact that it does not selectively show and hide items is not a limitation of MODx, it is a limitation of the designer. Lists are the language of XHTML, Showing and Hiding are the language of CSS. MODx is helping to move forward to the new age of the internet. With this must also come a new way of thinking. The way you are used to designing sites and managing site menus will change, and as you become more aware of this, you begin to realize how much better it is to do it this way, and how much more flexible it makes your design.

For most designers, CSS is learning another language. It takes time to master. Just because you don’t know how it works or how to do it doesn’t mean DropMenu is broken, incomplete, or in need of improvement. It means you need to get yourself up to speed on contemporary web design. I reccomend the website A List Apart for learning more about XHTML lists and CSS.

DropMenu is the perfect menu system for the XHTML world. DropMenu creates everything you need to make your complete site menu. CSS does everything you need to display that list any way you can imagine, and this tutorial shows you step by step how to do this! To build the functionality you describe into DropMenu would be to antiquate the snippet and set MODx several eons back in CMS evolution, because it takes functionality away people unable to use modern browsers, and that would be wrong.

If you are unable to grasp CSS and XHTML, that’s ok. MODx and it’s developers have never claimed that this is the be all, end all in CMS applications. There are a lot of CMS’s out there [ http://opensourcecms.com ] that have exactly what you are describing in their menuing system, but they probably will not generate the beautiful, clean, Web 2.0 code that MODx does. It all depends on what is more important to you! When you get to the point that you understand XHTML, CSS, and DropMenu, you will see that it is the coolest thing since sliced bread!

There is also an ancient snippet from the tech preview releases of MODx called "MenuBuilder". It is no longer supported, and it may or may not work, but it did do what you are describing. I assure you that DropMenu, once you figure it out, will do everything you want and more! I have attached the MenuBuilder snippet to this post.

later

-sD-
scotty Delicious

... the coolest thing since sliced bread!

I remember when the bread truck first came through our neighborhood with its loudspeaker blaring and banners flapping to introduce Sliced Bread! My mother thought it was wonderful, now she didn’t have to slice the bread to make my PB&J sandwiches. I have never liked it. I’m in hog heaven here, where the basic cheapest loaf of bread sold everywhere is an unsliced long oval loaf! And it comes in white and "dark" (a very mild rye).

Actually, the point was made in an earlier post that such an option would help reduce bandwidth and memory usage in the case of several very large submenus. I think there is a point there, but for a different list generating snippet, not DropMenu. Sometimes one size does not fit all.

Quote from: sottwell at Apr 01, 2006, 06:49 AM

I think there is a point there, but for a different list generating snippet, not DropMenu. Sometimes one size does not fit all.

Perhaps we will see the revival of the etomite MenuBuilder.

-sD-

wonderful scotty!

thanks so much. works like a charm.