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
-
Login to see more (some text hidden by CSS height and jquery) will it ruin SEO?
Hey SEO masters! I have a website that is smashing it for SEO in Australia. In an effort to increase a user base I want to make it so only logged in users can see all the content. So today, I launched a new feature hiding content using CSS 'height:' property. The content is obviously still there and if you were a developer you could easily 'inspect element' and remove that CSS style to see everything... There are a few other tweaks i made for logged out users, but that only affects some json. Question: will this affect my SEO rankings? Here is a direct example: https://www.fishingspots.com.au/s/perth if you sign up, there is about 1400words of content.
Web Design | | thinkLukeSEO0 -
Ecommerce web design read more toggle vs menu link on home page and product pages
Hello, We have an Ecommerce store. We have a lot of content on the home page and product pages and we are going back and forth between which one to use between a toggle "Read More" "Show Less" toggle for each section and a anchor linked menu. We have long product pages We're thinking a read more toggle is more appropriate for category descriptions so that they can go at the top of the category and not take up space. But the read more toggle with lots of content scrolls the page down and doesn't scroll it back up when you hit "show less" We're leaning towards a linked menu for the home pages and product pages for this reason, but an accordion type set of toggles would look nicer. What do you recommend, and how have you set up your read more toggles if they have lots of info so that they are not confusing? Are there other options? ' Not looking for code (I can do that) I'm looking for ideas on the cleanest home page, category pages, and product pages when they have tons and tons of textual content. Wanting to trim it up and make it look compact and neat! Thanks!
Web Design | | BobGW0 -
Traffic Dropping To Website
Hi In Google Analytics:
Web Design | | SEOguy1
I have noticed up to 50% of traffic coming to the website drops off at the home page point,
and drops further from other pages on the site. I realise some may possibly say that this could be down to various factors such as server issues, poor web design, or the wrong traffic reaching the site I have did corrected the following: There was an issue with there being www.domain.com and www.domain.com/home, Screaming Frog and Moz showed that these both had duplicate meta tagging issues. Initially I had created a separate page called 'home' to include in the main nav bar under the slider, but yesterday I replaced this page with a request in the functions.php to place 'home' in the nav bar as a redirect back to the home www.domain.com page. This works great. So I now have the following 301 permanent redirects: non-www to www resolve in the htaccess file, plus 2 permanent 301 redirects in the nav bar. I wonder if this is acceptable protocol re the nav bar redirects, and I wonder if you could possibly advise if the actions that I have taken will have any negative impact on the web seo, link structure, crawlability or indexing. Thanks.0 -
Infinite Scrolling vs. Pagination on an eCommerce Site
My company is looking at replacing our ecommerce site's paginated browsing with a Javascript infinite scroll function for when customers view internal search results--and possibly when they browse product categories also. Because our internal linking structure isn't very robust, I'm concerned that removing the pagination will make it harder to get the individual product pages to rank in the SERPs. We have over 5,000 products, and most of them are internally linked to from the browsing results pages in the category structure: e.g. Blue Widgets, Widgets Under $250, etc. I'm not too worried about removing pagination from the internal search results pages, but I'm concerned that doing the same for these category pages will result in de-linking the thousands of product pages that show up later in the browsing results and therefore won't be crawlable as internal links by the Googlebot. Does anyone have any ideas on what to do here? I'm already arguing against the infinite scroll, but we're a fairly design-driven company and any ammunition or alternatives would really help. For example, would serving a different page to the Googlebot in this case be a dangerous form of cloaking? (If the only difference is the presence of the pagination links.) Or is there any way to make rel=next and rel=prev tags work with infinite scrolling?
Web Design | | DownPour0 -
Subdomain vs Sub Folder
Hi. This is my first question here guys and gals so please be gentle. We are creating a town based website that will hold news, events, articles and relevant local content. We are also creating a business directory that will be part of this. My question relates to an issue we have regarding how the directory will be treated as part of the "network". Although we aren't 100% sure on the domain name yet, we want the directory to be found as easily as the domain itself. Even better, if the two could be treated seperately but strengthen the overall theme for the domain we'd be in keyword heaven. Therefore in your opinion (hopefully with pro's and con's) which do you think will rank better in Google, Yahoo and Bing (or all three);
Web Design | | rufo
The directory seperate as a subdomain or as a folder within the main domain? So for example - providing we are including links between the two sections and the site is www.sitetown.com Which is better for the directory itself? http://www.sitetown.com/directory http://directory.sitetown.com or you're mad Steve, use a seperate domain altogether www.sitetowndirectory.com I hope you can help, obi-wan, you're my only hope..... PS - seomoz still rocks. Thanks
Steve0 -
Examples of e-commerce sites using ajax faceted navigation?
Does anyone have examples of e-commerce sites successfully using ajax to power faceted navigation?
Web Design | | ao.com0 -
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
