Grow your CSS skills. Land your dream job.

Major problems with css mega menu that I’ve coded

  • # March 22, 2013 at 4:10 pm

    The link

    [http://codepen.io/Krish1980/pen/cFlDu](http://codepen.io/Krish1980/pen/cFlDu “”)

    Just cant seem to get it work

    a) The second ul of the first drop down have links that start from the bottom of the dropdown , instead of the top. I’m not sure how to fix it.

    b) This would be a dynamic menu. The programer I’m working with says that I’ll have to set a max width to the dropdown beyond which the dropdown cannot extend to the right. I’m not sure how I’d do that. If I set the outer dropdown(the one without the background) to a fixed width, that would work, but then I’d have to remove no-wrap(I think). And if I do do that, then if the menu only has enough items to populate one column, the entire space to the right would be ‘within’ the outer dropdown and that would be incorrect – the dropdown should be hidden the moment the user moves out of the visible portion of the dropdown.

    check this

    [http://css-tricks.com/forums/discussion/23550/sub-nav-tabs#Item_6](http://css-tricks.com/forums/discussion/23550/sub-nav-tabs#Item_6 “”)

    where I was corrected by wolfcry(one of the posters)

    c) The client wants right borders to the columns spanning the full height of the dropdown div .

    Can that be done without a background image and just borders?

    like this

    [http://www.hm.com/gb/](http://www.hm.com/gb/ “”)

    or this

    [http://www.riverisland.com/](http://www.riverisland.com/ “”)

    # March 22, 2013 at 5:10 pm

    a) add vertical-align: top to .nav li ul
    b) you need more info from the programmer (why isn’t he doing this?, what’s the designer have to say?) – what happens when there _is_ more content than the dropdown is allowed to be in width? It seems to me its the content that should be controlled
    c) the borders in the example sites are background images on the div

    # March 22, 2013 at 11:04 pm

    Thank you very much for the vertical align fix.

    > you need more info from the programmer (why isn’t he doing this?, what’s the designer have to say?) – what happens when there is more content than the dropdown is allowed to be in width?

    The trouble is that I don’t understand a word of php, so I have to go by whatever he says – I just don’t have the ammu to counter question him because he’ll have some answer. The thing is, we’ve already reached a stage where I’ve created the mega menu that flies open to the right with the ul borders (yes, I used a bg image, just wanted to know if there was another method), have the menu items perfectly populate and somehow divide themselves automatically in a max of four columns (for which I had used that invisible div with the width) when there are a lot of items. The columns may become 3,2,1…based on the number of menu items, and the visible dropdown will resize itself. The client is aware that the drop down has a product limitation (the programmer has set a column limit of 22 per column – he **claims** that he can set this to any number) and is okay with that – he’ll approach the programmer **if** the number of products exceed this limit, to change the list item limit in the column, or perhaps even change the menu – a situation, he claims, will never arise.

    Now, what he will not appreciate is have a huge invisible portion of the dropdown to the right as the hover area. You’ve provided me the fix, but I’m sure how to tackle the next step (setting a max-width). Can it only be done via programming?

    We are trying to create something like this

    http://www.naaptol.com/

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".