CODEWITHSUNDEEP
jquery
Filip Novotný
Filip Novotný

Reputation: 63

jQuery slider menu

I'm currently designing a website that is supposed to be divided into three main sections. To do that, I'd like to use a big menu like the one on the image below. When the user hovers over one of the three boxes, it should expand to reveal some more information about the section and so on.

I think I've already seen something like this on some website but I can't remember where. Do you think there is any jQuery plugin I could use for this?

enter image description here

Upvotes: 1

Views: 238

Answers (3)

Bodman
Bodman

Reputation: 8056

There is a jquery plugin called kwicks

enter image description here

Example

Source

Upvotes: 1

Abe Miessler
Abe Miessler

Reputation: 85126

I did something similar to this recently. While I was not able to find a plugin that did exactly what I wanted, it was fairly easy to roll my own using the animate function. Basically on your mouse over event you will want something like this:

var expandedWidth = 300;
var collapsedWidth = 100;
var duration = 400;

$(this).animate({ width: expandedWidth }, duration );

and on mouse out something like this:

$(this).animate({ width: collapsedWidth }, duration );

Upvotes: 0

Jeremy B.
Jeremy B.

Reputation: 9216

The jquery accordion will do exactly what you are looking to do. Link here: Jquery Accordion

Upvotes: 0

Related Questions