Drop down "menu" in html

[mscir]

Is it possible using only html to construct a drop down "menu" from
which one could choose html links to other web pages?

Take a look at these very impressive examples:

http://css.maxdesign.com.au/listamatic/index.htm

 

[(Pete Cresswell)]

Per Bernhard Sturm:

yes it can be done in html/css only... without the use of javascript
(people tend to underestimate the power of XHTML/CSS).
see:

http://www.alistapart.com/articles/dropdowns/

He's using this. Not JavaScript, I'd guess...
but what is it called? HTML-Script?
---------------------------------
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

 

[SpaceGirl]

yes it can be done in html/css only... without the use of javascript
(people tend to underestimate the power of XHTML/CSS).
see:

http://www.alistapart.com/articles/dropdowns/


bernhard

....that example uses JavaScript again.


--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

 

[SpaceGirl]

yes it's possible. even without javascript and server-side coding.
thanks to CSS you can do this. it works very well on latest browser, but
not IE (which is not to be considered as a 'modern' browser).

see the famous suckerfish solution:

http://www.alistapart.com/articles/dropdowns/

the good thing is: you only need the javascript for IE users, for all
other users the drop-down will work without javascript (for those
interested: this is because IE doesn't understand correct CSS as IE can
only add pseudo elements to the a tag, and not to other tags, such as
li...)

if you want to see a running suckerfish drop-down:

www.frauen-an-die-maeuse.ch

HTH

bernhard

It doesn't work. It ONLY works fully in non-IE browsers (it uses :hover,
which is not supported on anything but links in IE), and to get it to
work in IE you need to use their JavaScript fudge. So this is NOT a real
solution. But I guess the OP didn't say he wanted it to work in all
browsers



--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

 

[SpaceGirl]

Take a look at these very impressive examples:

http://css.maxdesign.com.au/listamatic/index.htm

None of those are drop-down lists...

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

 

[SpaceGirl]

Per Bernhard Sturm:

yes it can be done in html/css only... without the use of javascript
(people tend to underestimate the power of XHTML/CSS).
see:

http://www.alistapart.com/articles/dropdowns/

He's using this. Not JavaScript, I'd guess...
but what is it called? HTML-Script?
---------------------------------
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
---------------------------------

That's JavaScript. There's only one in-page scripting language that
works across browsers (there's VBScript as well, but nobody uses it as
it's IE-only), so if you see it in the source, it pretty much HAS to be
JavaScript.

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

 

[Neal]

It doesn't work. It ONLY works fully in non-IE browsers (it uses :hover,
which is not supported on anything but links in IE), and to get it to
work in IE you need to use their JavaScript fudge. So this is NOT a real
solution. But I guess the OP didn't say he wanted it to work in all
browsers

She speaks the truth. The only no-JS solution uses the CSS hover technique
as seen in the Suckerfish examples.

 

[Guest]

The OP said in HTML. You've given a Javascript example. Care to try
again, but this time IN HTML??? Like I said, it can't be done in HTML!

I guess, technically, no public site can be done with just HTML, you need
a web server written in some other language to actually serve the pages. (and
file system code, etc..)

Taking server side programming into question, it's pretty easy. (and pretty
lame)

<form method="get" action="redirect.cgi">
<select name="url">
<option value="http://www.example.com/">Link</option>
</select>
<input type="submit" value="go" />
</form>

redirect.cgi:

#!/usr/bin/perl
use CGI;
my($cgi) = new CGI();
print "Location: " . $cgi->param("url") . "\n\n";

I hate those pulldown menus anyway, whats so terrible about:

<a href="example.html">example</a>

May not look as popular, maybe not in style, but at least you can see the link
w/out going through the process of aimlessly clicking on things that look like
potential pulldown menus.

Jamie

 

[(Pete Cresswell)]

Per (e-mail address removed):

May not look as popular, maybe not in style, but at least you can see the link
w/out going through the process of aimlessly clicking on things that look like
potential pulldown menus.

Of all the menu schemes I've come across as a user, the one I like best always
shows the entire map of the site somewhere on the page and highlights the node
that I'm in at the moment. For a more complex site, one variatin on this is
to show only the major nodes for areas where I am not...but show the complete
map under the node I am currently in...with the subnode highlighted.

 

[Bernhard Sturm]

Per Bernhard Sturm:



He's using this. Not JavaScript, I'd guess...
but what is it called? HTML-Script?

this is javascript.. but have you read the article? it's only necessary
because of IE... if you go by the book there is no need for javascript
for the proposed method. try it! you can use your
FF0.8+/Opera7/Netscape7 browser and then you just turn off javascript:
the menu will work perfectly...
IMHO this is one of the most sophisticated methods to build a perfect
dropdown style menu. You can also add infinite children to the menu-tree.


bernhard

 

[Bernhard Sturm]

...that example uses JavaScript again.

have you read the article?
you can turn off javascript on your FF0.8+/Opera/Netscape browser, and
the menu will work perfectly. JavaScript is only there to help IE to
understand the DOM properly... that's all there is. So according to the
W3C specs this method does not take the use of JS.


bernhard

 

[Bernhard Sturm]

It doesn't work. It ONLY works fully in non-IE browsers (it uses :hover,
which is not supported on anything but links in IE),

that's why there is a bunch of JavaScript to help IE to get it correct
and along the W3C specs. although it will work with switched off
JavaScript in terms of having accessibility to the content...

and to get it to

work in IE you need to use their JavaScript fudge. So this is NOT a real
solution.

