Learn How to Create Caltech Homepage Style Navigation

[honestrosewater]

I'm designing my first website and I found something I want to do, but don't know how to do it.
On www.caltech.edu, clicking a section of the navigation bar (ex. About Caltech) opens a sub menu (of links) without reloading the page. This is what I want to do. I've been searching for hours with no luck. From what I've gathered, this can maybe be done with
DHTML- floating layers and turning visibility on/off or
Javascript and imbedded images or
iframe.
But I have no idea what any of those involves. Er, did I mention I'm still learning?
I just want to know how they did it- or how it can be done. If someone can point me in the right direction, I can learn the rest. I found the guy who created the page, but I really don't want to bother him- so I'm bothering you guys & gals instead Many thanks.
Happy thoughts
Rachel

 

[Goalie_Ca]

Have you tried to
Right click -> view source

if you see any .js file reference download that too!

 

[dduardo]

There are a couple of ways to go about this:

1. Use Frames - This is the easy way, but can get messy to manage.
2. Javascript and DOM (Document Object Model) - This is more difficult but easier to manage.

If you use windows you might have encountered the registry. Basically when your browser downloads an html file it parses the keywords and puts in a registry(tree) type format. You can go to START->RUN and type regedit to see the registry.

Each node can have a parent, children or siblings. Once you get down to the lowest level of the tree structure you'll find that the nodes have keys with values. When the browser draws a webpage it is constantly reading from the tree and updating based on what is there.

One of the things you can do with javascript is replace, delete or add nodes in the tree. By doing this you can modify portions of the website on the fly without downloading a new html file and then refreshing the whole page.

Resources:

http://www.w3schools.com/js/default.asp
http://www.w3schools.com/htmldom/default.asp
http://www.mozilla.org/docs/dom/domref/dom_shortIX.html

 

[honestrosewater]

Yes, I can tell they use JS. Thanks again.
I can't help but wonder why more people aren't using this??