Forum Moderators: open
What is the most reliable and efficient way to create drop down menus?
A few options that I am considering are:
- layers (hide/show) when over button
- javascript
I am sure that there are more methods, so what are they? and what are their
pros & cons?
Well, Javascript menus use hidden layers. This combination of Javascript and HTML is called DHTML, I believe. I have a functional script that you can use, Sticky me with your e-mail address if you want it. I'll send it with instructions on how to use it.
The site in question was launched in November and I have had no problems with it. It has been doing extremely well in Google and other engines and I really can't ask for better ranking. I had a hard time solving the problem of making the layers "hide" the way I wanted them to (being a newbie!) but eventually managed to find a solution. If you have trouble, just sticky mail me and I'll send you the URL of the site I am talking about and I can explain how I did it.
Firstly, the code is hugely bloated so that it is easy for the user to customise the script to their requirements. Secondly, they are difficult to modify without trawling through the code and figuring our whats going on. Finally, the rarely support putting images into the drop-down layer.
With a reasonably quick learning curve you can write your own script to do this, that uses layers on the page in which you can put whatever you like.
I started out using the dynamicdrive layers, ran into the problems above and eventually wrote my own, which does what I want it to do and can be customised completely for each new project. I haven't looked back since. Sticky Mail me if you'd like it... but nothing beats doing your own for complete understanding of whats happening!
Susanne's comments suggest that menus using layers are search friendly. In general, is there any easy way to tell easily what menus will work for search? If I look at the code, what do I look for? I'm not a javascript expert, and not great with CSS either.
In many DHTML menus javascript needs to be active to switch the div's visibility onmouseover. But in the HTML code, a spider just sees something like:
<div class="foo">
<a href="bar.htm" onmouseover="switchon()" onmouseout="switchoff">foobar</a>
</div>
That's safe.
<div align="center"><a href="sample.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sample','','top_nav/pulldowns/pac_sample_ro.gif',1)"><img name="sample" border="0" src="top_nav/pulldowns/pac_sample.gif" width="115" height="17"></a></div>
(I've changed the file names, but I think what's going on should be clear).
Robert:
That's an image rollover, and it's very easily spiderable.
A suggestion - align="center" is a deprecated attribute. Inline you can use style="text-align:center" or you can give the div a class (or ID) and define the text-align in the rules for the class/ID. Those rules may be either in an external stylesheet or in the document's HEAD section.
When I first started using divs that switch visibility I had a similar concern. But that kind of code was already in use around the web, and today you see it a lot more today than you did then!
I quickly felt that there could never be some knee-jerk automatic ban just because a page contains a visibility:hidden; rule.
Then I realized that I already had been running a kind of test. The first site where I ever used external stylesheets had a div that began with a negative position - off the screen. DHTML slid it on screen.
The site had been doing well, and a log check showed no bot asking for the .css file at any rate.
Now, I know that a negative position is not the same as visibility:hidden -- but just considering it helped me understand how very unlikely some kind of universal penalty would be -- it would catch so more non-spam" than spam.
And writing an automated algo to separate the chaff from the wheat? That seemed to be an even bigger challenge. The SE's would need to run the javascript to see if the negative position or hidden visibility was part of a DHTML effect or part of a spam scheme.
Can you imagine Seach Engines running unknown JavaScript automatically, script which might very well be malicious? I highly doubted that. And even if they did - how would they be testing the results?
So, my conclusion was that suspected CSS spamming would need to be a hand-check from the SE, and not an automated script of some kind. My innocent DHTML had nothing to fear from a hand check whatsoever, so I went blithely forward. And I have had no problems to date.
However, I began to shy away from such tricky pages for other reasons - mostly usability/stickyness. Log analysis showed me that these menus were getting a relatively poor report card.
