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
-
Navigational Change
Morning Mozzers, Currently our website has 2 navigation bars. The top Navigation is the typical **Home - Products - Services - Contact - About **type thing The side navigation contains a link to top level categories, if a category is selected it shows the child categories
Web Design | | ATP
Eg. Socks
Shoes
Boots Cateogry level (Socks) Blue Socks
Red Socks
Green Socks The top navigation has drop-down menus built in whilst the side nav does not. Would it be worthwhile to edit the nav bars so that the top nav bar contains the categories with the child categories displaying in dropdown list when clicked. Top Nav
Home - Socks - Shoes - Boots when hovering over socks you would see Socks
Blue Socks
Red Socks
Green Socks My reasons for the change I could remove the thin content "Products page" It would add a link to the categories and sub categories from every page on the website as it would be in the top navigation bar i think this would help with ranking for some of the sub-category pages that struggle. It would allow me to remove the left nav bar on the homepage, moving more content above the fold and give the website a more modern feel. What do you think? Is would this be a positive or negative change?0 -
Post vs Pages
Does Google make any distinction between a web page and a blog post? Assuming all else is equal...any reason why a page would rank higher than a post? And that includes a page in WordPress vs a WordPress blog post.
Web Design | | Pinlaser1 -
AJAX & JQuery Tabs: Indexation & Navigation
Hi I've two questions about indexing Tabs. 1. Let's say I have tabs, or an accordion that is triggered with Jquery. That means that all HTML is accessible and indexed by search engines. But let's say a search query is relevant to the content in Tab#3, while Tab#1 is the one that's open by default. Is there any way that Tab#3 would be open directly if it's more relevant to the search query? 2. AJAX Tabs: We have pages that have Tabs triggered by AJAX (example: http://www.swisscom.ch/en/residential/help/loesung/entfernen-sie-sim-lock.html). I'm wondering about the current best practice. Google recommends HTML Snapshots. A newer SEOMoz Article talks about pushState(). What's the way to go here? Or in other words: How to get Tabs & Accordion content indexed and allow users to navigate directly to it?
Web Design | | zeepartner0 -
Content Stacking - CSS positioning
I was curious to know what everyone thinks about CSS positioning so that the spiders will read a optimal bulk of content first - before it reads the others. Say I have some Tab's set up for navigational purposes, where the content in the last tab is actually what I want the bots to see first. What would be the best practices for accomplishing something like this?
Web Design | | imageworks-2612900 -
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 -
Switched From Wordpress, Traffic Dropped In Half
Hello, Thank you for taking a look at my issue. My site: http://www.getrightmusic.com A month ago, I switched from Wordpress to ExpressionEngine. The reason being I wanted a more powerful membership functionality with media uploading. After I switched, my traffic basically dropped in half. I was averaging around 4-6,000 unique visitors per day and now I am at about 2,000 per day. I resubmitted a new sitemap to Google webmasters. I also set up 301 redirects on my top 80 urls that were ranking well and driving traffic in Google. Not only did Google kick me off of my top spots in the SERP's, but I no longer get indexed as quickly as I used to. With the old Wordpress site I would get url's indexed within minutes. Now they aren't even getting indexed really at all. Is this a normal occurrence when switching site designs and systems? Do you think Google will just take a little time before they give me back some respect? Is there anything I should be doing to get back to ranking and getting indexed faster? Thanks for any help or any insight you may have. Jesse
Web Design | | getrightmusic0 -
Best Site navigation solution
Hi there, We are getting our website redesigned and would like to know whether to increase the links on our site wide navigation or not. At the moment we have around 30 links from the navigation. We want to use exploding navigation menu and increase the links to our most important categories. Say if we increase to 60-70 would that be alright. (what will be the highest we can go for) At the moment categories that get links from navigation are ranking pretty good. If we increase would we loose those rankings. What will be the pros and cons of increasing navigation links? Second question we are also adding fooer links to top 10 categories in the footer. Would this be ok as far as seo and google concerned. Many Thanks
Web Design | | Jvalops0 -
Crawl Budget vs Canonical
Got a debate raging here and I figured I'd ask for opinions. We have our websites structured as site/category/product This is fine for URL keywords, etc. We also use this for breadcrumbs. The problem is that we have multiple categories into which a category fits. So "product" could also be at site/cat1/product
Web Design | | Highland
site/cat2/product
site/cat3/product Obviously this produces duplicate content. There's no reason why it couldn't live under 1 URL but it would take some time and effort to do so (time we don't necessarily have). As such, we're applying the canonical band-aid and calling it good. My problem is that I think this will still kill our crawl budget (this is not an insignificant number of pages we're talking about). In some cases the duplicate pages are bloating a site by 500%. So what say you all? Do we just simply do canonical and call it good or do we need to take into account the crawl budget and actually remove the duplicate pages. Or am I totally off base and canonical solves the crawl budget issue as well?0