The scenario: For a project I am working on I wanted an ajax powered navigation menu that worked exactly like a dropdown select box nav menu… i.e. first click opens the dropdown, next click selects the item (link) you want to go to, the dropdown closes, and the link you just selected is now displayed in the ‘select’ box. Doing this using a select box is pretty easy.
So why not just use the select box? Well… initially I did. But then it hit me. I didn’t know whether or not this method was SEO friendly. My gut said no because the select box value is not a link, and after some searching (‘select box navigation seo’) my initial conclusion seemed to be correct. It is not SEO friendly. So I decided to use a bit of CSS and jQuery / Javascript to mimic the functionality that I wanted but still preserve the links for the spiders.
In a nutshell I used absolute positioning, and hidden overflow for the wrapper container so that only the selected item was visible while the dropdown was closed.
The HTML:
Posted via email from adlatitude | Comment »
