1

I have this menu using just CSS and HTML. Some of the sub-menus are long, so I would like to sub-divide them into separate lists of up to 5 items and display them side by side instead of underneath each other.

So I've put them in a <div> and created 2 separate <ul> items. I tried to make them display: inline and set the maximum height of the <div> to 100px but it doesn't really force the browser to put the second <ul> beside the first one.

       <li>
                <a href="#">Sub Item 1.2 Can be long</a>
                <div>
                <ul>
                    <li><a href="#">Sub Item 1.2.1</a></li>
                    <li><a href="#">Sub Item 1.2.2</a></li>
                    <li><a href="#">Sub Item 1.2.3</a></li>
                    <li><a href="#">Sub Item 1.2.4</a></li>
                    <li><a href="#">Sub Item 1.2.5</a></li>
                 </ul>
                <ul>
                    <li><a href="#">Sub Item 1.2.6 From here should be in 2nd col</a></li>
                    <li><a href="#">Sub Item 1.2.7</a></li>
                    <li><a href="#">Sub Item 1.2.8</a></li>
                    <li><a href="#">Sub Item 1.2.9</a></li>
                    <li><a href="#">Sub Item 1.2.10</a></li>
                 </ul>

                </div>
            </li>

Full working sample here: http://jsfiddle.net/nhfHw/17/ To see the issue just hover over Item 1 > Sub Item 1.2 Can be long

Apart from this I would like to make the menu open up the sub-levels on click rather than hover but I guess its not possible using just CSS. What is the best approach to do it in javascript?

jbx
  • 21,365
  • 18
  • 90
  • 144

1 Answers1

2

To have them sit side-by-side, use display:inline-block on those sub-sub ULs (Fiddle):

#nav ul li ul li ul 
{
  display:inline-block;
  float:none;
}

For binding the clicks, here is the way to do it with pure JS: How do I bind a click to an anchor without a framework (javascript)

If you want to use jQuery, I'd recommend toggling a class and using that in the css to display/hide the navigation:

$('#nav li').bind('click', function() {
  $(this).toggleClass('open');
}

then in your CSS do something like:

#nav ul li.open ul {
  display:block;
}
Community
  • 1
  • 1
Lost Left Stack
  • 1,932
  • 13
  • 14
  • Thanks for the `display: inline-block`, I guess I was doing it at the wrong level then! Regarding the click events, yes that function works to turn the sub-level on and off when the item is clicked, however it is not turning off any other sub-levels that would already be visible (through previous clicking) and I guess I also need to do it when something else is clicked? – jbx Aug 28 '13 at 16:14
  • I seem to have solved the click issue with this: ` ` – jbx Aug 28 '13 at 20:15