undefined
Skip to content
Moz logo Menu open Menu close
  • Products
    • Moz Pro
    • Moz Pro Home
    • Moz Local
    • Moz Local Home
    • STAT
    • Moz API
    • Moz API Home
    • Compare SEO Products
    • Moz Data
  • Free SEO Tools
    • Domain Analysis
    • Keyword Explorer
    • Link Explorer
    • Competitive Research
    • MozBar
    • More Free SEO Tools
  • Learn SEO
    • Beginner's Guide to SEO
    • SEO Learning Center
    • Moz Academy
    • MozCon
    • Webinars, Whitepapers, & Guides
  • Blog
  • Why Moz
    • Digital Marketers
    • Agency Solutions
    • Enterprise Solutions
    • Small Business Solutions
    • The Moz Story
    • New Releases
  • Log in
  • Log out
  • Products
    • Moz Pro

      Your all-in-one suite of SEO essentials.

    • Moz Local

      Raise your local SEO visibility with complete local SEO management.

    • STAT

      SERP tracking and analytics for enterprise SEO experts.

    • Moz API

      Power your SEO with our index of over 44 trillion links.

    • Compare SEO Products

      See which Moz SEO solution best meets your business needs.

    • Moz Data

      Power your SEO strategy & AI models with custom data solutions.

    Let your business shine with Listings AI
    Moz Local

    Let your business shine with Listings AI

    Learn more
  • Free SEO Tools
    • Domain Analysis

      Get top competitive SEO metrics like DA, top pages and more.

    • Keyword Explorer

      Find traffic-driving keywords with our 1.25 billion+ keyword index.

    • Link Explorer

      Explore over 40 trillion links for powerful backlink data.

    • Competitive Research

      Uncover valuable insights on your organic search competitors.

    • MozBar

      See top SEO metrics for free as you browse the web.

    • More Free SEO Tools

      Explore all the free SEO tools Moz has to offer.

    NEW Keyword Suggestions by Topic
    Moz Pro

    NEW Keyword Suggestions by Topic

    Learn more
  • Learn SEO
    • Beginner's Guide to SEO

      The #1 most popular introduction to SEO, trusted by millions.

    • SEO Learning Center

      Broaden your knowledge with SEO resources for all skill levels.

    • On-Demand Webinars

      Learn modern SEO best practices from industry experts.

    • How-To Guides

      Step-by-step guides to search success from the authority on SEO.

    • Moz Academy

      Upskill and get certified with on-demand courses & certifications.

    • MozCon

      Save on Early Bird tickets and join us in London or New York City

    Unlock flexible pricing & new endpoints
    Moz API

    Unlock flexible pricing & new endpoints

    Find your plan
  • Blog
  • Why Moz
    • Digital Marketers

      Simplify SEO tasks to save time and grow your traffic.

    • Small Business Solutions

      Uncover insights to make smarter marketing decisions in less time.

    • Agency Solutions

      Earn & keep valuable clients with unparalleled data & insights.

    • Enterprise Solutions

      Gain a competitive edge in the ever-changing world of search.

    • The Moz Story

      Moz was the first & remains the most trusted SEO company.

    • New Releases

      Get the scoop on the latest and greatest from Moz.

    Surface actionable competitive intel
    New Feature

    Surface actionable competitive intel

    Learn More
  • Log in
    • Moz Pro
    • Moz Local
    • Moz Local Dashboard
    • Moz API
    • Moz API Dashboard
    • Moz Academy
  • Avatar
    • Moz Home
    • Notifications
    • Account & Billing
    • Manage Users
    • Community Profile
    • My Q&A
    • My Videos
    • Log Out

The Moz Q&A Forum

  • Forum
  • Questions
  • Users
  • Ask the Community

Welcome to the Q&A Forum

Browse the forum for helpful insights and fresh discussions about all things SEO.

  1. Home
  2. Digital Marketing
  3. Web Design
  4. CSS vs Javascript vs JQuery drop down navigation

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

