Drop Down Menus - CSS DHTML vs. JS

[sew2002]

I've heard that Java Scripts kill search engine crawlers, so I'm weary of using JS drop down menu scripts.

Does anyone know of (or actually use) a CSS-based drop down menu? Are CSS drop down menus search engine friendly?

Thanks in advance

[orion]

Originally Posted by sew2002

I've heard that Java Scripts kill search engine crawlers, so I'm weary of using JS drop down menu scripts.

Does anyone know of (or actually use) a CSS-based drop down menu? Are CSS drop down menus search engine friendly?

Thanks in advance

CSS-based menus of all kind are preferred over scripted menus. Hand-coding the menus populated with links right after the body tag and then repositioning the menu to be displayed where you want them not only improves link relevance but facilitates the crawler finding right away the links. Most definitely coded in this way, CSS-based menus help to raise relevance.

For details, you may want to check
Mike Hall's site http://www.brainjar.com/
Eric Meyer's site http://www.ericmeyeroncss.com/
Andy King's site http://www.websiteoptimization.com/


Orion

[Anthony Parsons]

Here's another stroke of genius!

http://www.alistapart.com/articles/horizdropdowns/

Honestly, how can you go wrong, when your menu is coded like this:

 
<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
	<ul> 
	  <li><a href="#">History</a></li> 
	  <li><a href="#">Team</a></li> 
	  <li><a href="#">Offices</a></li> 
	</ul> 
  </li> 
  <li><a href="#">Services</a> 
	<ul> 
	  <li><a href="#">Web Design</a></li> 
	  <li><a href="#">Internet Marketing</a></li> 
	  <li><a href="#">Hosting</a></li> 
	  <li><a href="#">Domain Names</a></li> 
	  <li><a href="#">Broadband</a></li> 
	</ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
	<ul> 
	  <li><a href="#">United Kingdom</a></li> 
	  <li><a href="#">France</a></li> 
	  <li><a href="#">USA</a></li> 
	  <li><a href="#">Australia</a></li> 
	</ul> 
  </li> 
</ul>

And looks like this: http://www.alistapart.com/d/horizdro...orizontal2.htm

There is just no comparison IMO. CSS blows JS away when it comes to search friendly. People continually say, "but Google reads JS", well big deal! What about the rest? They don't. Always go with CSS over JS anyday, if available.

[sew2002]

Thanks for the advice, that was exactly the type of information I was looking for.

So CSS is clearly better than JS. But how does CSS compare to regular menus? Better, worse, no difference?

Are there any special things I should watch out for while implementing the CSS as to avoid upseting the SE gods?

BTW Anthony, "33 & Retired" is my dream since I was 11.

[seomike]

Some drop downs like the ones generated by Fireworks just use java to build a css type drop down with divs and all. the only difference is java creates it dynamically and uses document.write to let the browser know but leaves no trace of it in the source code.

css drop downs use java to just change divs from visible to hidden. So basically your site is going to have

invisible div layers
transparent gifs (to trigger the visible / hidden functions)
link text inside divs with parameters that says hidden.

Even though that's old school spam techniques it only take one stupid spider to junk your site. Even though to you and I it's totally legit try telling that to a freaking algo...

[Anthony Parsons]

Yep, I've worked hard to get to retirement quickly. It all paid off. Now to let the financial advisor continue to do his job and keep me accustomed to the life I'm used to. Wife still works, though she likes what she does. Not sure if I would like to have her around all day anyway! World War?

Anyway, Mike has an excellent point there, and to another, even if JS fits your site better, ie. you just have lots and lots of links to get in your navigation, so a nice JS menu, completely SE unfriendly could be better. There is nothing wrong with that, suit your site and users first, SE's second. A simple static link outside of the JS menu from your homepage (and even better, every page) to a sitemap will suffice. You can then better your internal link structure by ensuring you write and link specifics about other content within your pages, and link all over the place within your site. Even better, that way your doing it from inside your text, and not standing out a link by itself or with others.

