Support » Themes and Templates » [Theme: Twenty Eleven] Creating a horizontal dropdown submenu

  • Trying to change the way my submenu in my access div in TwentyEleven and having issues with it. I just thought simply add a display: inline; to ul ul li would do the trick, but it’s a lot more complicated than that. My client wants it where the submenu appears horizontally with all links on one line instead of the current way with one link on top of the next vertically. How would I accomplish this?

Viewing 15 replies - 1 through 15 (of 22 total)
  • tricky. how many levels and what kind of a menu are you talking about? lot of li’s can throw it all off.

    Stu Nicoles at css play has some good solutions
    I prefer the old style of brute force by writing additional classed and then hardcoding them into the header menu when all else fails.
    20 11 is a monster. best thing to do is install a custom css plugin so you can write code without effecting the theme. the idea you have is right but you might have to make compound classes to get the effect you want.

    Just one level down. So it would be Main –> Sub and that’s it. Nothing too crazy. I was hoping I could use the Access menu built into TwentyTen and Twenty Eleven but so far, I’m having all sorts of issues. Check this page out. It’s about as far as I’ve been able to get it to work. The submenu is horizontal but the menus are all over the place.

    BTW, it’s not the one that is at the top right. It’s the one next to the logo. Should be obvious once you rollover it.

    esmi

    (@esmi)

    Forum Moderator

    Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

    I’m not editing Twenty Eleven. I’m duplicating it and using that theme to make changes. A child theme is not necessary and I’ve never used one on any of my projects. Now, just tell me how to do this.

    esmi

    (@esmi)

    Forum Moderator

    Now, just tell me how to do this.

    That is not the way in which to elicit help…

    OK, please tell me how to do this. I don’t know what to do.

    esmi

    (@esmi)

    Forum Moderator

    If you look at the original Twenty Eleven theme, you’ll see that it already has a horizontal dropdown menu. So all you need to do, if you want to create a second menu, is to replicate this one’s markup & CSS using a different id – eg #access2 instead of #access.

    Correct. It’s the one I’m using. However, I don’t think you understand what I’m attempting to accomplish. If you rollover the menu, you get a drop down that’s oriented vertically like this:

    Link One
    Line Too
    Link Three

    See?

    What it needs to be is more like this:
    Link One Link Two Link Three

    Obviously with better margins/passing than that. But you get the idea.

    That’s what I’m attempting to accomplish.

    esmi

    (@esmi)

    Forum Moderator

    If you rollover the menu, you get a drop down that’s oriented vertically like this:

    Not quite. Check out what happens if you have a child of a child. The sub-menu flows horizontally – not vertically. You could re-use this in your menu. Check out the CSS on #access ul ul etc. One flaw – you have to be careful that the menu doesn’t flow beyond the right edge of the browser window.

    Well, I don’t want a child of a child. There’s only going to be one tier of submenus. This is where I’m confused. I did look at that and the results you see are on my previous link above. As for the right edge, I plan to create individual left styles for each submenu once this issue is resolved.

    esmi

    (@esmi)

    Forum Moderator

    I don’t want a child of a child

    I understand that. What I’m suggesting is that you re-use the same CSS techniques that Twenty Eleven uses for a “child of a child” as and how you want. Look at how that theme does it and then apply the same CSS approach to your menu.

    The problem you will have is width with a dropdown, what would happen if the far right item had 5 children, you will need to float the children left, which might make them look detached.

    You could be better with a second menu with a menu walker that shows the children only when one is selected.

    If you look at this test theme it works on categories and has a walker, keeps the dropdown, but select any menu item and it will show the siblings!

    Actually, the last two links will not have drop downs. Only the first ones will. So it’s not that big a deal.

    However, you’re sort of in the right vain of things, DR. One thing they’d like to do is when you’re on a certain page, the drop down starts out with the menu expanded to whatever submenu needs to be opened and the page bolded (or whatever) on focus. So you’ve kind of got the right idea. Pop Chips’ site uses that via a lot of JavaScript. Is that what a walker can do?

    A menu walker returns the menu as an array, and you can then add classes, change output etc:

    This post here add the menu description to the menu items as an example.

    The walker I had to write was for the sub menu, as category menu classes do not add ancestor classes, so I had to find the ancestors, parents and siblings

    So that is what you would be looking at really, getting the related menu items via a walker and showing them on a sub menu, I have the code for categories but not custom menu items.

    If it is your own website for $16 there is UberMenu MegaMenu

    Or these from Design Chemical

    Regards

    David

    Has this been resolved? I’m trying to accomplish the same thing:

    Originally it is:
    Link 1
    Line 2
    Link 3

    When instead of dropping down onto multiple mines it goes onto one line:
    Link 1 Link 2 Link 3

    Where in the CSS do you find it? I followed esmi’s advice but there are a few areas where there is #access ul ul

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘[Theme: Twenty Eleven] Creating a horizontal dropdown submenu’ is closed to new replies.