How did they do this?

I want to know how this webpage did it's dropdown menu

[titangf]

I am a newbie to the web and was wondering how the wepage that I was looking at got pictures and text within their dropdown menu. I am just guessing here, but I think that it is some type of Java. If you what it is and how I could use this please post a message or sticky mail me. Thanks for any help you can provide.

The navigation that I am refering to is right below their text that says "Shore Computers"
Below is there web address.
<snip>

[edited by: papabaer at 11:02 pm (utc) on July 17, 2002]
[edit reason] terms of service [/edit]

[toadhall]

It's not Java.

Have a look at the menu's source code:

.../newdesign/iemenu.js

It's all javascript. At first glance at least.

[moonbiter]

They are just hiding and showing layers with a big 'ol, buggy 36k javascript.

Basically, each menu is a positioned div with embedded text and images. By default, it has its display property set to "none." On mouseover, the script sets the div to display: block and on mouseout it is set back to display: none. I've seen better implementations (just do a Google search for DHTML menus or DOM menus for examples).

[txbakers]

for future reference, you can figure out how most things are done by looking at the source code.

View > Source in the menus of IE. Something similar in all other browsers.

It's a great way to learn new techniques.

[moonbiter]

You can also save a page to include both the source and most of it's resources (images, css, js) for you to hack away at. Choose File > Save Page As and make sure that you are saving it as a "Web Page, Complete".

[toadhall]

I tried that on this site with Opera 6.03 and it crashed!

[moonbiter]

I tried that on this site with Opera 6.03 and it crashed!

Uh, submit a bug report and upgrade to 6.04? ;)

I must admit to be someone who is none to enchanted with Opera at this point. Maybe when they get their DOM act together and get their authentication model worked out so that I don't have to log on to the firewall every time I go to a different domain ...

[toadhall]

All right. I figured it was a defensive move, like the diving reflex, that kicked in when Opera saw the source code. ;)

Nah.

[moonbiter]

Heh.

I don't think it's quite that clever yet. :)

I really want to like Opera. Really. I even paid for it.

[papabaer]

Hello titangf, welcome to Webmaster World! As has already been stated, the menu is just a simple DHTML flyout with associated images. Easy to do... tough to access (for anyone with accessibilty browsers or javascript disabled).

MB: I Had no problem viewing the menu with Opera 6.04 (ID as Opera)

[toadhall]

papbaer,

It was using File > Save with images as... that crashed Opera 6.03, IDed as Opera.

[martinibuster]

If you need a tutorial with source files to play with, you can't do better than the book called "Dreamweaver Magic."

But if it weighs 36k, you may want to think again if you REALLY want to make your audience wait the extra couple seconds for the download, and THEN tax their cpu for a few extra cycles...

[toadhall]

... and with Opera 6.04 (just now installed) it works just fine, I am happy to report. :)

last off-topic post

[rewboss]

I think that it is some type of Java

It's not Java... It's all javascript.

I know a lot of newbies get confused between Java and JavaScript, so some clarification might be in order.

Java is a (compiled) programming language, a bit like C in many respects. It is older than the WWW, and was originally designed to allow toasters and refrigerators to communicate with each other (seriously). That idea never took off, but it was discovered to be a good language for the internet, because it was broadly cross-platform compatible: it runs on a virtual processor called the Java Virtual Machine, and so any machine that has JVM installed can, in theory, execute any Java code.

On the Web, small Java applications ("applets") can be downloaded and embedded in a web page in the same way that, say, Flash animations can be.

JavaScript, however, is only very distantly related to Java. It was originally called LiveScript, but Netscape changed this for marketing reasons. JavaScript can communicate with Java applets, and Netscape's Java/JavaScript interface is still called "LiveConnect". Like Java, JavaScript has a syntax based loosely on that of C, but that's where the similarity stops.

Many people do not consider JavaScript to be a programming language since it is not compiled but interpreted. It is a scripting tool, more like macros in MS Word, and can be used to manipulate the browser directly (Java applets have very little control over the browser).

On a more technical note: Java is a fully object-oriented programming language and very strongly typed; JavaScript is very loosely typed and implements very rudimentary object handling.

JavaScript is not an "easy version" of Java. In fact, being so loosely typed can create extra problems: for example, it's easy to lose track of whether a variable contains a string or a number.

[joshie76]

For more along the lines of Rewboss's post check out Tedster's 'JavaScript - JScript - ECMAScript: A Version History and Timeline' [webmasterworld.com]

[vitaplease]

Hi javascripters,

I use a javascript hierarhical menu.

Is there any way to see in your Webtrends standard logfiles overview how many people have javascript disabled?

Or are there general statistics on how many people surf with it disabled?

I only have a percentage of hits that failed presentation. Nothing specific to javascript en/disabled.

thanks.