Developing a drop down menu: Do I use javascript or pure css?
-
I am developing a drop down menu and am trying to decide if using javascript instead of just css is worth it.
I've done some research on the topic and the opinions seem dated. I know that at one time not using javascript for a drop down menu was important but now less so. Google constantly says that they will not discount the links just because they are not shown until javascript is ran.
What I want to know is has anyone discovered from testing that using javascript instead of css for a drop down makes a difference?
Note: the links will not be located in an external javascript file.
-
Hey Zachary!
It's a good idea to use pure css menus when the design and functionality are the same as using a menu with javascript AND the actual menu items are in a clean
html list (not delivered through the JS). But keep in mind that cross-browser functionality can be an issue with pure css menus. Internet Explorer is a real problem in this regard.
As for SEO, I doubt inline javascript that adds functionality to a clean html list will make search engines burp. We used to worry a lot about that like 5 years ago because JS used to cause slow load times, but nowadays the Internet is a lot faster, servers are faster, caching is better, etc... All the same, it's good coding practice to remove inline JS from HTML.
If you want something fast and cross-browser supported look for jquery menus. There are free samples all over the place and they are brilliantly fast and you can list your menu items in a plain html list (the important thing).
Happy coding... - P
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
-
Rankings Dropped to Nothing
We're kind of in crisis mode, as our ad revenue is about to take a huge hit. Hoping someone can help me figure out what to do next. Site: https://indoorgardening.com Here's what I did (below) that I think broke things somehow. I'm clearly not an SEO expert but thought I was making things better. And things did improve over the last week or so but then fell apart 2 days ago. 1. Most posts did not have a Yoast focus keyword. I added keyword phrases and used Yoast suggestions to optimize for that and for readability. 2. In some cases I changed post titles to better reflect the keyword phrase. 3. In some cases I changed the slug per Yoast's suggestion and did a 301 redirect from the old slug to the new one. 4. I used Grammarly to fix all spelling, grammar, punctuation, etc. 5. Some Yoast-suggested changes that were made: Image alt tags, subheading structures, adding keyword to subheadings, first paragraph, and meta description, changed sentence length for those over 20 words to clean up the text, added transition words where applicable, reworded passive voice sentences, added internal links when needed, eliminated consecutive sentences (first word), improved Flesch reading ease when necessary. 6. I also added or changed Amazon affiliate links where needed and swapped out images when necessary. Results:
Technical SEO | | Jbyron
I started this project about 3 weeks ago. On 11/29 we had one of our highest traffic days, with 1017 hits coming from Google. On 11/30, 257 hits came from Google, and on 12/1, 3 (three!!) hits came from Google. At this point, 82 of 89 posts have a double green "Good" score in Yoast; 6 are "OK" and 1 does not have a focus keyword designated. Thanks in advance for any help anyone can provide. -John0 -
Is 301 redirect the only way when using Vanity URLs?
We have been using vanity urls for some of our pages. Mostly the pages that have a vanity URL have a long URL length. But now the problem is, the vanity URL is getting displayed on the search engine when the particular keyword related to the page is entered. I checked the google search console, the vanity URL is indexed and the original URL remains unindexed. What should I do? Is adding 301 redirect to the vanity URLs are solution? Since some of vanity URLs are not redirecting to the original. Some of the original pages are not getting traffic. Also, can using canonical tag help?
Technical SEO | | tejasbansode0 -
Should we use Cloudflare
Hi all, we want to speed up our website (hosted in Wordpress, traffic around 450,000 page views monthly), we use lots of images. And we're wondering about setting up on Cloudflare, however after searching a bit in Google I have seen some people say the change in IP, or possible sharing of Its with bad neighbourhoods, can really hit search rankings. So, I was wondering what the latest thinking is on this subject, would the increased speed and local server locations be a boost for SEO, moreso than a potential loss of rankings for changing IP? Thanks!
Technical SEO | | tiromedia1 -
Create Page Titles from H1 using Yoast?
I'm working on a site that has 280 blog posts that have either been migrated from an old CMS site or created on the Dev version of the new WordPress site. We've written 280 unique meta descriptions so they don't truncate but it there a quick way I can export the current H1s and then import them into Yoast so they are set as the Page Titles? I've written unique Page Titles and meta descriptions for all the Service and Products page and just want a way to speed up the blog posts as their H1s are really good and what I would use as Page Titles anyway. Any help, greatly appreciated!
Technical SEO | | Marketing_Today0 -
Using Product Page Content from an Offline Website
Hi all, We have two websites. One of the website's no longer sells product range A. However, on the second website, we would like to sell range A. We paid a copywriter to write some really good content for these ranges and we were wondering if we would get stung for duplicate content if we took these descriptions from website 1 and placed them on website 2. The products / descriptions are live anymore and haven't been for about 6 weeks. We're ranking for some great keywords at the moment and we don't want to spoil that. Thanks in advance! D
Technical SEO | | 10dales0 -
CSS Float Top Left Image not displaying
Using CSS/HTML in Dreamweaver CC, I am trying to display a SEO friendly matrix of six images wide by three deep on the Home Page, but cannot get the first (top left) image to display consistently. The page appears correctly in Dreamweaver Design View, but not in the Live View. Equally it works fine in Safari, but not in Firefox nor I.E. I seem to have tried every CSS variation to resolve this issue, without success. Can someone stear me in the right direction, please? The relevant HTML Code ... Celotex PL4050 - 62.5mm insulated wallboard from £11.96 per m² / £34.45 per board SuperFoil SF19 40mm Multi-foil Roll from £5.23 per m² / £98.00 per 18.75 m² Roll Celotex GA4000 General application Rigid PIR from £8.56 per m² / £24.66 per board Rockwool Full-fill 75mm Cavity Wall Slabs from £3.51 per m² / £1.92 per slab Knauf Earthwool 270mm Loft Roll 44 Combi-Cut from £3.80 per m² / £22.51 per 9.93 m² Roll Kingspan Kooltherm K8 75mm Cavity Wall Boards from £16.26 per m² / £8.79 per board Knauf Earthwool 170mm Combi-cut Loft Roll 44 from £3.16 per m² / £25.34 per 8 m² Roll Kingspan Kooltherm K7 Rigid Phenolic Foam - 75mm £13.91 per m² / £40.05 per board ... The associated CSS code ... #popular {
Technical SEO | | JustInsulation
width: 1050px;
height: 800px;
overflow: hidden;
width: auto;
height: auto;
}
#product1 {
background-image: url(../007-graphics/popular/01-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 24px;
float: left;
overflow: auto;
clear: left;
}
#product2 {
background-image: url(../007-graphics/popular/02-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
opacity: 0.85;
}
#product3 {
background-image: url(../007-graphics/popular/03-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product4 {
background-image: url(../007-graphics/popular/04-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
}
#product5 {
background-image: url(../007-graphics/popular/05-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product6 {
background-image: url(../007-graphics/popular/06-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product7 {
clear: both;
background-image: url(../007-graphics/popular/07-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 24px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product8 {
background-image: url(../007-graphics/popular/08-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
}
#product9 {
background-image: url(../007-graphics/popular/09-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
} ... The complete code is located at - www.just-insulation.com/index.html0 -
The use of robots.txt
Could someone please confirm that if I do not want to block any pages from my URL, then I do not need a robots.txt file on my site? Thanks
Technical SEO | | ICON_Malta0 -
Dropped 20 places!
Hi everyone, I have spent the last 3 weeks using SEO Moz to improve the SEO of my website. I have reduced the amount of crawl errors from 6000 to 600, I have optimized my on-page to A grade for 4 of my main keywords and have been posting keyword optimized blogs posts 3 / 4 times weekly. My reward for this? A drop down to page 4 of Google for my main keyword and a very annoyed boss! Can anyone think where I may have gone wrong? Thanks
Technical SEO | | gaz33421