Does Googlebot parse css?

[seoapprentice]

I have a pop-up menu navigation that is basically an html standard unordered-list (<ul><li>item</li><li>item 2</li></ul>), with a css class that sets the visibility to hidden, then on mouseover a javascript changes the class to un-hide it.

I thought this was the preferred method of using pop-ups in situations where there are to many links to effectively display at all times. However, after implementing this I didn't see a real difference in the indexing patterns, PR distribution or ranking for that matter. Other links I place in the global navigation outside of the pop-up usuall gain a boost in ranking and are almost always = Homepage PR -1 (Homepage PR is 6, top level global nav pages 5).

To investigate I used text based browsers and online HTTP viewers, which show the list properly. However, when I look at the google cache and hit text only it is still hidden, and doesn't show on mouseover because the javascript is excluded.

Anyone know how google (or Y! & MSN for that matter) views this? Could this be causing hidden links problems? Any other solutions for pop-up navigation out there?

[scrubs]

Hi seoapprentice,

Is the current javascript in place purely for visual benefit to the end user?

There are many search friendly navigations available out there if you cannot expand your primary nav simply as it stands. If you can't see the sub nav URL's in the source code then there is generally no way of G finding them.

If you are seeing other global pages with PR I would say this is to do with the links outside of your current java primary nav.

[seoapprentice]

Thanks for the reply scrubs,

Is the current javascript in place purely for visual benefit to the end user?

Yes and no. (Honestly, do we ever do anyting that is "purley for visual benefit to the end user" ).
We implemented the pop-up menu to make it easier for the end user to navigate from category to category at any level of the site without having to always go back to home to hit a new category. The pop-up menu has links to all of our site's categories (65 or so). If these were displayed in a static "always-on" navigation it would be overwhelming and cluttered, if not available at all the users would find it difficult to navigate all of our site.

This end user angle has been successful. But with all things web we are also trying to be SEO friendly. Knowing that adding these links would more properly identify the importance of these categories was also a key design consideration.

The list is static html, no inline styles, no "white-on-white" and is completely viewable by any text browser, and by the "view source". The javascript just changes the className to show/hide the list.

Do you know of any particular pop-up navigation models that work well?

[scrubs]

Hi seoapprentice,

Its is hard to find a balance for something visually appealing and SEO friendly at times. My view on this is that the primary nav is vital not only for navigating but user friendly to search engines, using hidden objects shouldn't even come into it. IMO

As for a good search friendly based navigation with a bit of jazz I have found some good List-based Semantic DHTML Menu's.

[Chris Boggs]

(Channeling engineer's spirit...)

So "SEOapprentice" is saying that on his homepage, he implemented a pop-up menu containing links to pages deep within the site. This popup menu was created using primarily CSS so that crawlers can find the links.

Here is my response to his concerns:

Google will find and follow the links, but they are not going to show up in the text only version of the cache because the crawler cant trigger an "onMouseOver" event which renders the text on the page. Its the same situation with HTML comments - crawlers can read the text, but they wont display it in the cache because the cache is still an HTML document.

The target pages in the pop-up menu dont receive the PR distribution SEOApprentice was hoping for because they are not global links - the links in the top nav receive the best PR distribution because they are global - distributed site wide.

[seoapprentice]

Thanks for the input Chris!

What confuses me on the Google Cache text-only is that if it doesn't render the CSS (which is an external .css file), then my menu (html list) should display as a simple html list since the CSS is what sets the disply to hidden and only when on mouseover is it switched to a class that is visible.

As far as PR distribution, I think I should elaborate a bit more on my navigation and current PR distribution. The main site is PR6. I have a top navigation, left navigation and footer navigation (static links - some deep, some not). All the links on these three sections are global for the entire site. Every one of the pages that is linked from any of these three menus have PR 5. Even the link that has the mouseover to un-hide the pop-up menu. However, the pages that are linked from within the pop-up menu are all PR 4.

This menu has been in place since Jan 06, so it has had some times to get noticed.

Any ideas? Am I just way off here?

[glengara]

FWIW, I remember a thread around last Christmas, possibly on WebProWorld, that claimed G was ignoring anything using the visibility: hidden tag and which affected a lot of internal linking structures.

Thread seemed to peter out inconclusively though...

[fulton savage]

If your links are hidden when the page loads and the only way a user can see them is by triggering some javascript action, use the noscript tag to include these links for browsers without javascript/se crawlers. That is the purpose of this tag

<noscript>links that non-js people/things can't see</noscript>

[fulton savage]

Just some more...

http://www.w3schools.com/tags/tag_noscript.asp

The noscript tag is exactly what you need to use in this situation, BUT search engines will never like noscript content as much as they would like a static visible link on the page.

[seoapprentice]

If your links are hidden when the page loads and the only way a user can see them is by triggering some javascript action...

The links are visible by default (see html example below). Only when the browser loads the css file do they become hidden. This menu was based on the Suckerfish Dropdowns menu.

<ul id="nav">
   <li id="n1">
      <a href="http://www.mydomain.com/contactus.htm">Contact Us</a>
   </li>
   <li id="n2">
      <a href="http://www.mydomain.com/categoryA/">Categories</a>
      <ul class="navBox">
         <li id="itm1">
            <a href="http://www.mydomain.com/categoryB/">CategoryB</a>
         </li>
         <li id="itm2">
            <a href="http://www.mydomain.com/categoryC/">CategoryC</a>
         </li>
         <li id="itm3">
            <a href="http://www.mydomain.com/categoryD/">CategoryD</a>
         </li>
      </ul>
   </li>
   <li id="n4">
      <a href="http://www.mydomain.com/sitemap.htm">Site Map</a>
   </li>
</ul>

[g1smd]

This type of menu can now be done purely with CSS, and with less HTML on the page too.

There is no need for any javascript to make this sort of thing these days.

[seoapprentice]

This type of menu can now be done purely with CSS, and with less HTML on the page too.

Do you have an example/resource?

[mcanerin]

This one is pretty good:

http://www.seoconsultants.com/css/menus/tutorial/

Ian

[seoapprentice]

Thanks!!!! Time to beef up my CSS....

[Jeff Martin]

I think the bottom line here is as long as when you view the source of the page you see "href=pagehere.html" the links can be seen and crawled.

[star3night]

more working examples of CSS based navigation

http://css.maxdesign.com.au/listamatic/