5 Great Examples of SEO Friendly JavaScript & CSS Menus

on

Florida SEO Says, “Dear JavaScript … Will You Ever Forgive Me? “

In my last post … I attempted to explain how pure JavaScript menus were not good for SEO. However, after reading how the message came across to some of my readers, I feel it’s probably best if I add some clarification. Thanks to Dan Switzer at PengoWorks for pointing out that my post needed some explanation. What I mentioned regarded the usage of pure JavaScript menus -Not All- JavaScript menus. If my post confused anyone, I apologize. There are lot’s of SEO friendly menus that incorporate both JavaScript and yet maintain good web design practices … So, now let’s take a look at a few that stuck out with me.

In my humble opinion, menus that use JavaScript to manipulate the DOM (Document Object Model) and CSS (Cascading Style Sheets) to handle styling, maintain a good balance between usability and provide a dynamically appealing experience.

Okay … So Show Me Some Cool Stuff Now

Before I show the following examples I want to point out the main factor that make these menus search engine friendly is the accessibility of the links to the robots. These menus do not rely on JavaScript to display the content either.

The first example here is from one of the most respected names in design … A List Apart. Here Dave Shea provides an excellent detail on creating a menu implementing CSS Sprites with JQuery.

1. CSS Sprites2 – It’s JavaScript Time

A List Apart
by: Dave Shea

CSS Sprites - A List Apart

Next, one of my favorite designers, Collis Ta’eed provides in exhaustive detail, everything required to create a very attractive and effective tabbed content area using CSS & JQuery …

2. Slick Tabbed Content Area using CSS & JQuery

NetTuts
by: Collis Ta’eed

Slick Tabbed Content Area using CSS & JQuery

Soh Tanaka offers a very clean and attractive JQuery & CSS menu. Aside from issues with IE6’s non-support of the :hover psuedo-class for elements other than anchor tags, this is a very good menu and degrades gracefully with JavaScript disabled.

3. Sexy Drop Down Menu w JQuery & CSS

Noupe
by: Soh Tanaka

Sexy Drop Down Menu w JQuery & CSS

Clark gives a solid example of how to create an animated drop down menu that also degrades well with JavaScript disabled – The key here is that the animation on the list elements is acceptable regardless of whether the visitor has JavaScript enabled.

4. Animated Drop Down Menu with jQuery

ClarkLab

Animated Drop Down Menu with jQuery

Okay … I’m not a great designer by any sense. But, when I created this site I decided I wanted a little DHTML action and of course promote good SEO techniques at the same time … So, I used Adobe’s Spry  Accordion Widget to build my right navigation … It too degrades gracefully with JavaScript disabled – The menus tabs will simply open up if JavaScript is not activated.

5. SEO Compliant Spry Accordion Menu

SEO Compliant Spry Accordion Menu
by: Adobe Lab

SEO Compliant Spry Accordion Menu

There are many excellent examples out there … I really just wanted to take a few minutes to clarify the difference between a pure JavaScript menu and a menu that uses JavaScript and CSS.

That’s it.

The following two tabs change content below.
Edward J. Beckett is a passionate software engineer, web developer, server administrator and polyglot programmer with nearly a decade experience building desktop and web applications ranging from simple personal web sites to enterprise level applications on many technology stacks including Java, Java EE, Spring, Spring MVC, Spring Data, Hibernate, SQL, JPA, JMS, HTML, CSS, JavaScript, ColdFusion, PHP, Node.js and more...
  • http://www.greenreplica.com air max 90

    good article.I enjoy seeing websites that understand the value of providing a prime resource for free. I truly loved reading your post. Thanks!

  • http://www.dotnoc.com Dotnoc Managed Hosting

    Good article, my question/comment is Javascript menus that utilize UL and LI tags to generate the menu, to my knowledge that is SEO friendly as the entire menu is viewable from a text browser without expanding or clicking on anything.