Dropmenu Examples

You have to put the id of folder 2 as startDoc.

I tried that but it doesn’t include folder 2 in the menu list, it only shows the docs inside the folder but not the folder itself. The only way I’ve been able to do a work around is have folder #2 inside folder #1 and use folder #1 as the Id but would prefer to just have the folder with the docs be the ID and shown in the menu list with the docs inside as as part of the list too

Quote from: doze at Jun 14, 2006, 05:34 PM

Quote from: ddmobley at Jun 14, 2006, 03:06 AM

I disagree. The examples at Listmatic, etc. are static navigation systems. You are able to modify each HTML element to reflect what the examples are trying to communicate. If you need a class or ID added to a particular UL or LI tag, you just add it. If you need another DIV tag, you create it.

MODx’s DropMenu is dynamically created HTML. It is very difficult to apply the examples at Listmatic to them because you can’t manipulate the base HTML other than to create a class name or a wrapper. And then there are differences when things such as what ’selfAsLink’ is activated, which has nothing to do with whether or not a list element should be considered in the ’here’ class or not, but DropMenu throws it away.

You don’t usually need ID’s or classes on a specific items when doing css list menus. Just right classes here and there and other items can be referenced in the css by walking down the tree.

You can do most (if not all) of the Listamatic menus with the original unmodified DropMenu just fine. For example take a look at this dropdown menu. It’s not a problem at all that it uses the id’s an sorts.. I’m not going to do this in a step by step way, but here’s how this could be achieved with DropMenu:

Call it using:

[[DropMenu? &startDoc=`0` &levelLimit=`2` &here=`activeLink` &topdiv=`1` &topdivClass=`navlist` &subdiv=`1` &subdivClass=`subnavlist`]]

And use this css:

div.navlist ul { font-family: sans-serif; }

div.navlist ul a
{
font-weight: bold;
text-decoration: none;
}

div.navlist ul, div.navlist ul ul, div.navlist ul li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

div.navlist ul li { float: left; }

div.navlist ul li a
{
color: #ffffff;
background-color: #003366;
padding: 3px;
border: 1px #ffffff outset;
}

div.navlist ul li a:hover
{
color: #ffff00;
background-color: #003366;
}

div.navlist ul li a:active
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}

div.subnavlist ul { display: none; }
div.subnavlist ul li { float: none; }

div.subnavlist ul li a
{
padding: 0px;
margin: 0px;
}

div.navlist ul li:hover div.subnavlist ul
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

div.navlist ul li:hover div.subnavlist ul li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}

div.navlist ul li:hover div.subnavlist ul li a:before { content: " >> "; }

What I basicly did is that I used the topdiv and subdiv parameters in the snippet call to have the topmenus and submenus wrapped around divs. Then instead of using ID names in then CSS, I used the div class names to refer to the same elemets, ie. replaced all occures of ul#navlist with div.navlist ul and ul#subnavlist with div.subnavlist ul.

Usually all css listmenu tutorials that don’t require the use of specific styles on each menu item can be used with dropmenu. The ones that does use specific css per menu item are usually not suitable for a dynamic menus anyways or badly designed. But don’t get me wrong, I’m not saying that all tutorials/menustyles in the world are valid for the original DropMenu or can be achieved with it, some may require tweaking the snippet code to get something special. But pretty much anything is possible if you want it badly enough.

As much as I tried to follow this debate, I couldn’t. I followed your sample code, but still don’t have a dropdown menu. The link provided to Listamatic is nice, but I don’t know how to implement the stuff provided there. Can someome please show me how to make a simple drop down menu?

This is what my current menu structure looks like:

exhibitions & events
Home (1)
About Us (4)
events (2)
User Login (3)

The site is on http://domi.softdux.com. The "About Us" link is sopposed to be beneath the Home Link, but it isn’t?

Quote from: SoftDux at Jul 03, 2006, 02:43 PM

The site is on http://domi.softdux.com.

nice website; really ( i like what is simple.)

I’m actually trying out a template found on http://www.tattoocms.it/. Was hoping it had a drop down menu, but it doesn’t ....

is it just me or does the dropmenu inspire the IE whitespace bug, drives me crazy, has anyone experienced a horizontal white space gap due to the menus ul li a ? I tried all the IE hacks for white space but none have worked

Someone got to manage to got a working css-only dropdown menu?? Like this one from css play??

I don’t know how to implement the IE7 only pieces of code using the Dropmenu snippet.
Any thoughts??

That’s a nice one, would love to have it working on my site as well.

I’ve modified the template andreas00 (Anreas Viklund) to use a CSS drop-down-menu. CSS will not be perfect because I’m no CSS pro, but it’s working.
If anyone is interested in my template, I will provide it. Just write me a private message.

I will create my own template and include the menu in the not too far future and I will also provide it here, so be patient.