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
-
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 -
Domain Authority Drop After Website Relaunch
Prior to my website redesign and relaunch on July 10th, our domain authority was 33. 301 redirects were implemented properly. Out or 600 pages, about 200 URLs were modified. Domain authority has dropped to 28. Rankings are terrible. Conversions are awful. What does the domain authority drop mean? I have noticed in the past that a drop in domain authority tends to coincide with more a drop in ranking and a drop in the quality of visitors. The site is www.metro-manhattan.com Thanks,
Web Design | | Kingalan1
Alan0 -
New more "helpful" internal linking causing SERP & traffic drop?
Still dealing with the weird traffic drop on my website. I have removed a bunch of old links from a defunct blog, 301 thin pages, added text to remaining pages. I'm still stumped. So awhile ago I freshened up my website and thought I was "helping people" by making sure they could CONTACT the studio more easily... I added more links to the "contact page" I thought this would help conversions...This changed the number of links to my entire site....Would this be the problem with my ranking/traffic drop? http://bayareaboudoir.com/babinternal1.pdf
Web Design | | Squee1 -
Using a 301 vs. 302?
I'm running into a very confusing situation - and while I think I've worked through the answer, I'm hoping someone can help provide their insight. I have a client who is in the process of rolling out a responsive site. Because we need to host both Responsive and legacy versions of product pages on the domain we are using the following URL pattern. New Responsive Product Page exampleurl.com/product (existing URL structure) Older Product Pages (redirected to) exampleurl.com/legacy/product The rollout will be approximately 2 months to complete. The question becomes - should a 302 redirect be applied from the existing URl to the /legacy/ URLs until the new designs are launched? Given that the timing will be so short this seems reasonable. Or should a 301 be applied until the new responsive designs are rolled out?
Web Design | | JonClark150 -
Pin It Button, Too Many Links, & a Javascript question...
One of the sites I work for has some massive on-page link problems. We've been trying to come up with workarounds to lower the amount of links without making drastic changes to the page design and trying to stay within SEO best practices. We had originally considered the NoFollow route a few months back but that's not viable. We changed around some image and text links so they were wrapped together as one link instead of being two links to the same place. We're currently running tests on some pages to see how else to handle the issue. What has me stumped now though is that the damned Pinterest Pin Button counts as an external link and we've added it to every image in our galleries. Originally we found that having a single Pin It button on a page was pulling incorrect images and not listing every possible image on the page... so to make sure that a visitor can pin the exact picture they want, we added the button to everything. We've been seeing a huge uptick in Pinterest traffic so we're definitely happy with that and don't want to get rid of the button. But if we have 300 pictures (which are all links) on a page with Pin It buttons (yet more links) we then have 600+ links on the page. Here's an example page: http://www.fauxpanels.com/portfolio-regency.php When talking with one of my coders, he suggested some form of javascript might be capable of making the button into an event instead of a link and that could be a way to keep the Pin It button while lowering on-page links. I'm honestly not sure how that would work, whether Google would still count it as a link, or whether that is some form of blackhat cloaking technique we should be wary of. Do any of you have experience with similar issues/tactics that you could help me with here? Thanks. TL;DR Too many on page links. Coder suggests javascript "alchemy" to turn lead into gold button links into events. Would this lower links? Or is it bad? Form of Cloaking?
Web Design | | MikeRoberts0 -
Image Replacement Using Cufon (Javascript)
Our agency is working with an outside developer that has designed a beautiful site. The possible problem is that they used Cufon to change a large amount of the text on the page to an image of the text in a nicer font. On some pages all of the text is replaced and on others its about 20%. The text that is replaced is identical to what is shown to the user. I realize that Google has stated that sIFR (similar to Cufon) is okay, in a limited way years ago, but I am stil a little leery of the large amount of image replacement that is happening. I am also worried about user experience, should flash not be enabled or it is slower to load. So I have a couple questions. 1. Would this amount of image replacment raise a flag to Google, especially since it is the heading tags and large chunks of the body content both? 2. I know about 2% of the site's users do not have javascript enabled. Do you have an idea of what percentage of people have issues, like slow connection speeds or slow computers, using javascript even if it is enabled?
Web Design | | DirectiveGroup0 -
Flat vs. Silo Site Architecture, What's Better
I'm in the midst of converting a fairly large website (500+ pages) into WordPress as a content management system. I know that there are two schools of thought regarding site architecture: Those who believe that everything should be categorized, I.E.- website.com/shoes/reebok/running People who believe that the less clicks it takes from the homepage the better. As it stands, our current site has a completely flat architecture, with landing pages being added randomly to the root, I.E.- website.com/affordable-shoes-in-louisville-ky I'm beginning to think that there is a gray area with this. I spoke to someone who says that you should never have a page more than 2 categories/subfolders deep. But if we plan on adding a lot of content doesn't it make sense to set the site up into many categories so we can set a good foundation for adding massive amounts of content. Also, will 301 redirecting to the new structure cause us to lose rankings for certain terms? Any help here is appreciated.
Web Design | | C-Style0 -
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