Moz Q&A is closed.
After more than 13 years, and tens of thousands of questions, Moz Q&A closed on 12th December 2024. Whilst we’re not completely removing the content - many posts will still be possible to view - we have locked both new posts and new replies. More details here.
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
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
-
How to fix non-crawlable pages affected by CSS modals?
I stumbled across something new when doing a site audit in SEMRUSH today ---> Modals. The case: Several pages could not be crawled because of (modal:) in the URL. What I know: "A modal is a dialog box/popup window that is displayed on top of the current page" based on CSS and JS. What I don't know: How to prevent crawlers from finding them.
Web Design | | Dan-Louis0 -
CSS Truncate
With Google's new stance on hidden text does the CSS Truncate count as hidden? display: block;
Web Design | | L8ydrgn
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;0 -
Fixing Render Blocking Javascript and CSS in the Above-the-fold content
We don't have a responsive design site yet, and our mobile site is built through Dudamobile. I know it's not the best, but I'm trying to do whatever we can until we get around to redesigning it. Is there anything I can do about the following Page Speed Insight errors or are they just a function of using Dudamobile? Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 3 blocking script resources and 5 blocking CSS resources. This causes a delay in rendering your page.None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.Remove render-blocking JavaScript: http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js http://mobile.dudamobile.com/…ckage.min.js?version=2015-04-02T13:36:04 http://mobile.dudamobile.com/…pts/blogs.js?version=2015-04-02T13:36:04 Optimize CSS Delivery of the following: http://fonts.googleapis.com/…:400|Great+Vibes|Signika:400,300,600,700 http://mobile.dudamobile.com/…ont-pack.css?version=2015-04-02T13:36:04 http://mobile.dudamobile.com/…kage.min.css?version=2015-04-02T13:36:04 http://irp-cdn.multiscreensite.com/kempruge/files/kempruge_0.min.css?v=6 http://irp-cdn.multiscreensite.com/…mpruge/files/kempruge_home_0.min.css?v=6 Thanks for any tips, Ruben
Web Design | | KempRugeLawGroup0 -
Best Practice issue: Modx vs Wordpress
Lately I've been working a lot with Modx to create a new site for our own firm as well for other projects. But so far I haven't seen the advantages for SEO purposes other then the fact that with ModX you can manage almost everything yourself including snippets etc without to much effort. Wordpress is a known factor for blogging and since the last 2 years or so for websites. My question is: Which platform is better suited for SEO purposes? Which should I invest my time in? ModX or Wordpress? Hope to hear your thought on the matter
Web Design | | JarnoNijzing0 -
Seo and CSS media queries
Hello to all participants! I'm starting on responsive design with css media queries and I was wondering if hidding content can, in this case, can also be bad for seo? I know that hidding content is bad (eg. display: none;), but is it also like that with responsive design or does Google see it other way? If I have a news column with title, image and text for 1024px and hide the text and image leaving just the title for 768px, or smaller, will Google consider this black hat and will it be bad for seo? are there any articles I can read about this subject, and other similar subjects? sorry for my english 🙂 thanks
Web Design | | Lusodados1 -
Html 5 main and secondary navigation for SEO best performances
I am building a website which will have a main navigation related to the site and each link of the main navigation will have a secondary navigation. We do not want to use a megamenu style navigation. I will try to explain it with a example: Let's start with an example for a computer store "My PC Store", the Main Navigation would be: Desktop PC's Notebook & Tablets
Web Design | | netbuilder
Multimedia When clicking on the "Notebook & Tablets" the user is directed to the page domain.com/notebook-tablet.html and on this page the secondary navigation appears: Laptop Netbook Tablets / iPad I am confused on how I should organize the semantic navigation for best SEO performances and I need advice / suggestions. I thought about 2 different ways to do it but which one is more appropriate in terms of SEO? PROPOSITION A Home Page: <header> My PC Store <nav> Desktop PC's Notebook & Tablets Multimedia </nav> </header> Sub-Page (Notebook & Tablets): <nav>(or <aside>?) Desktop PC's Notebook & Tablets Multimedia </aside> </nav> <header> Notebook & Tablets <nav> Laptop Netbook Tablets / iPad </nav> </header> As you notice on the home page the Main Site Navigation is included in the <header>while it is not in the sub-pages. PROPOSITION B Home Page: <header> My PC Store <nav> Desktop PC's Notebook & Tablets Multimedia </nav> </header> Sub-Page (Notebook & Tablets): <header> Notebook & Tablets <nav> Desktop PC's Notebook & Tablets Multimedia </nav> # Notebook & Tablets * Laptop Netbook Tablets / iPad </header> The main navgation remains always in the <header>(home page / sub-pages) of all page. I need suggestions... How would you guys organize the nav ? </header> </header>0 -
Javascript, PhP and SEO Impact?
What are the Pro's and Con's of using Java Script and PHP in a site when factoring in SEO?
Web Design | | bronxpad0 -
How would restructuring the navigation of my website affect my rankings?
I want to restructure the navigation of my website for a few reasons: 1. It isn't intuitive/clear to the user 2. It is way too big, it has too many links and thus causes the number of links on many pages to be >100. 3. I want to get rid of file extensions as part of the URLs (.html, .php) 4. I want to achieve a "tree"-like navigation system, with categories, subcategories and so on. In the process of cleaning up my website, I had to 301 redirect a lot of duplicate pages, fix broken links, etc. I have a lot of 301 redirects already, and in the process of restructuring the navigation of my website I know I'm going to get more. Will the addition of new 301 redirects have an effect on my rankings? (I'm basically going to be changing all of the URLs) What kind of SEO effect will restructuring the navigation at the top of the page (reducing the # of links on the main menu) have on my site? What is the best strategy to implement in this situation?
Web Design | | deuce1s0