Non javascript menus

[Anonymous]

Hey Ryan,
I was wondering if you could help me,
have taken a look at your plugin and really like it, however I don’t like the
fact that it makes use of javascript for the older browsers.

I have seen cross browser drop down menus that just make use of CSS. A great
website with examples is cssplay.co.uk. The only problem I face is that the
markup that those menus use are different to the markup that is outputted by
wordpress. I thought it would be near impossible to change the outputted mark
up of wordpress but apparently not. Whilst searching the net I have come across
another plugin at this address
http://www.thanhsiang.org/faqing/node/58#comment-353

When I took a look at the coding it seems that this plugin makes use of one of
the menus found on CSS Play
(http://www.cssplay.co.uk/menus/drop_examples.html)
but has been altered but the markup has been altered slightly again and so it
has lost its cross browser functionality.

I myself am a complete newbie at php and so my knowledge is very limited. I am
trying to build a theme for wordpress which is completely cross browser
compliant which makes use of just CSS. I have gotten pretty far although I am
stuck now as I am unable to build a menu system that works the way I want it
to.

You can see two versions of my design at
dingo-style.com and http://www.richardpearse.co.uk

I was wondering if you would perhaps be able to help me out?

[imported_Ryan]

From what I can see of the dropdown you linked to, it seems to be using the same approach that I am, but without using Javascript to help out older browsers, so I am assuming it will break in IE6 and older – I haven’t checked this though (I’ll have a look tonight to confirm).

Thanks for the link by the way. The only other dropdown plugin for WordPress I had seen was the JQuery Dropdown Plugin.

Stu Nicholls at CSS Play uses HTML tables hidden inside IE conditional comments to create the dropdown with Javascript. This does allow users of very old browsers to use your menu even without Javascript, but this is at the expense of a bunch of non-semantical HTML being jammed in between conditional comments. Most people (including myself) prefer the Suckerfish approach, ie: using Javascript to help out IE6 and older. There are merits in Stu Nicholls approach though.

Dropdown menus by their very nature are notoriously non-browser compliant and will be for quite a few years to come. For example most cellular phones, PDA’s and other mobile devices will struggle to render them correctly. So if you are looking for the most cross browser design possible, then I suggest not using a dropdown at all.

I have no idea how to change the output of the HTML lists that WordPress generates. These would need to be altered to use the CSS Play style menus. I’m sure it is possible, but I think you would probably need to hack the WordPress core files to do it.

EDIT: for any of you who are interested in learning about the finer points of designing non-suckerfish dropdown menus, Stu Nichols website (CSSPlay.co.uk) is a wonderful resource. He truly is the master of cross browser compliant dropdowns which work in older browsers without javascript on. Personally I’m not a fan of this approach, but like I said above, it does have it’s merits. Even if you aren’t interested in using his technique, his site has some brilliant examples of what can be done with a bit of lateral thinking.

[imported_Ryan]

From what I can see of the dropdown you linked to, it seems to be using the same approach that I am, but without using Javascript to help out older browsers, so I am assuming it will break in IE6 and older – I haven’t checked this though (I’ll have a look tonight to confirm).

Thanks for the link by the way. The only other dropdown plugin for WordPress I had seen was the JQuery Dropdown Plugin.

Stu Nicholls at CSS Play uses HTML tables hidden inside IE conditional comments to create the dropdown with Javascript. This does allow users of very old browsers to use your menu even without Javascript, but this is at the expense of a bunch of non-semantical HTML being jammed in between conditional comments. Most people (including myself) prefer the Suckerfish approach, ie: using Javascript to help out IE6 and older. There are merits in Stu Nicholls approach though.

Dropdown menus by their very nature are notoriously non-browser compliant and will be for quite a few years to come. For example most cellular phones, PDA’s and other mobile devices will struggle to render them correctly. So if you are looking for the most cross browser design possible, then I suggest not using a dropdown at all.

I have no idea how to change the output of the HTML lists that WordPress generates. These would need to be altered to use the CSS Play style menus. I’m sure it is possible, but I think you would probably need to hack the WordPress core files to do it.

EDIT: for any of you who are interested in learning about the finer points of designing non-suckerfish dropdown menus, Stu Nichols website (CSSPlay.co.uk) is a wonderful resource. He truly is the master of cross browser compliant dropdowns which work in older browsers without javascript on. Personally I’m not a fan of this approach, but like I said above, it does have it’s merits. Even if you aren’t interested in using his technique, his site has some brilliant examples of what can be done with a bit of lateral thinking.

[imported_Ryan]

I’ve had a closer look at the plugin you linked to. But it looks like it is also a suckerfish dropdown though. The following code is a giveaway as it is almost identical to that used by my own plugin:

[code:1dmnur8t]<script type="text/javascript">
<!–//–><![CDATA[//><!–
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);[/code:1dmnur8t]

[imported_Ryan]

I’ve had a closer look at the plugin you linked to. But it looks like it is also a suckerfish dropdown though. The following code is a giveaway as it is almost identical to that used by my own plugin:

[code:1dmnur8t]<script type="text/javascript">
<!–//–><![CDATA[//><!–
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);[/code:1dmnur8t]

[imported_Ryan]

Leo emailed me with a link to his own site which uses the plugin he originally linked to. It seems that the demo site uses a similar method to that used here, but ironically the plugin does not!

The plugin does indeed use the CSSPlay style method of creating the dropdown. I don’t intend to use this method myself as I prefer the suckerfish approach, but it is interesting to see that someone has created a plugin for this purpose.

Here is Leo’s demo site … http://www.dingo-style.com/

And in case you missed it, here is a link to the plugin … http://www.thanhsiang.org/faqing/node/58#comment-353

[imported_Ryan]

Leo emailed me with a link to his own site which uses the plugin he originally linked to. It seems that the demo site uses a similar method to that used here, but ironically the plugin does not!

The plugin does indeed use the CSSPlay style method of creating the dropdown. I don’t intend to use this method myself as I prefer the suckerfish approach, but it is interesting to see that someone has created a plugin for this purpose.

Here is Leo’s demo site … http://www.dingo-style.com/

And in case you missed it, here is a link to the plugin … http://www.thanhsiang.org/faqing/node/58#comment-353

[Author]

Posts