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.

      Track AI Overviews in Keyword Research
      Moz Pro

      Track AI Overviews in Keyword Research

      Try it free!
    • 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
    5700
    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

      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

        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

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

          🙂

          1 Reply Last reply Reply Quote 0
          • bronxpad
            bronxpad last edited by

            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 Reply Quote 1
            • Zachary_Russell
              Zachary_Russell last edited by

              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

                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

                  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
                  • First post
                    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

                  • KempRugeLawGroup

                    Fixing Render Blocking Javascript and CSS in the Above-the-fold content

                    We don't have a responsive design site yet, and our mobile site is built through Dudamobile. I know it's not the best, but I'm trying to do whatever we can until we get around to redesigning it. Is there anything I can do about the following Page Speed Insight errors or are they just a function of using Dudamobile? Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 3 blocking script resources and 5 blocking CSS resources. This causes a delay in rendering your page.None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.Remove render-blocking JavaScript: http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js http://mobile.dudamobile.com/…ckage.min.js?version=2015-04-02T13:36:04 http://mobile.dudamobile.com/…pts/blogs.js?version=2015-04-02T13:36:04 Optimize CSS Delivery of the following: http://fonts.googleapis.com/…:400|Great+Vibes|Signika:400,300,600,700 http://mobile.dudamobile.com/…ont-pack.css?version=2015-04-02T13:36:04 http://mobile.dudamobile.com/…kage.min.css?version=2015-04-02T13:36:04 http://irp-cdn.multiscreensite.com/kempruge/files/kempruge_0.min.css?v=6 http://irp-cdn.multiscreensite.com/…mpruge/files/kempruge_home_0.min.css?v=6 Thanks for any tips, Ruben

                    Web Design | | KempRugeLawGroup
                    0
                  • Colbys

                    Drop Down Menus and Crawlability

                    Hello, We are working on a complete site redesign.  One of the mock-ups that are being reviewed is of a page that encompasses and entire category of products, but the only way the user can see the products is to fill out several drop down menus, and then a subset of products that match that criteria will appear. Once that list appears, the user will then be able to click on each of the products and will then be taken to the product page. I'm concerned that this layout will pose a crawlability issue since click activity and drop down menus have always been a problem for bots in the past, has anything changed?  Will the bot be able to follow the links to these product pages if it can't see them since it can't fill out the form? Also, depending on the functionality of this 'form', I'm assuming the product listing will be populated dynamically and pulled from another source, which means that the product links will not live in the html of the page, and hence cannot be crawled.  Does anyone know how this is normally handled?  Do the actual results usually live elsewhere or does it live in the html of that page? Any thoughts or clarity around this would be appreciated.

                    Web Design | | Colbys
                    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 | | RPD
                    0
                  • csmm

                    Pages vs. Posts for SEO

                    Hi, I would like your thoughts about pages vs. posts for SEO. I understand the difference in terms of WP structure and have read the SEOmoz blog post about setting up your site for SEO success (http://www.seomoz.org/blog/setup-wordpress-for-seo-success). However, if you're trying to rank for a particular keyword, it seems that either one could work, from an on-page SEO perspective, as far as title tag, URL, meta description, etc. So how do you decide whether to set up a page vs. a post? What are the pros and cons, from an SEO perspective, about using one vs. the other? Thanks in advance! Carolina

                    Web Design | | csmm
                    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 | | DFM_GSA
                    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 | | diyorgasms
                    0
                  • bsofttech

                    Landing pages vs internal pages.

                    Hey everyone I have run into a problem and would greatly appreciate anyone that could weigh in on it. I have a web client that went to an outside vendor for marketing. The client asked me to help them target some keywords and since I am new to the SEO world I have proceeded by researching the best keywords for the client. I found 6 that see excellent monthly searches. I then registered the .com and or .net domain names that match these words. I then started building landing pages that make reference to the keyword and then have links to his site to get more info. My customer sent the first of these sites to the marketer and he says I am doing things all wrong. He says rather then having landing pages like this I should just point the domain names at internal pages to the website. He also says that I should not have different looks for the landing pages from the main site and that I should have the full site menu on each landing page. I wanted to here what everyone here has to say about the pros and cons of the way to do this cause the guy giving the advice to me has a lower ranking site then I do and I have only started working on getting my site ranked this year. He has atleast according to him been doing this forever. Thanks, Ron

                    Web Design | | bsofttech
                    0
                  • prima-253509

                    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-253509
                    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
                  • Digital Marketers
                  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.