Expanding Menus on hover...

benjii / 2009-02-05 17:57:54   

Hi all,

Im currently building my site here Design Portfolio
I made a couple of modifications to Ross Carins great expanding menus script so that they open on rollover. For anyone whos interested. I plan to put an accordion style menu but i think this is a simple solution to start with!

/*Expanding Menus for Indexhibit  *uses jquery  *  *Created by Ross Cairns Mar 2008 modified by Benjamin Ashcroft Jan 2009*/

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) {

/* add click functions + pointer to title */
function () {
function () {
}, function () {


Vaska A / 2009-02-05 18:12:45   


Thanks for sharing.

arsondpi / 2009-02-05 18:39:15   


cruz / 2009-02-06 14:53:47   


tomyangdesign / 2009-02-09 09:03:38   

it's nice, but how to use that, just replace the .js file in the js folder, right?

benjii / 2009-02-09 13:53:29   

Yeh thats the easiest way of doing it... raplace it with the same name.

I want to put a proper accordion menu in but not time to figure out how im gonna do it:) yet anyway!

swingcheese / 2009-02-09 13:57:46   

hi benjii,
thanks for sharing. I installed it and it works good and fast but not for all menus. here is my code in the index.php

path = '/files/gimgs/';

    setTimeout('move_up()', 1);

can you tell me what is wrong, please?
best regards from berlin

YourHighness / 2009-06-15 02:15:38   

Thank you benjii for modifying Ross Cairns expendingMenus.js. I got a little closer to my desired menu bar, But there are still some features missing that I can't fix myself.

The way, I want it to work:

As soon as you rollover a section title, the sections drop down immediately (allready works on my website). And as soon as you roll out, it closes automatically. By clicking a section, the drop down menu disappears as well.

A perfect example is Liene Meneve's site. But I couldn't figure out why it works, also because there is no special JS file. Another good example for a drop down / expanding / collapsable or whatever menu is used by buro-gds but I couldn't apply it to my site.
The accordion script from Design Insane is also nearly working as I want mine to do, but it looks complicated.
I read the Tutorial: collapsable menu -Spanish where they introduce the thenine JS, used for example here, here and here, but the sections unfortunately remain open when you click on them.

Isn't there a way to modify Ross Cairns expandingMenu.js in a way, so that it fulfills my requirement as above mentioned? Just by looking at it I feel it could be possible because it looks so simple and well done. Can anybody help?

YourHighness / 2009-06-17 00:43:55   

Hi again.
Before I decided to use the indexhibit cms (to keep my portfolio updated in an easy way), I was building on a html webpage, that looked like this. I was actually satisfied with my navigation and the JavaScript I took from michaelsinterface but I have no clue how to implement it in my indexhibit.
I would be so happy, if someone came up with a solution.

YourHighness / 2009-07-09 21:33:03   

I want to delete my two posts up here. They are not relevant anymore, because no longer based on indexhibit.

Vaska A / 2009-07-09 22:31:51   

No, you posted them...live with it...we don't have time for this kind of thing.

chris24net / 2009-11-30 05:59:37   

I've tried to install this, but when I click on an item in the menu to go to a new page, the new page opens with the menus showing. I've played around with the active items being true and false in the plugin, but still no luck. Ideas? Thanks,

annamim / 2009-12-03 13:53:19   

hi there the centered theme is real nice, thank you so much, but how do i place an image as a logo that u can click on it and its the main page like for http://www.nicolasgillier.com/
i wanna do the same thing on my website: www.triceratop.fr
and put my logo instead of "design". So first how do i get rid of "design" and replace it with an image that is gonna be a link to the main page when i click on it ?

chris24net / 2009-12-03 15:05:47   

annamim, go here.


doncar / 2010-02-15 23:29:21   

I'm a newbie in all that, and I can't find how to keep a section openend once it has been clicked on? If I just delete :

/* hide items if not active */
if (items.is(".active") == false) {

...then the sections are all opened at beginning?

Can you help? Thanks

  1. Benoit 
  2. <a href="http://www.benoitcardon.com/index.php">Webpage</a>
onlypositive / 2010-03-01 21:04:38   

Tnx for script! But I have a problem. When I'm trying over the link in section, items (links) in section hide. So I have no time to activate links..

onlypositive / 2010-03-02 18:30:14   

nevermind, I forgot about that problem.

rowstyles / 2010-03-29 22:33:56   

I've got this working fine but the problem at this point is the menus don't collapse when your mouse leaves the menu:


I have to re-hover to get the menus to collapse, and it seems that java doesn't have an 'unhover' function with which to edit the code. I tried tinkering with onMouseOut, but no success thus far.

christiandelia / 2010-04-17 15:13:39   

Hello everyone,
What should I do to collapse the menu when the mouse is not over it?

joaosousa / 2010-04-27 17:22:17   

YourHighness: is it possible for you to show us how to make the menus retractible when onmouseout? that would be great!

jmc / 2010-10-15 08:54:29   

just thank you is appropriate... i love indexhibit so far..

benmr6 / 2011-11-04 10:13:35   

I'm having the same issue as onlypositive... when I mouse over the li or submenu items they collapse. Does anyone know a solution to this? Thanks in advance.

pepit4 / 2012-02-15 09:31:47   

Hello all, specially Valia. Thank you for Indexhibit.

After hours lookin through the forum I still have some problems customizing a menu made from this great expandingmenu.js

I want to do two things that I can't do them by editing the CSS:

1. Add a line, sort of "hr" just between some elements of the menu. (Before the two last items)

2. The last item is a "son"; I'm not showing the "father item". All the "son items" are "font-wight:100", but I want this one to be "font-wight:bold".

And I can't because I can't give an ID to the differents items in the menu...

Some ideas?

Thank you all again!!

This is the site

kenny / 2012-02-29 06:11:04   


I have the same question, i want my menus to collapse when onmouseout.

Please YourHighness or someone else that maybe have solved the problem?


lanfranconi / 2012-09-30 19:25:01   

I customized your horizontal menu and have a total wrapper width of 1100px.
I would like the menu to be extending all the length of the 1100px.
So far I managed to stretch it using a margin on the left of the texts, but now I have the problem that there is a gap remaining between "Architekturfotografie" and the left border. Somehow I cannot tell it to "overflow" there.
Any help would be much apreciated!

lanfranconi / 2012-09-30 19:26:55   

The link is here
Thank you.

lanfranconi / 2012-09-30 19:28:25   


This thread has been closed, thank you.