WordPress Sub-Menus

[Baba]

I have had the following post on the WordPress forum for the last 2 days without a response from anyone. I am placing it here also to see if anyone on the StudioPress side can help. Thanks.

I am using a StudioPress theme with the Simple Page Sidebars plugin. I am able to drag a custom menu widget into any sidebar. Some of my WordPress menus are too long. Is there a way to have the sub-menus "drop down"??? See http://www.graham.az.gov/county-recorder/recorder-info/public-request-forms/

Thank you!

[Jon Schroeder]

Do you mean, for example, underneath "general info," you'd like a dropdown with the subitems there?

If so, this can be accomplished with some (relatively) simple CSS. Is that what you're trying to do?

[Baba]

Jon, yes, with this particular department you see the menu items, "General Info", "Recorder Info", "Voter Info" and all of them have quite a few sub-items listed. Dropdowns would help shorten my page lengths.

Do you have any CSS suggestions?

Thank you for responding.

[Baba]

Hellloooo, is anybody out there?

[Jon Schroeder]

I can't really provide a ton of direction as far as CSS goes, in all likelihood, other than styling the following elements (this is a starting point). Teaching you enough CSS to do this on your own is really beyond the scope of these forums, I'd think. But here's a starting point for the items you should be thinking of styling:

.menu-recorder-container > ul > li {}
.menu-recorder-container > ul > li:hover {}
.menu-recorder-container > ul > li > a {}
.menu-recorder-container > ul > li:hover > ul {}

To learn to style these, here are a few tutorials:
http://www.devinrolsen.com/pure-css-vertical-menu/
http://webdesign.tutsplus.com/tutorials/orman-clarks-vertical-navigation-menu-the-css3-version--webdesign-5944

Here are three plugins that have been vetted by WPMU which will probably do just about what you're looking for, without doing any styling yourself: http://premium.wpmudev.org/blog/free-wordpress-accordion-menu-plugins/

Hopefully this helps!

[Jon Schroeder]

Here's a very quick codepen showing you using your markup how this could be achieved with CSS only (which is simpler, by a bit, than adding in that jquery accordion component that the plugins I'd linked added).

http://codepen.io/jonschr/pen/Kkobi

This would be a starting point, not an ending point, because while it does what you want it to do, it isn't very pretty.

[Baba]

Jon, thanks for responding. Cool stuff. I do understand that learning CSS/HTML through the forums is not possible but what you have given me is more than I expected but exactly what I was hoping for. I do have one dumb question though. Would the CSS be placed in my child theme style.css?

Originally, when I first created the website I was using a jquery accordion plugin but it conflicted with something on my site therefore I was forced to delete it and use the WordPress menu. I will study what you have posted and hopefully I will succeed.

Thanks again!

[Jon Schroeder]

Hmm. Interesting. A jQuery accordion using the native WordPress menus actually is precisely what's called for here (this is pretty much the ideal way to do it).

Do try one or more of the plugins I'd posted above; they all do things that are pretty much like that. If you're still seeing errors (or if they simply don't work), that is the sort of thing I could probably help you troubleshoot. 95% of the time, the error will be loading jQuery the wrong way either in your theme or in one of your plugins.

Yes, if you're doing the css-only method, the styles will be placed directly into your child theme style.css.

Thanks!

[Baba]

Don't give up on my yet....another thought.

When using the WordPress menus I am able to add items to my theme's Primary Menu and Secondary Menu. These menus can have dropdown sub-menus if I add them in. I created the new menus for each department within my website through the WordPress menus, creating the menu structure in basically the same manner as the Primary and Secondary menu. So why don't the department sub-menus dropdown if the Primary and Secondary menus have that capability?

I am using the Simple Page Sidebars plugin on each department page. I drag the WordPress custom menu widget into the custom sidebar created for each department. Could the Simple Page Sidebars plugin cause the department sub-menus to not dropdown or is that just the way the WordPress menu is set up to work?

Was that clear as mud?

[Jon Schroeder]

Yep, perfectly clear! Basically, it's probably not the plugin causing this – the plugin is doing what it's supposed to do, and in fact the plugin itself is just saying "this widget goes on this page," and nothing else (I think, based on how you've described it). The thing that's missing isn't the menu itself – the markup is all there.

Think of it this way: you could move a menu from the primary menu to the secondary menu position (or however you have those labeled) and the same menu would appear, but it would look different. There are different styles in place for each of those locations.

Well, the sidebar is just another location, but there aren't any baked-in styles in place to address the menus, so right now it just displays as a simple unordered list, with submenus as nested unordered lists (ul and li, in the markup).

Baba, I'd be happy to talk through this with you more directly if you'd like; this isn't an offer to do work on your site, but if you'd like, I'll take 15 minutes or so and talk through it with you. Send me an email at [email protected] with a phone number if you'd like, and I'll call you.

[Author]

Posts