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
-
Website rankings drop significantly after moving to new hosting provider
My website - www.isacleanse.co.nz has dropped from being top10 rankings for all of my keywords to not even being in top 50 after just checking now. It used to be hosted on: www.1stdomains.nz
Web Design | | IsaCleanse
It got migrated to Sitground servers about a month ago See attached screenshot - would moving hosting provider cause such a huge drop? Or would there be anything else I should be looking at ? J2ahi0 -
Mobile SEO vs. Usability - SinglePlatform
I have a restaurant client that we're setting up with SinglePlatform.com to distribute their menu and make sure all of the restaurant sites have updated information for their business. As part of SinglePlatform's service, they offer a mobile site. Normally we would just create a mobile site and make sure that it's optimized but this client isn't ready to invest in a customized mobile site yet. The mobile site we can get with SinglePlatform is very simple. Call, Menu, Address, View Full Website, Photos, General Info. I know this would make it much easier for mobile users to find information and contact them but it's not mobile best practices. Whatever main page they land on would redirect them to the home page of the mobile site (i.e. not a 1 to 1). We also won't have any Google Analytics information for this site. The question comes down to usability or SEO? I'm leaning toward the mobile site for now and sell them on a customized solution later. I guess I'm just looking for some verification or any insight. ZRVbARv
Web Design | | JaredDetroit0 -
Forms vs. Buttons
We are an IT services firm. A conversion for us is completion of a lead form. Generally speaking, is it better to have a form to fill out in the sidebar on most organic pages, or a button that takes you to a lead form? I see both used, which do you think converts better?
Web Design | | CsmBill0 -
Anyone have a good example of a CSS-based multi-level nav bar that is semantic (including link level subordination) and is ux positive?
Anyone have a good example of CSS-based multi-level nav bar that is semantic (including link level subordination) and is ux positive? Or am I gonna have to actually make one? Anyone have a good example of CSS-based multi-level nav bar that is semantic (including link level subordination) and is ux positive? Or am I gonna have to actually make one?
Web Design | | anns0 -
Drop Down Menus & SEO?
Do these typically have a negative impact on SEO? I know this is kind of a vague question, does it make it harder to spider? Are there SEO friendly ways of coding these? There are so many sites out there that have these, so I've got to assume it's different on a case by case basis.
Web Design | | MichaelWeisbaum0 -
Which Shopping Cart is best for SEO? Magento vs. X-Cart
Comparing X-Cart and Magento, which do you think is better for SEO and why? I am leaning towards Magento and wanted to get some opinions?
Web Design | | BlinkWeb0 -
Is there any difference in using an underscore vs. a dash in the directory portion of the url?
A friend who is a software developer asked this question regarding the directory portion of the url: Is it better to use dashes or underscores? I know in the domain name Matt Cutts recommends dashes, but what about the directory extension?
Web Design | | RobertFisher0 -
How is link juice split between navigation?
Hey All, I am trying to understand link juice as it relates to duplicate navigation Take for example a site that has a main navigation contained in dropdowns containing 50 links (fully crawl-able and indexable), then in the footer of said page that navigation is repeated so you have a total of 100 links with the same anchor text and url. For simplicity sake will the link juice be divided among those 100 and passed to the corresponding page or does the "1st link rule" still apply and thus only half of the link juice will be passed? What I am getting at is if there was only one navigation menu and the page was passing 50 link juice units then each of the subpages would get passed 1link juice unit right? but if the menu is duplicated than the possible link juice is divided by 100 so only .5 units are being passed through each link. However because there are two links pointing to the same page is there a net of 1 unit? We have several sites that do this for UX reasons but I am trying to figure out how badly this could be hurting us in page sculpting and passing juice to our subpages. Thanks for your help! Cheers.
Web Design | | prima-2535090