CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ahmad
Ahmad

Reputation: 13406

Break UL into multiple columns

It is difficult to extract code and post it here, so I'm posting a sample site which demonstrates my problem. I've been thinking about this, and there are several ways to solve this problem (HTML modification, CSS + HTML modification, CSS + JS modification), but since I'm a n00b at web coding, I want to know what is the best plan of attack here.

Anyways, the problem:

Have a look here: http://321cart.com/sellya/

Open the Categories Navigation menu, and you get this:

enter image description here

All those links under the categories are ul containing lots of li. I want to break the list and spread the list of multiple columns, so that there are only a maximum of 3 li in one column. Here is an example of what I want to do:

enter image description here

This is the overall thing that I want:

enter image description here

This will cause the menu width to increase (virtually double, in theory), but that is okay for me. I can deal with this on my own.

There are several methods to do this, but I would prefer if there's some way to do this using only CSS modification. If not, then maybe through CSS and JavaScript modification ? I want to reserve changes to actual HTML code as a last resort, because that is the original PHP HTML generation OpenCart code which I don't want to modify.

Please note that I did try to resolve this problem on my own, but it proved to be a little complex .. So don't think I didn't try .. Secondly, posting this in a JSFiddle would have been difficult to, and it would not have truly represented the actual problem fully, which is why I'm posting a link to a sample site.

Please have a look guys. Site: http://321cart.com/sellya/

So I need some answers for this problem that has me baffled.

EDIT:

Forgot to point this out. In the example I provided, all uls had more than 3 lis each, but in my actual case, only a few uls have more than 3 lis each, and I only want to extend those ones to 2 columns, not the ones will 1, 2 or 3 lis each.

Upvotes: 0

Views: 1909

Answers (3)

Bartek KG
Bartek KG

Reputation: 41

take a look at this:

var $columns = $("#columns");
var $longlist = $("#longlist");
var columnscount = 3;

//calculate sigle column size
var columnsize = Math.ceil($("p", $longlist).size() / columnscount);

//iterate number of columns, take [columnsize] elements, move them to div#columns and wrap with div.column
for (var i = 0; i < columnscount; i++) {
    $("p:lt(" + columnsize + ")", $longlist).appendTo($columns).wrapAll("<div class='column'/>")
}

you would need to add some condition to avoid spliting list shorter that 3 elements.

and this is how it works: http://jsfiddle.net/hGWjd/

Upvotes: 0

lomantpa
lomantpa

Reputation: 56

You can set the outer divs width (the ones with "span2" class in the provided link) to something like 350px and set LIs width to 100px and float:left directive. This is the simplest approach you can use.

Upvotes: 0

icktoofay
icktoofay

Reputation: 128991

CSS3 introduced columns, which should do what you want. In theory, simply apply a height and column-width to your ul. In practice, you might need to use vendor prefixes on the column-width, giving you -webkit-column-width, -moz-column-width, etc. Try it out.

Upvotes: 2

Related Questions