/    Sign up×
Community /Pin to ProfileBookmark

Vertical menu with slide

Copy linkTweet thisAlerts:
Oct 22.2006

Hi,

Could anyone please help me to do this, i will show 3 different states of the menu:

[QUOTE]

To illustrate it:
This is state one:

|——–|
| Link 1 |
|——–|
| Link 2 |
|——–|
| Link 3 |
|——–|
| Link 4 |
|——–|

and this is when i push “Link 2”

|——–|
| Link 1 |
|——–|———|———|
| Link 2 | Link 2a | Link 2b |
|——–|———|———|
| Link 3 |
|——–|
| Link 4 |
|——–|

and this is when i push “link 3”

|——–|
| Link 1 |
|——–|
| Link 2 |
|——–|———|———|
| Link 3 | Link 3a | Link 3b |
|——–|———|———|
| Link 4 |
|——–|

[/QUOTE]

I have been trying to do this by myself but with no sucess so I need some help please.

Thanks in advance..

/Mikael

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@KravvitzOct 23.2006 — Start out with a multi-level list. Via [url=http://dean.edwards.name/weblog/2006/06/again/]DOMContentLoaded[/url], hide the sub-lists. When a top-level menu item is hovered over start an animation that slowly expands the sub-list out to the right. There's multiple ways to write the CSS to do that. One way its to set overflow to hidden and set the width as needed. Use setInterval() to call the function repeatedly to widen the sub-list. Use clearInterval() to stop the animation. Do a reverse animation when ever you want to hide the menu again.

These three articles explain how to style lists.

http://www.alistapart.com/articles/taminglists/

http://css.maxdesign.com.au/listutorial/

http://www.webreference.com/programming/css_lists/
Copy linkTweet thisAlerts:
@aMickeauthorOct 24.2006 — Start out with a multi-level list. Via [url=http://dean.edwards.name/weblog/2006/06/again/]DOMContentLoaded[/url], hide the sub-lists.[/QUOTE]
I don't really get how I should use DOMContentLoaded for hiding my list.

Could you please help me out some more....

?
Copy linkTweet thisAlerts:
@KravvitzOct 25.2006 — It's complicated. You make a function that finds and hides the sub-menus and adds the event handlers then use that script to call it when it can first run. [url=http://dean.edwards.name/my/busted3.html]Take a look at the demo page.[/url]
×

Success!

Help @aMicke spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...