Advanced Menu - CSS? DHTML? Java? c#?

B

Boypdp

Limp Gawd
Joined
Oct 2, 2002
Messages
281
So here is my issue. I am looking to design a tab type menu for my website. There seem to be plenty of options out there to do this, but some just dont look or work right.

The real menu I want to make is found at www.componentart.com

I would like to try to simulate a menu just like this using either Java or C#. Is it even possible with C#?

Any links or info would help...Thanks
 
I don't know of any way to do it in C#, and I would strongly advise you not to implement it in Java. Forcing my browser to load the Java VM just for basic navigation is not a good way to get me coming back to your site. ;) On top of that, you generally can't select (copy) text in Java applets, they don't print properly, they steal focus (grrr!), and on and on. There are a bunch of tutorials at A List Apart that will help you get a simple, effective menu working with just HTML, CSS, and possibly some Javascript.
 
You can do this in Java. I have done it on my website. www.phipsiua.com (Don't use IE...for some reason the code is being retarded under it)

Anywho, it uses YPSlideDownMenu (which makes it slide nicely) and then its just normal DHTML. Works well.
Btw: It doesn't have to a color, or work with just text. Thats how I wanted it set up.
I made it Relative Positioning, and works off where the Table Cell is. So editing the script, you can make the slideout menu work under an image instead of Text.

PHP scripting can also do this, as shown here: php.mll.arizona.edu
However, I have yet to ask my workmates for the script for it.
 
abudhu said:
You can do this in Java. I have done it on my website. www.phipsiua.com (Don't use IE...for some reason the code is being retarded under it)

Anywho, it uses YPSlideDownMenu (which makes it slide nicely) and then its just normal DHTML. Works well.
Btw: It doesn't have to a color, or work with just text. Thats how I wanted it set up.
I made it Relative Positioning, and works off where the Table Cell is. So editing the script, you can make the slideout menu work under an image instead of Text.

PHP scripting can also do this, as shown here: php.mll.arizona.edu
However, I have yet to ask my workmates for the script for it.
Click to expand...
Your using JavaScript, not Java, they are different.
And that other site is using JavaScript also, PHP can't do client-side things like that.
 
javascript is what you need for that, especially if you want the animated "slide-out" effect. It would also be possible to do it using just CSS, but you would lose the animated effect and you "may" run into some browser quirkiness.

there a crap-load of free scripts for slide-out menus here. just copy, paste and season to taste. (Note: the demo menus slide out from the left side of the screen, it may not be easy to see at first..)
 
shaine said:
Your using JavaScript, not Java, they are different.
And that other site is using JavaScript also, PHP can't do client-side things like that.
Click to expand...

Yeah, sorry I didn't notice I wrote the wrong thing. But I knew it in my head. :-P
 
I'll second the no-Java-VM comment above.

My main point, though, is that neither JavaScript nor CSS (nor Java, for that matter) will have 100% support among visitors. Whatever method you use, make sure that everything works at the lowest common denominator. All the top-level items, for instance, should be links, and the pages linked should then contain links to every child item, and so on. Something like lynx should be capable of viewing and navigating, as that's a close analogue to screen reader technology. It's also a good analogue for site crawlers, helping you get useful indexing with Google and others.

With that in mind, I like CSS methods. They're a little less flexible than JS methods (no animation, no delay on mouse-out) but they leave all of the navigation in basic HTML rather than JS script blocks.
 
lomn75 said:
My main point, though, is that neither JavaScript nor CSS (nor Java, for that matter) will have 100% support among visitors. Whatever method you use, make sure that everything works at the lowest common denominator. All the top-level items, for instance, should be links, and the pages linked should then contain links to every child item, and so on. Something like lynx should be capable of viewing and navigating, as that's a close analogue to screen reader technology. It's also a good analogue for site crawlers, helping you get useful indexing with Google and others.
Click to expand...
I agree with this... NOTHING should EVER rely on javascript to work.
 
Thanks for the help and opinion guys :D

One thing I should have mentioned is that this is for a company's intranet site, and I am assured that each PC distributed has Java and Flash already on it. Also the webserver is running ASP .NET and can work with C# stuff.
 
Boypdp said:
...each PC distributed has Java and Flash already on it....
Click to expand...
While helpful to know, I'd still avoid them like the plague for navigation. As already noted, loading the JVM is slow. That adds a good 10-15 seconds to initial page load. Considering your intranet load time is under one second, well, you see the problem.

Also, neither Java nor Flash are flexible. Suppose the viewer wants the link in a new window or tab? Neither of these supports the choice. Stock HTML links let users use your site the way that best suits them. Reserve the multimedia stuff for the content that HTML just can't handle.
 
Boypdp said:
Thanks for the help and opinion guys :D

One thing I should have mentioned is that this is for a company's intranet site, and I am assured that each PC distributed has Java and Flash already on it. Also the webserver is running ASP .NET and can work with C# stuff.
Click to expand...
As the guy above me said, Java & Flash should NOT be used... even if it is a company's intranet site and all viewers have them.
ASP.NET and C# don't do client side things, they can't do the menus.
 
Looks like I am going to look into CSS, DHTML, XHTML and JavaScript then?

Again thanks for the help!
 
Boypdp said:
Looks like I am going to look into CSS, DHTML, XHTML and JavaScript then?

Again thanks for the help!
Click to expand...

Yes. Although it's important to note that DHTML really means (X)HTML plus JavaScript, so you're being a bit redundant. ;)

Can I third (or is it fourth or fifth?) the no-Java comment? There's nothing I hate more than Java for navigation, especially because it's rarely used properly.

Something I'm not sure that I saw anyone mention: Consider that people may want to print your site. This is a fairly important point. Our divisional Web site gets printed fairly frequently, and I wrote a custom CSS page that hides the navigation on printed pages. However, if you were to print pages and need the navigation displayed (perhaps as a mechanism to describe the site), you'll want to take into account that you'll need to show the "real deal"--that might complicate matters.

I redesigned a site recently that originally had fly-out menus (as I call them), albeit poorly designed--they rarely worked properly. The first thing I did was strip them out of the new design. Frankly, I'm not a big fan of multi-level navigation, as even my mouse control might not be precise enough to get it--I might move off just enough to lose the place in the scheme of things.

Of course, take our advice or leave it--when you design, the most important thing is to design for your audience. The rest is irrelevant.
 
PTNL said:
here's a good site that gives plenty of detail on a CSS menu system. this is a very light-weight method to doing a custom menu system. it renders correctly in firefox, and i also checked it with IE6:

http://www.gazingus.org/html/DOM-Scripted_Lists_Revisited.html

hth !!
Click to expand...
You are my own personal God today, 'PTNL' I've been looking for a good navigation script for months for our website, and the design + code behind this are just AWESOME! :D

Thank you SO MUCH! You're my hero, bro!! :cool:
 
arkmtech said:
You are my own personal God today, 'PTNL' I've been looking for a good navigation script for months for our website, and the design + code behind this are just AWESOME! :D

Thank you SO MUCH! You're my hero, bro!! :cool:
Click to expand...
glad to hear that the link really helped someone :)
 
You must log in or register to reply here.
Back
Top