Use DropMenu to generate your menus then use the here selector to set your display property.
Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
-
- 21 Posts
can you walk me through how to use it?
sorry for being dumb...
There’s a ton of discussion on the forums about how to use the DropMenu snippet, so it’d probably behoove you to do a quick search first as there’s so many ways to go with this. Also, it’s fairly well documented in the snippet code header comments. Take a peek there first and come back with any specific questions and I’m sure you’ll get your answers fast.
Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
Simply style the li ul containers with display:none, then li.here ul display:inline or display:block. Use CSS to position them where you like.
When making a second menu, such as the parent is horizontal and the child menu is vertical in a sidebar, I use a second DropMenu call, using the GetParent snippet as its startDoc. Of course, this will only work in a 2-level menu. There is a GetUltimateParent snippet that will return the id of the hightest parent below 0, which will work nicely as long as your first-level menu is using 0 for its startDoc.
-
- 21 Posts
wow the get ultimate parent worked.
Now how do I style-ize the submenus? when I look at the code, they have the same class, topnav.
Do I go into the template and wrap a div around the submenu?
Thanks, in advance..
topnav li is for the top level, then use topnav li ul to get at the second level (the ul inside the li tag) and take it from there. The snippet does have an argument to let you encase everything in divs, I’ve never found the need to do that. Look over the list of arguments in the beginning of the snippet. Lots of options there.
I would recommend that you work through a few css menu tutorials. This is an excellent one:
http://www.alistapart.com/articles/taminglists/
You can also get the css file for a given page if you use your browser and save it as complete html. Then you can examine the style to see how the effect was achieved.