CSS vs Javascript vs JQuery drop down navigation
-
For a user / seo perspective, what is the best way to code a drop down menu nav bar? Is it best to use css, javascript or a scripting library like jquery?
I am thinking about overall best practice that will not have a negative impact on serps.
I am also thinking about what will work best on all types of devices i.e. desk tops, lap tops, smart phones and tablets.
What are the Pro's & Cons of Using CSS for Drop Down Menus.
What are the Pro's & cons of using Javascript for drop down menus.
And the same question for jquery.
Thank you all in advance for your ideas.
-
You can't go wrong with CSS. Endless styling possibilities. Also, I'd stay away from javascript because it's executed in order on the page. Meaning, if the JS doesn't load properly in the menu, the remaining JS below it wont load either.
-
Thumbs up to you too Joel and good luck with your project.
-
Seems like the seo jury has spoken and CSS it is. Thank you all for your help on this matter. Thumbs up to you all.
-
Hands down that CSS is the preferred way make dropdown menus. Google and on a lesser note, other search engines, have improved drastically with their ability to parse JavaScript / jQuery, and you may be able to get away with it, but it really should be avoided if possible. With the "new" CSS3 styles, you get almost any style you'd like with that.
-
Hi Joel,
I echo Marek's comments. However, I'm a great fan of making 100% sure that the bots can access everything that I want them to so if I'm ever in doubt I go with css and html combination as much as possible. We use Ajax and jQuery totally etc only on pages which we believe are 100% to be used primarily for user experience and engagement. E.g. When they're doing searches for specific things and the page needs to be ultra fast and efficient. However, we also try to ensure that we have crawlable pages which output the full content of a search wherever possible so that we can get the SEO benefit too. It also helps for when people have javascript disabled (not many granted).
I've seen so many ecommerce sites with great content but it's often got some kind of blockage that means a button has to be pressed or a form submitted to see it and if I'm not mistaken bots can't access this easily.
Hope this helps.
-
Hi Joel,
In my opinion CSS is "The Best". Simple, easy usage, easy changes, very good speed of page load ... etc...
As I red on many forums on the internet JQuery and JS are are available for robots, so there are no contraindications to employ them.
But
CSS - better code/text ratio (no long scripts in page code)
CSS - simple usage and changes (CSS3, HTML5)
CSS - faster loading (only simple text and html)
In my opinion, now when we have HTML5 and CSS3 there is no better way - it's innovative and simple solution,
Marek
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
What is your opinion in the use of jquery for a continuous scroll type of page layout?
So, I'm in 2 minds about this; let me start with a bit of background info. Context
Web Design | | ChrisAshton
We have a new client who is in the final days of their new site design and were when they first contacted us. Their design essentially uses 5 pages, each with several pages worth of content on each, separated with the use of jquery. What this means is a user can click a menu item from a drop-down in the nav and be taken directly to that section of content like using internal anchor links as if it were a separate page, or they can click the top-level nav item and scroll through each "sub-page" without having to click other links. Vaguely similar to Google's "How Search Works" page if each sector of that page had it's own URL, only without the heavy design elements and slow load time. In this process, scrolling down to each new "sub-page" changes the URL in the address bar and is treated as a new page as far as referencing the page, adding page titles, meta descriptions, backlinks etc. From my research this also means search engines don't see the entire page, they see each sub-page as their own separate item like a normal site. My Reservations I'm worried about this for several reasons, the largest of them being that you're essentially presenting the user with something different to the search engines. The other big one being that I just don't know if search engines really can render this type of formatting correctly or if there's anything I need to look out for here. Since they're so close to launching their new site, I don't have time to set up a test environment and I'm not going to gamble with a new corporate website but they're also going to be very resistant to the advice of "start the design over, it's too dangerous". The Positives
For this client in particular, the design actually works very well. Each of these long pages is essentially about a different service they offer and the continuous scrolling through the "sub-pages" acts as almost a workflow through the process, covering each step in order. It also looks fantastic, loads quickly and has a very simple nav so the overall user experience is great. Since the majority of my focus in SEO is on UX, this is my confusion. Part of me thinks that obscuring the other content on these pages and only showing each individual "sub-page" to search engines is an obvious no-no, the other part of me feels that this kind of user experience and the reasonable prevalence of AJAX/Paralax etc means search engines should be more capable of understanding what's going on here. Can anyone possibly shed some light on this with either some further reading or first-hand experience?0 -
New Re-design will my website rankings drop?
Hi guys, I have had to re-design my site although we are only 4 months into the seo game we have seen some good progress with our rankings. My question is there anything I need to consider before implementing the new designs so it doesn't effect my current rankings or any of our SEO work. Our current designs are content thing and so we have had to create more content to better optimize our site, however if doing so will this loose our current ranking position? Apperciate any advice around this Thanks
Web Design | | edward-may0 -
What you consider the best Jquery Sliders?
Hello there, i would like to ask you if there's some preference on certain jquery slider that not only don't interfere with SEO efforts but contribute so a good recommendation or preference from you the SEO community will be gladly received. It wont matter if its free or it has cost. Thank you in Advance
Web Design | | Amarok3d
Amarok0 -
For a real estate website, is a different mobile site warranted vs a responsive site?
I researched the major real estate websites: Zillow, Trulia, Remax, Keller Williams, Century 21, etc. They all have a separate mobile site and not a responsive one. The client wants it to be easy to search for properties from a smartphone. Is it possible to get a responsive version of a real estate website on a smartphone?
Web Design | | MassMedia0 -
What's the best way to structure original vs aggregated content
We're working on a news site that has a mix of news wires such as Reuters and original opinion articles. Currently the site is setup with /world /sports etc categories with the news wire content. Now we want to add the original opinion content. Would it be better to start a new top /Opinion category and then have sub-categories for each Opinion/world, Opinion/sports subject? Or would it be better to simply add an opinion sub-category under the existing news categories, ie /world/opinion? I know Google requests that original content be in a separate directory to be considered for inclusion in Google news. Which would be better for that? Regarding link building, if the opinion sub-categories were under the top news categories, would the link juice be passed more directly than if we had a separate Opinion top category?
Web Design | | ScottDavis0 -
Live Text in Navigation Vs. Image - Does this affect SEO
I recently was asked the question if having live text in the navigation vs and image affect seo. For example, refer to this link http://markup.io/v/avsaenq856kw the navigation highlighted is seperate images. The html elements read : ![](</span><strong style=)/images/procedures.png"> Live text html reads like this: Breast » What is better for seo value, or does it now matter having live text or an image?
Web Design | | Red_Spot_Interactive0 -
Considering site navigation options
I am working on a site redesign and re evaluating concepts I haven't thought about for a few years. I generally see site navigation that is either "top-down" or "left bar". Top down navigation normally uses the left nav. for search refinements. The benefit of top nav. is that it clears up the center of the page for non navigation content. The drawback is that you can't fit as many categories in a top nav. Left side nav. can hold a long list of categories, but subcategories are often in the center of the page. In the past, I have preferred to use left nav. with a multi level scroll over search refinement. I believe this allowed users to get to their destination page with fewer clicks. (I have always believed that every required additional click causes lost customers). I also believe that this has caused me to get more juice flowing to deeper pages on sites and better long-tail conversion. This means I have had pages with a LOT of links. With this method, I have tightly controlled my categories. What on other sites are often dynamic search refinements, are on my sites additional categories. I am considering making a site with a top down navigation system. I like the additional screen space in the center I get to work with. Is my assumption about pages created by search refinement wrong? Is it ok for SEO to have a left nav that has a bunch of search refinements that are dynamically created?
Web Design | | EugeneF0 -
Could Website redesign be a cause of drop in rankings?
We had a complete redesign of our website and moved it over to wordpress several months ago. As url's changed, we had appropriate 301 redirects done. Rankings for our top keywords dropped, but others remained intact. Our SEO company told us rankings drop when a redesign is done, but I thought if we did all redirects properly (which they approved), it wouldn't be much of a problem. Additionally, we've been steadily adding good new content. Any advice?
Web Design | | rdreich490