Welcome to WebmasterWorld Guest from 184.108.40.206
Forum Moderators: not2easy
I have to agree that on certain sites they are definitely a plus for navigation.
Unfortunately due to my propensity towards SEO I dislike .js
Leading me to my posting question...
Is there a good way to do CSS dropdown menus? Can anyone point me to samples and/or tutorials?
I am trying to hit that elusive balance of good SEO/spiderability and good design/usability/navigation.
I really don't know if it is possible, but I figured if anyone would know it would be the folks in here.
Essentially, I want the "value" of link text, and the usability/navigation function of having the dropdown.
AFAIK if you want I.E., you need J.S.
If it is the former, then I understand but as mipapage says I don't believe you can easily do cross-browser drop-downs without at least a basic use of .js.
"Pure" CSS dropdowns are not yet possible, well they are but not in IE as has been mentioned.
They require the use of :hover on an element other then a link to make them work.
Eric Meyer has a demo of what could be done with pure CSS. View with a CSS2 compliant browser for full effect;)
He also has a tutorial on how to build this:
It is not so much that I am worried about a negative effect, as I am shooting for the positive effect from the value of the anchor text.
The brainjar tutorial looked quite complicated but promising. Would the anchor text value have a positive effect in this example? Is there any way to tell?
Me either ;)
but I'm under the belief that as long as the anchor text is in the HTML, then that's OK
Some .js menus have the anchor text locked up in the script where the spiders can't see it.. but in this case you would just be using a script to catch the hover event...
any .js experts care to confirm/deny?
Say you want to open a link in a popup window, but you want the SE to see it. In this method, the link is not seen by the SE:
<a href="#" onClick="window.open('myPage.html')" title="Some Title Text">
This is where the good old return false comes into play. This basically tells the browser to ignore the default behaviour and only run the script:
<a href="myPage.html" onClick="window.open('myPage.html'); return false" title="Some Title Text">
The above is accessible, SE friendly and still does what you want!
A year or so back I used js drop downs, but they were a nightmare to design so that they looked good in all browsers. And of course alternative navigation was needed for browsers with no or poor DHTML capabilities. I dropped them after a while because I thought the whole concept began to look clunky.
In my opinion, going for CSS versions raises the whole compatablity problem again. It's just not worth the hassle, and they can easily look clunky if everyone goes that route.
A site that uses js drop-downs will almost certainly have externally located js code. Therefore at the current level of SE technology, the links will be invisible to SEs.
Are you saying that even if the html code for the links is located locally in the html file that they will still not count if there is external .js creating the menu?
What is your assessment of Suzy's brainjar example? Would that menu pass the value of anchor text?
I just wanted to be certain that there was strong SEO value before making the difficult changes from image navigation to CSS dropdowns.
Thank you for clarifying Stever. Can you point me to any other good tutorials and/or programs to generate the code?
Blobfisk your tutorial is great.. can you put this in laymans terms for those of us who don't know .js
Note: should've said as long as the link (not anchor text) is in the HTML (href bit!)
I'm a bit leery of a URL drop, but if you go to the DW Exchange on the Macromedia site you'll see the site all over the top ten-voted DW extensions...(I'm not in any way connected to them).
If your links are left in the html there is no problem using javasript for a menu.
A site that uses js drop-downs will almost certainly have externally located js code
To clarify what I meant and expand...
Any half-way decent looking js drop-downs use a fairly hefty chunk of code. The sensible course is to have this in a seperate js file, rather than duplicated on each page. The html for the panels and the links would typically be generated by document.write in a function called by a mouseover. These links are invisible to a bot.
Alternatively it is possible to have standard html panels which are are pre-loaded but with coordinates that keep them out of the display area until required, but this adds extra size to each page. These links would be visible to a bot.
but this thread subject (or what it turned into ;))...
Although I think you did in a earlier post anyway!
What about using document.write(s) in an external js file?
If an SE took the external js file, it could in theory read the URLs. If necessary it could be programmed to ignore any escape slashes that might be included.
However the js file is likely to include several functions, not all used on every page of the site. Unless the SE was extremely clever it would have no way of tying a URL to a page.
I think it unlikely that a company like Google for instance would find the effort worthwhile. However it would be possible to scan a js file for specific URLs that might be considered inappropriate.