in my view it is. it's the far sophisticated solution I know to overcome
the lack of a drop-down menu.

But I guess the OP didn't say he wanted it to work in all

browsers

it works on all browsers, because it makes use of a list. it depends
what you mean with 'work'. If you claim 'pixel accuracy' as 'working',
then it will not work. But then you will have a big problem as a
webdesigner: to claim your site will be pixel accurate on all browser (I
prefer the term UA) is impossible, and you might have to sit back and
reflect a bit about what webdesign actually is.
As far as I understand webdesign accessing the content is 'working',
beause people demand for the content. So the proposed solution will
'work' decently on all modern browsers (even on Netscape 4.x as the
colapsed list will be displayed, and even on a Lynx text browser you can
access the full menu, without noticing anything weird...)

basic philosophical question: are we going to write XHTML according to
the specs or according to the browsers weirdness?
I have decided to write along the specs, because I don't know what sort
of browsers my viewers are going to use in the future.
And with the growing availabilty of FF we will see IE's distribution
drop... so no need to be afraid of the above method


bernhard

 

[Bernhard Sturm]

She speaks the truth. The only no-JS solution uses the CSS hover
technique as seen in the Suckerfish examples.

hmm a bit confused: SpaceGirl said, that the Suckerfish examples do not
work, because they will not work on all browsers. You say she is right,
because the Suckerfish examples do work... help... did I misread something?


bernhard

 

[Bernhard Sturm]

None of those are drop-down lists...

but they form the basement of the solution
I know it's a pretty tough way, as it includes a lot of re-thinking: we
were all used to very complicated solutions: tables for layout, menus
with tables... and even forms as menus... a lot of JS coding. and
suddenly somebody comes and says: use lists as menus, because you can
tweak your lists into whatever you want, and a menu is... right a list!
now add a flavour of CSS2.0 to your list-soup and you will no longer
need your JavaScript...
(and you need 10 lines of javascript to make it work with IE


bernhard

 

[Bernhard Sturm]

so please: show it tu us. ;-)

Just your average menu. Following a main item delivers you to the page
that contains the collapsed menu. This is, of course, when the effect of
dropping down and up is unavailable.

according to my knowledge it's not
possible without the use of CSS. (something which has nothing to do with
JS, it belongs to HTML, and as a visitor you cannot switch it off
because security is bothering you

Plenty of browsers allow you to shut down CSS rendering.[/QUOTE]

no problem with the suckerfis examples: shut down css rendering and you
will have your colapsed menu-tree (because it's just a list). So if you
shut down CSS rendering I can assume you are not interested in nice
layouts... hence only in getting the content.. here we go: you have your
content. So no problem with this.

the suckerfish menus form a league on its own: they demonstrate how
powerful modern webdesign can be. no server-side, client-side hacks.
Just the application of straight foreward W3C specs and rules.

As a webdesigner you shouldn't panic if your menu looks bad in Netscape
4.x. I can only repeat myself here: think more along the lines: how can
I ensure that people will access my content regardless of the used UA?


bernhard

 

[Neal]

hmm a bit confused: SpaceGirl said, that the Suckerfish examples do not
work, because they will not work on all browsers. You say she is right,
because the Suckerfish examples do work... help... did I misread
something?

The suckerfish examples use CSS and HTML to get the effect. This works on
pretty much anything - except IE. Reason: IE doesn't do :hover on anything
but a.

So the examples include a snippet of JS to make it work. It will fail only
when IE is run w/o Js.

 

[Bernhard Sturm]

The suckerfish examples use CSS and HTML to get the effect. This works
on pretty much anything - except IE. Reason: IE doesn't do :hover on
anything but a.

So the examples include a snippet of JS to make it work. It will fail
only when IE is run w/o Js.

yes.. I propsed the suckerfish method, and I use it on almost any site.
so I know how it works (I have even written some small add-ons to it)
but SpaceGirl was not happy with the solution as it doesn't 'work' on
'any' browser...

nevermind the confusion ;-)

bernhard

 

[kchayka]

the nice thing about the suckerfish solution is, that it is fully
accessible even with js switched off, as it is based on a <ul><li> list.
up to now, this is the best solution to produce a rock-solid drop-down
menue according WAI accessibility rules.

I'd like to dispell the myth that having a site map on every page is
good for accessibility. It is not. If you were a keyboard user, you
might understand why.

 

[paul]

oh in fact it isn't that difficult



yes. that's the only way of doing this:
<ul>
<li>Remoras
<ul>
<li><a href="">Whalesucker</a></li>
<li><a href="">Marlinsucker</a></li>
<li><a href="">Ceylonese remora</a></li>
<li><a href="">Spearfish remora</a></li>
<li><a href="">Slender suckerfish</a></li>
</ul>
</li>
</ul>


together with this css code you have a working example:

ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 10em;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul { display: block; }

note: this is raw code... it works on css2.0 compliant browsers (hence
not in IE.. for IE you need special javascript treatment.. but just a
few lines will be necessary)

This sounds cool so I tried and it does not expand into a list with IE:
<http://www.edgehill.net/1/?SC=go.php&DIR=Misc/html-coding/drop-menu/css>
There is no way to see the options in IE, just the header.

 

[(Pete Cresswell)]

Per Bernhard Sturm:

this is javascript.. but have you read the article? it's only necessary
because of IE...

The example is really elegant-looking and I know nothing about this stuff.

Having said that, *only* IE...." seems to me like saying "*Only* 99.9 percent of
my users..."....