I've successfully created an automatic menu where the headers expand automatically onmouseover. The site looks ok, however I would like to further modify it but kept hitting a brick wall! Ooucch!
I would like only one header to be expanded at any one time. When the mouse is out and move over to another header, the previous header will collapse on its own.
My current expandingMenu.js as below:
/*Expanding Menus for Indexhibit
*uses jquery
*
*Created by Ross Cairns Mar 2008
*/
function expandingMenu(num) {
var speed = 200;
var item_title = $("#menu ul").eq(num).children(":first");
var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
/* hide items if not active */
if (items.is(".active") == false) {
items.hide();
}
/* add click functions + pointer to title */
item_title.css({cursor:"pointer"}).hover(
function () {
items.slideToggle(speed);
})
item_title.css({cursor:"pointer"}).toggle(
function () {
items.hide(speed);
}, function () {
items.show(speed);
})
}