Learn How to Create Caltech Homepage Style Navigation

  • Thread starter Thread starter honestrosewater
  • Start date Start date
  • Tags Tags
    caltech
Click For Summary

Discussion Overview

The discussion revolves around creating a navigation system similar to that found on the Caltech homepage, specifically focusing on how to implement a submenu that opens without reloading the page. Participants explore various methods and technologies that could be used to achieve this effect, including DHTML, JavaScript, and iframes.

Discussion Character

  • Exploratory
  • Technical explanation
  • Debate/contested

Main Points Raised

  • One participant expresses a desire to replicate the Caltech navigation style and seeks guidance on how to implement it, mentioning DHTML, JavaScript, and iframes as potential methods.
  • Another participant suggests viewing the page source and checking for any JavaScript file references that could provide insight.
  • A different participant outlines two approaches: using frames, which they note can be messy, and using JavaScript and the Document Object Model (DOM), which they describe as more complex but manageable.
  • This participant explains how JavaScript can manipulate the DOM to modify webpage content dynamically without needing to reload the entire page.
  • One participant acknowledges the use of JavaScript in the Caltech navigation and questions why it is not more widely adopted by others.

Areas of Agreement / Disagreement

Participants present multiple approaches to the problem, indicating that there is no consensus on a single best method. The discussion remains open-ended with various opinions on the effectiveness and complexity of the proposed solutions.

Contextual Notes

Some participants reference technical concepts like the DOM and tree structure of HTML parsing, which may require further clarification for those unfamiliar with web development. The discussion does not resolve the best approach to take.

Who May Find This Useful

This discussion may be useful for individuals interested in web design and development, particularly those looking to implement dynamic navigation systems on their websites.

honestrosewater
Gold Member
Messages
2,133
Reaction score
6
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? :redface:
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 :biggrin: Many thanks.
Happy thoughts
Rachel
 
Computer science news on Phys.org
Have you tried to
Right click -> view source

if you see any .js file reference download that too!
 
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
 
Last edited by a moderator:
Yes, I can tell they use JS. Thanks again.
I can't help but wonder why more people aren't using this??
 

Similar threads

Admissions Do I have a good shot at CalTech/MIT's graduate program for physics?
  • · Replies 8 ·
Replies
8
Views
8K
Classical FLP Original Course Handouts at The Feynman Lectures Website
  • · Replies 2 ·
Replies
2
Views
3K
Learning about Python application deployment - possible recommendations
  • · Replies 7 ·
Replies
7
Views
3K
Caltech transfer exam and chances of getting in....
  • · Replies 11 ·
Replies
11
Views
5K
How much memorization is needed to learn embedded systems?
  • · Replies 16 ·
Replies
16
Views
4K
Comp Sci How to Integrate XML and JavaScript in Web Development?
  • · Replies 22 ·
Replies
22
Views
2K
Really not able to grasp React due to it being so complicated
  • · Replies 7 ·
Replies
7
Views
2K
Mathematica Mathematica - How to Graph Direction Fields of ODEs?
  • · Replies 9 ·
Replies
9
Views
3K
How much does it matter where you went to undergrad?
  • · Replies 5 ·
Replies
5
Views
7K
JavaScript How to rewrite callback hell using promises as well as async/await?
  • · Replies 5 ·
Replies
5
Views
2K