[sew2002]

Even though that's old school spam techniques it only take one stupid spider to junk your site. Even though to you and I it's totally legit try telling that to a freaking algo...

Whoa. So spiders will treat CSS's invisible div layers and hidden links as a "spam" technique, like that old school "technique" of making links the same color as your background? That is certainly news to me. Thanks for the heads up.

Anthony, our site is brand new and we are really counting on search engines to bring in traffic. So we might be willing to sacrifice a little functionality to achieve higher SE ranks.

So retired AND the wife is not around all day to bug you? Sweet.

[Chris_D]

Suckerfish, and sons of suckerfish, are essential reading in this area!

http://www.htmldog.com/articles/suckerfish/dropdowns/
http://www.alistapart.com/articles/dropdowns/

Enjoy

[eragon]

From what I've gathered here and at other forums, if you decide to use a JS menu, you should also make sure you have a site map. This will not only assist visitors, but spiders as well.

[sew2002]

Thanks Chris! Looks like I will have some homework during Thanksgiving break.

Eragon, that's a good point. I have a question though. Does search engines consider it spamming if you put your site map on the very top of the page (i.e. as the second object on the html code, right after the company logo)?

BTW, I had a chance to meet Christopher Paolini a while back but my darn friend got sick and we couldn't go to the book signing. I haven't had a chance to read Eragon yet but it is sitting on my table and I can't wait to read it over Christmas.

[eragon]

Originally Posted by sew2002

Eragon, that's a good point. I have a question though. Does search engines consider it spamming if you put your site map on the very top of the page (i.e. as the second object on the html code, right after the company logo)?

I don't think putting your site map at the top will negatively affect you. In fact, from what I've gathered from other threads, it would seem higher up in the page may actually help, but do what's good for your visitors first.

I love Paolini's book. Can't wait for the sequel. I highly recommend getting into that book over the holidays.

[orion]

The idea of hand-coding navigation menus right after the body tag and then repositioning the menu to be displayed where you want them and that I described above makes sense for several reasons.

RELEVANCE

First, this idea fits perfectly with the recent Weighted Link Rank Algorithm presented at the 2004 W3C Conference by Dr. Ricardo Baeza-Yates. Additional information is provided at the WLR Algorithm thread.

At one point in this conference paper, Dr. Baeza-Yates and Dr. Davis explain

“Finally, the term RP(j; i) gives more weight to links that
are at the beginning of the page rather that at the end of
the page (physically in the HTML code, not necessarily in
the browser view).”

Most definitely the WLR Algorithm has implications for navigation menus.

DOWNLOAD SPEED

In general, documents download faster when there are less interactions (requests) with the browser DOM and the JavaScript DOM. This is why division-based documents download faster than table-based documents, why optimized JavaScript downloads faster than unoptimized JavaScript, why local variables are interpreted before global variables, why do loops are faster than for-to loops, and why you want to pre-cache the so-called "dot" calls when writing scripts: its name is DOM.

Now, take this a step further. If you replace altogether JavaScript menus with CSS-based menus you are removing a huge chunk of DOM interactions.

ACCESSIBILITY

Accessibility is another reason for replacing JS menus with CSS-based menus. Gov and university sites in the U.S. are required to comply with the Accessibility ACT and Section 508. This means that the site should be accessible through different technologies and platforms, including disabling scripted languages. If users have JavaScript disabled, say “adios” to your fancy dynamic menu and forget about your accessibility status.

How about if users have disabled CSS or are using old browsers? Well, if coded properly, the menu should degrade graciously and users can still navigate your site with the hand-coded links, which should appear at the top of your site. Excellent CSS design methods are described in Andy King’s Speed Up Your Site: Website Optimization book (2003, New Riders).


Orion

[sew2002]

Times like this makes me wish I could spread more than one rep point per poster. Are you guys always this nice to newbies?

Thanks again Orion.