Web Design
5
7
5.7k
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as question
Log in to reply
This topic has been deleted. Only users with question management privileges can see it.
  • bronxpad
    bronxpad last edited by Dec 30, 2012, 6:25 PM

    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.

    1 Reply Last reply Reply Quote 0
    • WilliamCarr
      WilliamCarr @bronxpad last edited by Dec 30, 2012, 11:31 PM Dec 30, 2012, 11:31 PM

      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.

      1 Reply Last reply Reply Quote 0
      • dawnieando
        dawnieando @bronxpad last edited by Dec 30, 2012, 10:07 PM Dec 30, 2012, 10:07 PM

        Thumbs up to you too Joel and good luck with your project.

        🙂

        1 Reply Last reply Reply Quote 0
        • bronxpad
          bronxpad last edited by Dec 30, 2012, 10:04 PM Dec 30, 2012, 10:04 PM

          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.

          dawnieando WilliamCarr 2 Replies Last reply Dec 30, 2012, 11:31 PM Reply Quote 1
          • Zachary_Russell
            Zachary_Russell last edited by Dec 30, 2012, 9:34 PM Dec 30, 2012, 9:34 PM

            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.

            1 Reply Last reply Reply Quote 1
            • dawnieando
              dawnieando last edited by Dec 30, 2012, 7:58 PM Dec 30, 2012, 7:58 PM

              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.

              1 Reply Last reply Reply Quote 1
              • mad2k
                mad2k last edited by Dec 30, 2012, 7:30 PM Dec 30, 2012, 7:30 PM

                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

                1 Reply Last reply Reply Quote 1
                • 1 / 1
                1 out of 7
                • First post
                  1/7
                  Last post

                Got a burning SEO question?

                Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.


                Start my free trial


                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.

                • See all categories

                Related Questions

                • L8ydrgn

                  CSS Truncate

                  With Google's new stance on hidden text does the CSS Truncate count as hidden? display: block;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;

                  Web Design | Nov 8, 2017, 4:45 PM | L8ydrgn
                  0
                • danatanseo

                  Can anyone recommend a tool that will identify unused and duplicate CSS across an entire site?

                  Hi all, So far I have found this one: http://unused-css.com/   It looks like it identifies unused, but perhaps not duplicates? It also has a 5,000 page limit and our site is 8,000+ pages....so we really need something that can handle a site larger than their limit. I do have Screaming Frog. Is there a way to use Screaming Frog to locate unused and duplicate CSS? Any recommendations and/or tips would be great. I am also aware of the Firefix extensions, but to my knowledge they will only do one page at a time? Thanks!

                  Web Design | Mar 4, 2014, 4:19 PM | danatanseo
                  0
                • RPD

                  Does having a Blog link in the top level navigation provide any better SEO value, or would having it in a footer or top navigation work just as good?

                  Trying to decide on whether placing a link to the blog in our top level navigation would have a better SEO value than just placing it in top or footer navigation. I have an ecommerce site.

                  Web Design | Jun 10, 2013, 3:23 PM | RPD
                  0
                • Jon-C

                  Left or right hand navigation

                  Really stupid question (I think) but does Left or right hand navigation help or hinder SEO and/or user experience? Re-doing our site at the moment and I quite like right hand navigation as it seems to highlight our content better but not sure if it would hinder anything SEO wise - site is based on a responsive theme and side navigation is only called after content anyway so don't think it would make a difference SEO wise Noticing more and more sites moving towards right hand nav and I quite like it, would also differentiate us in our niche as everyone else uses left hand nav As I say probably a stupid question but thought I would ask! 🙂

                  Web Design | Jan 29, 2013, 4:03 PM | Jon-C
                  0
                • DFM_GSA

                  Should the parent directory of the main site-navigation be clickable or not?!?

                  Highly discussed in our team is the question: Should all parent navigation items be clickable, or only the ones that have no child menu appearing on mouse over? At Starwood Germany, we  would like to adjust the main navigation for all our websites in order to improve consistency and user friendliness. At the moment, most of our websites feature both clickable non-clickable parent items, depending on whether the items have a corresponding child menu (appearing on mouse over) or not. See example here: http://www.imperialvienna.com/en Some of our team members believe it might be irritating and/or confusing for the user if some items are clickable while others are not. What do you think? Any thoughts and insights would be truly appreciated!

                  Web Design | Oct 30, 2012, 1:21 PM | DFM_GSA
                  0
                • DownPour

                  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 | Oct 18, 2018, 6:06 AM | DownPour
                  0
                • diyorgasms

                  Rankings Dropped After Redesign

                  Hi, I've recently redesigned our website with the main changes being sidebar changes and source ordering (making the main content appear before the sidebars). No URL changes have been made. A few days after making these changes our positions dropped heavily and have been dropping ever since. It's been a week and a half now and traffic is down by around 40%. Google has the new changes cached. Do people feel this just a temporary drop and will we rankings to go back at least or should we revert to the old structure? Website: http://www.diyorgasms.co.uk (NSFW) Thanks

                  Web Design | Apr 30, 2012, 5:20 AM | diyorgasms
                  0
                • deuce1s

                  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 | Jul 4, 2011, 10:21 PM | deuce1s
                  0

                Get started with Moz Pro!

                Unlock the power of advanced SEO tools and data-driven insights.

                Start my free trial
                Products
                • Moz Pro
                • Moz Local
                • Moz API
                • Moz Data
                • STAT
                • Product Updates
                Moz Solutions
                • SMB Solutions
                • Agency Solutions
                • Enterprise Solutions
                Free SEO Tools
                • Domain Authority Checker
                • Link Explorer
                • Keyword Explorer
                • Competitive Research
                • Brand Authority Checker
                • Local Citation Checker
                • MozBar Extension
                • MozCast
                Resources
                • Blog
                • SEO Learning Center
                • Help Hub
                • Beginner's Guide to SEO
                • How-to Guides
                • Moz Academy
                • API Docs
                About Moz
                • About
                • Team
                • Careers
                • Contact
                Why Moz
                • Case Studies
                • Testimonials
                Get Involved
                • Become an Affiliate
                • MozCon
                • Webinars
                • Practical Marketer Series
                • MozPod
                Connect with us

                Contact the Help team

                Join our newsletter
                Moz logo
                © 2021 - 2025 SEOMoz, Inc., a Ziff Davis company. All rights reserved. Moz is a registered trademark of SEOMoz, Inc.
                • Accessibility
                • Terms of Use
                • Privacy

                Looks like your connection to Moz was lost, please wait while we try to reconnect.