Css Rollovers

[surefire]

Before I get flamed for bashing javascript... I'd like to point out that this little post is more about using javascript intelligently than eliminating it completely.

 

Javascript works great for certain purposes. IMHO it's best use is to make sites easier for the visitor to use and navigate. Javascript can be used to check form data before it's submitted or dynamically change forms on the fly. And we all know that javascript can make elegant drop down menus for navigation.

 

But I think that once a webdesigner or do it yourselfer starts learning javascript or borrowing free javascript code, there's a strong temptation to go 'nuts' with javascript everywhere on the site.

 

"So what's the harm?" you ask?...

 

Here are some reasons why you might want to limit your use of java script:

• Javascript can be interpreted differently by different browsers and older versions... ruining the effect
  
• Javascript can be blocked by some browsers
  
• Some javascript effects turn off visitors and are considered annoying
  
• Many of the cool rollover techniques can be imitaded and replicated by CSS
  

Let's look at that last one. Javascript can create neat rollover buttons. Some effects can only be done with javascript... no doubt.

 

But have you seen all of the cool javascript-like effects that you can recreate with CSS? You'd be amazed at what you can do to make your site look like it's using javascript rollovers... without all the fuss.

 

Here is a short list of advantages CSS holds over java script:

• Javascript rollovers require loading of two images for every button one the page... CSS requires none (or one) and is MUCH faster for page loading
  
• Search engines can't read your javascript links as well as it can read text links jazzed up with CSS
  

Not a long list... but the benefits are VERY attractive.

 

So enough theory... let's look at an example:

 

CMG Code Resource

 

This navigation scheme looks great. It's all done with Cascading Style Sheets... not javascript. And this is for a site that is a resource for javascript!

 

And here's a page with a short tutorial on how to make neat image links with CSS replicating some javascript effects:

 

Design Meme

 

In closing, javascript is a great tool... but it's frequently overused. See if there are some areas on your site that you can make java-free. Your pages will load faster and your search engine rankings might benefit.

Edited September 22, 2003 by surefire

[SEO]

Thumbs Up Jack

 

Okay Jack since you brought it up (here and elsewhere )... do you have the 'perfect' drop-down menu script?

[surefire]

I'd strongly recommend the CMG page I linked to in the opening post. There are some cool drop downs in there.

 

I really try to avoid using javascript but if the menu was truly huge, then a drop down would be perfect.

 

Personally, I think that the 'perfect' drop down menu would be a marriage between PHP and javascript where the javascript array (and some of the code) would be determined by php. That way, modifying the navigation would be as simple as adding to a comma delimited list.

 

As is, I kinda like the HV Menu found at CMG. Wish it had the ability to set a slight delay for the drop down.

 

In the future, I might modify HV Menu to be used with a PHP backend.

[curtis]

I don't mean to toot my own horn but there is a pretty good tutorial on CSS Button Rollovers on CMG as well.

 

curtis

[surefire]

Very cool indeed! Thumbs Up

[borfast]

There's a cool example on Eric Meyer's website about pure CSS menus (yes, pure as in 'not a single drop of JavaScript" ):

www.meyerweb.com/eric/css/edge/menus/demo.html

 

You don't use Mozilla/Navigator/Firebird/Camino or other Gecko based browser? Well, tough luck, because Gecko is the only rendering engine that currently supports the CSS stuff needed to build these most cool menus!

 

And for you IE users, keep this in mind: Microsoft is only going to update their browser with new CSS support (among other important things) in 2005 when their new Windows is ready... care to rethink your position about the browser you use? No? Well, OK, no problem...