2

I have a site with a typical desktop dropdown menu. For the mobile menu (and on touch devices), I am using javascript to slide it out onto the page from the right side by touching a menu button.

The issue is that I am using javascript to duplicate the desktop menu and populate it into the hidden side div. Is this a bad idea? I don't see much of a performance drop (only like 50ms or so when I disable JS), but could this cause issues on slower computers?

Or would it be better to duplicate the menu into the side div through PHP so it's directly in the source code? Doing this will probably be faster, but will it have an impact on my SEO by displaying the navigation twice to search engines?

Looking at http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157, it seems like it's already being crawled twice, so I should think about my visitors overall experience and duplicate it without the use of javascript.

What is the best practice when dealing with the same menu multiple times on the page?

Improve this question
2
  • would it be acceptable to your website to have the menu at the bottom with a hyperlink going to it accessible from the top?
    – Mike -- No longer here
    Sep 17, 2015 at 7:25
  • i'm absolutely with modiX: create one menu for all and change its look dependently from browser width (or user agent). I saw solutions where there are two menus, and one of them is always on display:none; - redundancy is never a good way
    – Evgeniy
    Sep 17, 2015 at 8:39

1 Answer 1

Reset to default
3

The very perfect way would be to let your one menu compatible for both cases by using different CSS for different resolutions using the @media queries. The big advantage is that you don't care what device is visiting your website, you simply change the layout on the fly depending how much width the browser has.

Having duplicated content in your website is not good and as you see, Google can even parse your JavaScript and get it. (I was just surprised, thanks for showing me that.) If you decide to use PHP to display one of your two menus, it will not be very responsive, i.e. you cannot switch the menu when the width changes as you could with the @media queries.

For instance, I visit your website with my tablet in portrait mode and you show the collapsed menu. Once I go to landscape I would like to see the desktop version, as my resolution might fit for that and it would be more comfortable. But it won't when having two menus.

Improve this answer
5
  • Thanks. I used to only use @media for my navigation, but many of my sites use dropdown menus, which wasn't a problem previously. Once the width was smaller, the menu would compress and I'd use javascript to allow one to click on dropdown buttons to view the rest of the navigation. In the DOM, there was still only one menu though. Now with larger touch devices, I need to add a 2nd menu button to only display on touch devices next to the menu, using JS so they can also use the flyout menu and dropdown buttons. And I have too many non-JS users (not touch) where I can't have a JS only solution.
    – Seth Alling
    Sep 17, 2015 at 13:26
  • Hm, I don't get why a collapsed touch menu is required for a touch device that has a larger resolution. However, if you really want to split it up and still support the below 1% non JS user base, try this: Let your default CSS construct the one menu as uncollapsed menu always and add two CSS files with JS to get the collapsed menu only for JS users. The first CSS file should be load always and is for lower resolutions, the second will override some CSS to always show the collapsed menu (should only be added when using a touch device). This way, you can stick to one menu only (very important).
    – Martin Braun
    Sep 18, 2015 at 9:15
  • The touch menu is so people with touch devices can access dropdowns easier. We have the top level dropdowns linking to pages as well. As for the JS, I was going off information provided to me, and I just now looked at the raw data. Someone gave me the Java Support data from Analytics, but told me it was JS support, so fortunately I don't have to worry about that anymore. Thanks for helping! Final question: why is it so important to have only 1 menu? Reading up on Duplicate Content, that appears to only apply across multiple pages.
    – Seth Alling
    Sep 18, 2015 at 14:19
  • @SethAlling You're welcome. About your final question, you might want to add a new question on this page. There are a few reasons why duplicated content is bad practice. Firstly, it's like repeating the same code in a program (if you don't need, why would you, why should you?). A much better reason is because screen readers will read the duplicated content again, making it worse for visually restricted people to finally reach the main page content of your website.
    – Martin Braun
    Sep 18, 2015 at 14:46
  • Forgot about the screen readers. That makes perfect sense. Thanks!
    – Seth Alling
    Sep 18, 2015 at 15:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.