-1

I want to create a megamenu in bootstrap.

(Something like jsfiddle.net/apougher/ydcMQ/). But the items are not predefined... they are dynamic in nature. So I cant use <ul><li> with some fixed items in it. So I am looking for some dynamic approach where multiple <li> items will be defined under one single <ul> element and the height need to be fixed. Once the height crosses the limit, next <li> elements should come in next column and so on... Can this be done?

Edited: Basically I am looking for a way where the height is fixed and width per column is fixed. If the number of lines cross the fixed height, they should go into the next column automatically. For Ex: If the height is 400px which allows only 10 lines (Just an example). If I write 25 lines... it should span into 3 columns automatically with first column having 1-10 lines, second column having 11-20 lines and third column having 21-25 lines.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
ICK Geek
  • 13
  • 3

2 Answers2

0

You can use any of these functions to attach <li> dynamically to a list

prepend - It inserts an li to ul as the first child.

or append - It inserts an li as last child.

var new_task = "Your text here";

You can use either

$('ul').append('<li>'+new_task+'</li>');

or

$('ul').append('<li>'+new_task+'</li>');

Check the Fiddle

sarath
  • 343
  • 8
  • 31
  • I am looking for a way where the list can span into multiple columns automatically as soon as allowed height increases. I think this approach will keep increasing the height rather than making them into next column right? – ICK Geek Mar 09 '15 at 13:21
0

I forgot to post how I solved this. Posting the approach I took below.

I didn't find a clean way to do this. So here is what I did

I have created a table with fixed with column (Ex: 25%). I am keeping count of number of <li> elements getting added. Whenever the count goes beyond a limit (Ex: 10), add one more column to the table and add inside it rather than adding in existing column. Once new column is added, reset the counter so that I can add 10 <li> elements in it. With above thing, I could add upto 40 <li> elements in 4 columns. In my case, this limit was good enough.

I know this is a hacky way... but I couldn't come up with more cleaner way.

Thanks

ICK Geek
  • 13
  • 3