Two ways to add a multi-column sub menu
There are two ways to add a UL drop down menu that spans
multiple columns. The first method is the simplest, and simply requires adding a
CSS class of "multicolumn" to a nested UL to turn its LI contents into columns.
Move your mouse over "Folder1" below to see an example of this:
Below shows the relevant portion of the menu markup where you'd
add the CSS class "multicolumn" to turn Folder1's sub menu into
multiple columns:
<ul> <li><a href="http://www.google.com">Item 1</a></li> <li><a href="http://www.google.com">Folder 0</a> <ul> <li><a href="http://www.google.com">Sub Item 1.1</a></li> <li><a href="http://www.google.com">Sub Item 1.2</a></li> </ul> </li> <li><a href="http://www.google.com">Folder 1</a> <ul class="multicolumn"> <li><a href="http://www.google.com">Sub Item 1.1</a></li> <li><a href="http://www.google.com">Sub Item 1.2</a></li> <li><a href="http://www.google.com">Sub Item 1.3</a></li> <li><a href="http://www.google.com">Sub Item 1.4</a></li> <li><a href="http://www.google.com">Sub Item 1.5</a></li> <li><a href="http://www.google.com">Sub Item 1.6</a></li> <li><a href="http://www.google.com">Sub Item 1.7</a></li> </ul> </li> " "
By default this splits the contents of the target sub menu into two columns, as dictated by the following CSS inside efluidmenu.css:
ul.multicolumn {
width: 460px !important;
left: 300px;
margin-bottom: 20px;
overflow: hidden;
}
ul.multicolumn li {
float: left;
display: inline;
}
ul.multicolumn li {
width: 50%;
/* width: 33%; */ /* for 3 columns */
/* width: 25%; */ /* for 4 columns */
}
To render 3 columns instead, change the width of the LI selector above to 33% instead.
Adding a rich HTML sub menu
The previous method of implementing a multi-column sub menu can be limiting in that it's still just a regular UL list, with no elements other than LIs allowed inside it. F0r a more robust alternative, eFluid Menu also supports attaching an arbitrary DIV on the page as one of the header's sub menus, giving you the flexibility of including anything you'd like inside the sub menu. Move your mouse over "Folder1" below to see an example of this:
To give a menu header a rich HTML sub menu, first, insert a "rel" attribute
inside the desired header's LI element pointing to the ID of the rich sub menu DIV:
<ul> <li><a href="http://www.google.com">Item 1</a></li> <li><a href="http://www.google.com">Folder 0</a> <ul> <li><a href="http://www.google.com">Sub Item 1.1</a></li> <li><a href="http://www.google.com">Sub Item 1.2</a></li> </ul> </li> <li rel="richmenu"><a href="http://www.google.com">Folder 1</a></li> <li><a href="http://www.google.com">Item 2</a></li> " "
Then, simply define the sub menu DIV itself on the page, for example:
<div id="richmenu" class="richmulticolumn"> <div class="column"> <b>Webmaster</b> <ul> <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li> <li><a href="http://www.cssdrive.com">CSS Drive</a></li> <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li> <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li> </ul> </div> <div class="column"> <b>News Related</b> <ul> <li><a href="http://www.cnn.com/">CNN</a></li> <li><a href="http://www.msnbc.com">MSNBC</a></li> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://news.bbc.co.uk">BBC News</a></li> </ul> </div> <div class="column"> <b>Technology</b> <ul> <li><a href="http://www.news.com/">News.com</a></li> <li><a href="http://www.slashdot.com">SlashDot</a></li> <li><a href="http://www.digg.com">Digg</a></li> <li><a href="http://www.techcrunch.com">Tech Crunch</a></li> </ul> </div> </div>
As you can see, anything can go inside this DIV- here we've added three ULs
with accompanying headers that are floated to make the result appear as 3
columns. The style of the rich sub menu is contained inside the ".richmulticolumn"
class inside efluidmenu.css. One important
thing to take note when you define and associate a rich HTML sub menu with a
header is that the sub menu is physically moved within the DOM tree to become a
child of the header. This is why within efluidmenu.css, you see the selectors targeting
".richmulticolumn" having the following extra hierarchy:
.efluidmenu ul li > div.richmulticolumn {
position: absolute;
left: 0;
display: none;
visibility: hidden;
border: 1px solid #289997;
padding: 10px;
width: 450px;
color: white;
background: #24a9a7;
}
"
"
Table Of Contents
This script consists of an index page plus a supplementary page: