WordPress.org

Forums

[Theme: Twenty Eleven] Creating a horizontal dropdown submenu (23 posts)

  1. databell96
    Member
    Posted 3 years ago #

    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?

  2. the Workshop
    Member
    Posted 3 years ago #

    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.

  3. databell96
    Member
    Posted 3 years ago #

    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.

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    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.

  5. databell96
    Member
    Posted 3 years ago #

    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.

  6. esmi
    Forum Moderator
    Posted 3 years ago #

    Now, just tell me how to do this.

    That is not the way in which to elicit help...

  7. databell96
    Member
    Posted 3 years ago #

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

  8. esmi
    Forum Moderator
    Posted 3 years ago #

    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.

  9. databell96
    Member
    Posted 3 years ago #

    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.

  10. esmi
    Forum Moderator
    Posted 3 years ago #

    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.

  11. databell96
    Member
    Posted 3 years ago #

    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.

  12. esmi
    Forum Moderator
    Posted 3 years ago #

    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.

  13. Digital Raindrops
    Member
    Posted 3 years ago #

    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!

  14. databell96
    Member
    Posted 3 years ago #

    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?

  15. Digital Raindrops
    Member
    Posted 3 years ago #

    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

  16. Eric1984
    Member
    Posted 3 years ago #

    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

  17. alchymyth
    Forum Moderator
    Posted 3 years ago #

    @Eric1984
    unless you are using the same theme, please start your own topic and post a link to your site.

  18. Eric1984
    Member
    Posted 3 years ago #

    Hello,

    Sorry I should have mentioned it before i'm using Twenty Eleven too.

    I was thinking about starting a new thread but it's the same problem i'm having as databell96, same theme too.

  19. databell96
    Member
    Posted 3 years ago #

    OK, I think I finally have it. Almost. I made a couple of changes to the original Twenty Eleven theme and I gave @access ul ul a width of 600px (100% doesn't work) added #access ul ul li with a display: inline; and the same to #access ul ul a. Take a look at the result and my only issue now is to figure out how to make the width flexible instead of a fixed px width.

    Thanks for all the help.

  20. esmi
    Forum Moderator
    Posted 3 years ago #

    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.

  21. databell96
    Member
    Posted 3 years ago #

    Did you read my post from earlier? I'm using a duplicate. Done it many, many times and it's always fine. There's no reason to create a child theme.

  22. Eric1984
    Member
    Posted 2 years ago #

    Nice one! looks pretty good.

    I tried adding inline to the display: command but it did not do anything. I tried this in every part that had "display" within the menu section.

    Which part were you talking about? I could not find #access ul ul li

  23. databell96
    Member
    Posted 2 years ago #

    @Eric1984, you won't find @access ul ul li by defauly in your style.css. You will have to add it yourself.

    Ah, the perils of typing! ;-)

Topic Closed

This topic has been closed to new replies.

About this Topic