CODEWITHSUNDEEP
javascripthtmlcss
Jguy
Jguy

Reputation: 580

Splitting a ul list of links into a seperate column at a specific point using jQuery or CSS

I currently have a button that has a rather large list of links in it, all in a multiple drop down configuration. for example:

<ul id="nav">
<li><a href="">Items</a>
  <ul>
    <li class="nav-divider">Equipment</li>
    <li><a href="#">Weapons &raquo;</a>
      <ul>
        <li class="nav-divider">One-Handed</li>
        <li><a href="#">Axe</a></li>
        <li><a href="#">Hammer</a></li>
        <li><a href="#">Wand</a></li>
        <li><a href="#">Sword</a></li>
        <li><a href="#">Dagger</a></li>
        <li class="nav-divider">Two-Handed</li>
        <li><a href="#">Axe</a></li>
        <li><a href="#">Hammer</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Sword</a></li>
        <!-- Would need to split the list here to a separate column -->
        <li class="nav-divider">Ranged</li>
        <li><a href="#">Bow</a></li>
        <li><a href="#">Crossbow</a></li>
        <li><a href="#">Ammunition</a></li>
        <li><a href="#">Arrows</a></li>
        <li><a href="#">Projectiles</a></li>
      </ul>
    </li>
    <li><a href="#">Armor &raquo;</a>
      <ul>
        <li class="nav-divider">Type</li>
        <li><a href="#">Plate &raquo;</a>
          <ul>
            <li><a href="#">Head</a></li>
            ... (a few more, no multiple columns needed)
            <li><a href="#">Shoulders</a></li>
          </ul>
        </li>
        <li><a href="#">Chain &raquo;</a>
          <ul>
            <li><a href="#">Head</a></li>
            ...
            <li><a href="#">Shoulders</a></li>
          </ul>
        </li>
        <li class="nav-divider">Other</li>
        <li><a href="#">Accessories &raquo;</a>
          <ul>
            <li><a href="#">Earrings</a></li>
            <li><a href="#">Rings</a></li>
            <li><a href="#">Necklaces</a></li>
          </ul>
        </li>
        <li><a href="#">Off Hand &raquo;</a>
          <ul>
            <li><a href="#">Shields</a></li>
            <li><a href="#">Talismans</a></li>
          </ul>
        </li>
        <li><a href="#">Back</a></li>
        <li><a href="#">Amulets</a></li>
      </ul>
    </li>   
  </ul>
</li>
</ul>

Some of the lists are fine, but the list of links under 'Items -> Weapons' is too long, causing the page to stretch slightly down on some lower display resolutions. I would like to split just that list into two columns so that the 'Ranged' divider/header appears in its own column (I've indicated where the split should occur in the code with a comment).

I would assume I would need some sort of Javascript to accomplish this but by now, I've been trying different pieces of code and different methods to get this to happen with no success. Either some solutions split all lists across 2 columns evenly (by using column-count in css) (don't want that), some split the columns but the second doesn't have any formatting (and I don't know why).

I've placed what I have as far as the HTML and CSS3 into a fiddle, which you can view here: http://jsfiddle.net/MSmj9/2/

You can see from the fiddle some stuff in css I've tried by the comments with no success.

Any assistance or guidance you can offer is greatly appreciated.

Best Regards.

Upvotes: 1

Views: 141

Answers (2)

Deceased
Deceased

Reputation: 86

To accomplish this you need to split your list items into to lists. You can do this on server or client side.

For server side just create extra list with the Ranged weapons, for client side you can do something like that (jQuery exmaple, can be simplified by creating extra classes on list items) http://jsfiddle.net/5hJLv/4/

$(function(){
var dividers = $('#nav .level3 .nav-divider');        
if (dividers.length > 2) {
    var lastIndex = $(dividers.get(2)).index() - 1;          
    var extraColumn = $('#nav .level3 > li:gt(' + lastIndex + ')'); 
    var parent = $('#nav .level3').first().parent('li');
    var extra = $('<ul class="level3 inserted"></ul>').append(col2.clone());        
    parent.append(extra);
    //extra;
    col2.remove();
}

});

Upvotes: 1

Justin
Justin

Reputation: 1329

What about just splitting that <ul> into two? Check out this (REALLY simplified) fiddle: http://jsfiddle.net/U9CFE/

Here's a sort of template for the CSS, with just your problem area and some generic class names:

.sub, .sub-sub {
    display:none;
}

li.parent:hover > .sub {
    display: block;
}

li.weapons-parent {
    position: relative;
}

.sub-sub {
    position: absolute;
    border: 1px solid red;
}

.sub-sub:last-child {
    left: 199px;
}

.weapons-parent:hover > .sub-sub {
    display: inline-block;
}

Upvotes: 2

Related Questions