Question

Please see my website at http://animevoters.apphb.com. Click Tags in the main menu. It is too long. I’ve seen some website, like espn.com where the droplist is in a panel so that the items are arranged there quite nicely. What I’d like is something along that kind of an idea, sort of making the droplist multi-panel (like two or three) so that the items do not have to go down beyond the screen. Any suggestion on how this can be done? Thank you.

Btw, I am using ASP.NET MVC and JQuery.

Answer 1

Use a DIV to wrap your menu panel, then use multiple lists inside it.

see: http://jsfiddle.net/cFvpe/1/

HTML:

<div class="wrapper">
     <ul>
         <li><a href="...">Menu item</a></li>
         <li><a href="...">Menu item</a></li>
         <li><a href="...">Menu item</a></li>
         <li><a href="...">Menu item</a></li>
      </ul>
     <ul>
         <li><a href="...">Menu item</a></li>
         <li><a href="...">Menu item</a></li>
         <li><a href="...">Menu item</a></li>
         <li><a href="...">Menu item</a></li>
      </ul>
</div>

CSS:

.wrapper {
    background-color:#0000f0;
    padding:4px;
    width:220px;
}

.wrapper ul, .wrapper li {
    list-style-type:none;
    padding:0;
    margin:0
}

.wrapper ul {
     width:100px;
     margin-right:10px;
     float:left;  
}

.wrapper a {
    display:block;
    font-family:arial;
    text-decoration:none;
    padding:3px;
    font-size:12px;
    color:#ffffff;
    width:100px;
    margin-bottom:2px;
    background-color:#0000c0;
}

.clear {
    clear:both;  
}