Dropdown Menus using Structure

Is there a way to create dropdown menus using the Structure module? I understand the nav_main and nav_sub functionality, but has anyone successfully created a css/javascript solution dynamically using Structure?

Absolutely. It’s all in the markup. Using nav_sub in conjunction with the start_from and show_depth parameters (or using the sitemap tag for that matter) will write out fully valid netsted <ul>s with witch to do as you wish. Simply write your CSS accordingly.

Jack,

Thanks for the reply. I’m beginning to wrap my mind around this but I’m still wondering how to customize the output of the tags. It seems the sitemap tag is what I want, and creates the code I need, but is there any way to change the ID of the ul? Also, how do you add classes or IDs to nested uls? Do I need to resort to some DOM trickery and assign classes/IDs via javascript?

I’ve used Chris Coyier’s “simple jquery dropdowns” (http://css-tricks.com/simple-jquery-dropdowns/) with success in the past, but perhaps this code won’t work with the way Structure builds the menus.

If it’s not too much trouble, do you have any code you can provide that might point me in the right direction?

Actually, scratch that. I’m changing the css and javascript to reflect the “ul#sitemap” that the Structure code creates and it’s working pretty well. Thanks again Jack for your assistance.

Actually, scratch that. I’m changing the css and javascript to reflect the “ul#sitemap” that the Structure code creates and it’s working pretty well. Thanks again Jack for your assistance.

No prob! Most of those features will be in the (likely) next release of Structure, so you want need to work any javascript trickery 😊

I’m trying to accomplish the same thing at the moment.

Jack, any chance you could expand on the use of the nav_sub as a drop down menu (as oppose to sub navigation on secondary page). I’m able to produce the main navigation, but the sub nav is not nesting within the appropriate main nav element.

There are plans in the works for a {exp:structure:nav_main} tag that will do just this for you. No promises on dates though. You MIGHT be able to get something going depending on your situation with a combination of the start_from, limit_depth, and show_depth features combined though.

misterKeebles, for what it’s worth, I’ve only found reliable results using the sitemap tag and referencing ul#sitemap in my CSS and JS.

There are plans in the works for a {exp:structure:nav_main} tag that will do just this for you. No promises on dates though. You MIGHT be able to get something going depending on your situation with a combination of the start_from, limit_depth, and show_depth features combined though.

Thanks Jack.

I’ve been able to modify the sitemap function to get the dropdowns going with a few small snags. Is there a way to exclude a page from this sitemap list, and limit the depth of the sub navigation, similar to how the subnav function works?

UPDATE: Scratch this request. We ended up getting things to work using a previous post as a base query for child pages, then edited the $html output to limit the depth to the main nav and one level of subnav.

We also needed a way for our template to incorporate a third column. This column would consist of any callouts assigned to the page, and include the <ul> of any third-level navigation that was present. We ended up writing a new structure function (structure:is_leaf} to check if the page was a “leaf” (no children), and if {segment_2} was present. This provided us with a boolean to determine if we need to output the {structure:navsub} and any other entries from the callout weblog.

Our template can now auto-update from 2-columns to 3-columns, depending on if there’s something to display on the sidebar.