Dynamically generated Mega Menu layout

Question

I'm working on building a mega-menu that's generated dynamically. Each mega-menu displays several submenus and links. Since I don't know how many submenus and links there will be, I am having trouble with the layout. My idea now is to use this structure when the menu is generated:

  <div class="container">
    <ul class="submenus">
    <li><div class="block">
      <h4>Submenu1</h4>
      <a>link1</a>
      <a><link2</a>
    </div></li>
    <li><div class="block">
      <h4>SubMenu2</h4>
      <a>Link3</a>
    </div></li>
    </ul>
  </div>

I'm having a lot of trouble with layout though. I fit the container width into the window and then I flow left. But I keep getting menus that look like this:

Submenu1   Submenu2   Submenu3    Submenu4
Submenu5

Is there a better way to generate the layout so it could be more symmetrical? I'd like it to look something like this:

Submenu1   Submenu2   
Submenu3    Submenu4
Submenu5

score 0 · Answer 1 · answered Sep 14 '11 at 20:34

0

nesting divs in ul tags isn't valid html!

you better make several lists in div tags so you can position them wel

<div id="firstlist">
<ul id="list1">
<li></li>...
</ul>
</div>

<div id="secondlist">
<ul id="list2">
<li></li>...
</ul>
</div>

now you can position your lists with css.

hope this helps

answered Sep 14 '11 at 20:34

kasper Taeymans

6,950
5
32
51

4

He's nesting them in `
` tags which is perfectly valid HTML.

AlienWebguy

Sep 14 '11 at 20:37

score 0 · Accepted Answer · answered Sep 14 '11 at 20:38

0

Try this:

.container, .submenus {
    width:100%;
    margin:0;
    padding:0;
}

.submenus li {
    display:block;
    float:left;
    width:50%;
}

Demo: http://jsfiddle.net/AlienWebguy/8CThT/

answered Sep 14 '11 at 20:38

AlienWebguy

76,997
17
122
145

Thanks. I guess I can expand this idea to multiple columns. Say I wanted three columns I would set the width to 33% ? – BLane Sep 14 '11 at 20:52
Yep. You could also look into the [Twitter Bootstrap](http://twitter.github.com/bootstrap/) which has a grid system built into the CSS. It's just a CSS file you can hotlink and use to your liking. – AlienWebguy Sep 14 '11 at 21:03

Dynamically generated Mega Menu layout

2 Answers2