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?