/    Sign up×
Community /Pin to ProfileBookmark

Auto-Expanding Tree Menu

Is it possible to acheive this type of menu effect using only CSS?
[url]http://showcaseline.com/[/url]

It doesn’t actually have to be that complicated. I just want a menu organized with Main Items and Sub-Items. If the viewer is on a Sub-Item page then the sub-item (and sister subitems) is displayed underneath the appropriate menu item. Is that doable? Any input is appreciated. Thanks

P.S. It might help to think of it as a sort of menu representation of a breadcrumb.

~Hal

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@The_Little_GuyApr 26.2006 — You could use css, and javascript, but you can't use just css
Copy linkTweet thisAlerts:
@lahmayesauthorApr 26.2006 — Ok, thats alright. Any idea where I start? I've already got a menu going. you know the basic ul li structure.
Copy linkTweet thisAlerts:
@lahmayesauthorApr 28.2006 — Thank you very much for the website. I need a little help with the menu though. Lets say my tree is like so:

[CODE]
Home
Services
- Electrical
- Mechanical
- Communications
Portfolio
- Healthcare
- K-12
- Higher Education
Information
Contact us[/CODE]


Now what I would like to accomplish is this. If a person is on, say, the Services, Electrical, Mechanical, or Communications page. Then I'd like the menu to look like this:

[CODE]
Home
Services
- Electrical
- Mechanical
- Communications
Portfolio
Information
Contact us[/CODE]


If the person is on the Portfolio, Healthcare, K-12 or Higher Education page, then the menu should look like this:

[CODE]
Home
Services
Portfolio
- Healthcare
- K-12
- Higher Education
Information
Contact us[/CODE]


if the person is on Home, Information, or Contact us, then the menu should look like this:

[CODE]
Home
Services
Portfolio
Information
Contact us[/CODE]


Do you have any idea where to start? I'd like to use as much CSS as possible, and keep the menu in a typical block display (like on my website). Again, any information that anyone has is greatly appreciated.
×

Success!

Help @lahmayes 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.7,
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,
)...