FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Javascript expandable menus ... + , -

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


salman_500
hey,

i want to make a navigation menu that has sub links ... e.g :

First Example:
Quote:

Templates [-]
|
| -- Free Tempaltes
| -- Paid Templates
| -- Custom Templates


Second Example:
Quote:

Templates [+]


the plus or minus should be a link.. it should appear as default like example 2... there will be multiple expandable links so it should be so that at a time only 1 link can be expanded.. and if another is expanded the previous one collapses..

please help me wth this or provide me with the code...

thnx in advance !
Mosquito.Tyler
Hi there, I think I have just what your looking for. I wrote a small tutorial on it a while back.

Click here to view it

If you want a Demo, click my sig and go to the Favorites page.

Hope It helps! Very Happy
mothmann
why use javascript when this can be done using nothing but css and html?

http://meyerweb.com/eric/css/edge/menus/demo.html

hmm maybe this isn't exactly what you want now that i think about it. this only works while you are hovered over the parent.

heres an example using that technique with inline lists i made for my website

www.bacon.frih.net/


hey Mosquito.Tyler, after lookin at your tutorial i find it very nice but I really dont like using javascript on vital site functions like menus. Is there a way to change class names using html and css only?
Mosquito.Tyler
I'm not saying that there isn't a way, I'm only saying I don't know of one. I don't think you can change attributes with CSS. I'm pretty sure Javascript is vital.
mariohs
Quote:
why use javascript when this can be done using nothing but css and html?

http://meyerweb.com/eric/css/edge/menus/demo.html

The example doesn't work on IE6 and below (I don't know about IE7, though)

Well, I think he's looking for a tree menu.
I'd say that there's no way of doing it without any javascript. Dropdown menus can be done with only html and css (with a small javascript fix for IE6 and below), due to the :hover pseudo-class.
You must manipulate the onclick function in your menus, so that's why using javascript.
How deep is your menu? I mean, how many levels are there?
mothmann
yes it works in IE7. but you could just provide an aternative menu page for ie6 users with an href=
qscomputing
Try this: not Javascript, but pre-generated and much more compatiable across browsers:

Demo at http://yabasic.de/
Info at http://yabasic.de/about_toc.htm
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.