SEO-friendly Responsive Design, swap navigation UL for Select?

Question

I am designing the menu for a web site, and I was hoping to find an SEO-Friendly way to implement the Responsive Design used here:

Ask4Sam.net- Responsive Design Example

As you can see, for large resolutions the navigation menu is an unordered list of buttons, however to save space at smaller resolutions it becomes a drop-down menu.

I think this is a great effect, but the only ways I can think of to implement it are- A) Use CSS Media Queries and set Display:none to hide one menu and show the other, B) Use Javascript to hide the unused menu or C) Use jQuery to remove one menu from the DOM and dynamically insert the other on resize.

However, I'm worried about duplicate menus and hidden content giving the site an SEO penalty. Is one of these techniques SEO-Friendly? Is there another technique that is better than these?

Answer 1

Small amounts of duplicated content in your page or between your pages are unlikely to cause Google to penalize your site. See What is duplicate content and how can I avoid being penalized for it on my site?

Content that is hidden by default but shown with user interaction will not cause penalties from Google either. See Google on toggled content.

What you may need to be worried about is how Google is able to crawl your content. When you have a single page with scrolling navigation, Google may not be able to deep link into your site as well as you might like. On the site that you give as an example, the correct section of the site will never come up when you search for "personal injury". Google at best can show the top of the page. This means that you are giving up any chance of ranking well for queries that are best answered in lower section of the page.