Help - Search - Member List - Calendar
Full Version: when will we have pulldown/popup menus for (D)HTML without ugly kludges?
WorkTheWeb Forums > Webmaster Resources > JavaScript Help
Support our Sponsors!
flarkblark
I recently had the displeasure of looking at the code
required to implement the pop-up menus used in a pulldown
menu system for a webpage.

The sheer amount of Javascript required was amazing
and frankly revolting. It is as though the software
"engineers" have been thrown out and replaced with
"programmers". That is to say, it is a sophomoric hack job,
a hideous kludge.

When oh when will someone finally just update HTML
to support pulldown menus and menus that pop-up in other
directions? Every GUI system has them in some form,
but HTML and Javascript, which are used to build Web
GUIs, do not.

David Dorward
flarkblark wrote:

QUOTE
I recently had the displeasure of looking at the code
required to implement the pop-up menus used in a pulldown
menu system for a webpage.

The sheer amount of Javascript required was amazing
and frankly revolting.

It isn't really that bad. What makes it bad is a combination of people
writing bad code, and people trying to support obsolete browsers.

QUOTE
When oh when will someone finally just update HTML
to support pulldown menus and menus that pop-up in other
directions?

XHTML 2 could come with navigational lists.

QUOTE
Every GUI system has them in some form,

HTML is _not_ a GUI system.

--
David Dorward http://dorward.me.uk/

Lasse Reichstein Nielsen
[Email Removed] (flarkblark) writes:

QUOTE
I recently had the displeasure of looking at the code
required to implement the pop-up menus used in a pulldown
menu system for a webpage.

There are a lot of bad code out there.

QUOTE
The sheer amount of Javascript required was amazing
and frankly revolting.

Don't blame Javascript for the shortcommings of the users.

QUOTE
It is as though the software "engineers" have been thrown out and
replaced with "programmers".

Absolutely. When it comes to web "programming", a lot of people with
little or no programming education are trying to get their pages to
work, and the results are, predictably, not good programming. So,
"programmers" is overdoing it.

QUOTE
That is to say, it is a sophomoric hack job, a hideous kludge.

Much code out there on the net is.

QUOTE
When oh when will someone finally just update HTML to support
pulldown menus and menus that pop-up in other directions?

Hopefully never. If you want to create applications, use an
application framework, e.g., Java.

QUOTE
Every GUI system has them in some form, but HTML and Javascript,
which are used to build Web GUIs, do not.

HTML is *not* a GUI system. It is a *document* representation format.
CSS is a document presentation format. Javascript is allowed to change
presentation and representation of a document, but a document, no matter
how dynamic, isn't a GUI, nor is it meant to be.

The big problem here is that people are using the web to create
applications, not documents. While there are reasons for doing that, I
personally don't think HTML will ever be the appropriate format for
that. Only time will tell what format will claim that niche, but
Microsoft is pushing IE as the recipient for whatever technology will
be used, and .net as their suggested technology.

And honestly, how hard can a pulldown menu be? A three line function
and two event handlers per menu, that is all the Javascript that is
needed. Add some CSS to make it look better.

---
<style type="text/css">
.menu {height:1em;}
.menuentry {
width:8em;
float:left;
}
.menu a {
display:block;
text-decoration:none;
background-color:#000040;
color:white;
}
.menu a:hover {
background-color:#004040;
color:white;
}

.submenu {
width:8em;
position:absolute;
display:none;
}
.submenu a {
background-color:#8080c0;
color:black;
}
.submenu a:hover {
background-color:#80c0c0;
color:black;
}
</style>
<script type="text/javascript">
function showSubmenu(id,vis) {
document.getElementById(id).style.display=(vis?"block":"none");
}
</script>
<div class="menu">
<div class="menuentry"
onmouseover="showSubmenu('submenu1',true);"
onmouseout="showSubmenu('submenu1',false);">
<a href="...">Main menu 1</a>
<div id="submenu1" class="submenu">
<a href="...">Menu entry 1</a>
<a href="...">Menu entry 2</a>
<a href="...">Menu entry 3</a>
<a href="...">Menu entry 4</a>
</div>
</div>

<div class="menuentry"
onmouseover="showSubmenu('submenu2',true);"
onmouseout="showSubmenu('submenu2',false);">
<a href="...">Main menu 2</a>
<div id="submenu2" class="submenu">
<a href="...">Menu entry 5</a>
<a href="...">Menu entry 6</a>
<a href="...">Menu entry 7</a>
<a href="...">Menu entry 8</a>
<a href="...">Menu entry 9</a>
</div>
</div>
</div>
---
Tested it IE6, Mozilla FB and Opera 7.2.

Sure, you can make it hard on yourself by trying to make it looke the
same in every obsolete browser in existence (Netscape 4 and IE 4 are
prime examples), but Javscript code like the above actually fails
gracefully (just as if Javascript is not available), as long as the
"Main Menu" links gives access to the sub categories.

The CSS fails worse in Netscape 4, but that's not really surpricing.

Don't blame Javascript/HTML for the people who use it.
/L
--
Lasse Reichstein Nielsen - [Email Removed]
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

John G Harris
In article <[Email Removed]>, flarkblark
<[Email Removed]> writes
QUOTE
I recently had the displeasure of looking at the code
required to implement the pop-up menus used in a pulldown
menu system for a webpage.

The sheer amount of Javascript required was amazing
and frankly revolting. It is as though the software
"engineers" have been thrown out and replaced with
"programmers". That is to say, it is a sophomoric hack job,
a hideous kludge.

When oh when will someone finally just update HTML
to support pulldown menus and menus that pop-up in other
directions? Every GUI system has them in some form,
but HTML and Javascript, which are used to build Web
GUIs, do not.

Tim Berners-Lee became famous by inventing a way of viewing documents.

Why don't you become famous by inventing a way of running interactive
GUI applications.

John
--
John Harris

flarkblark
QUOTE
When oh when will someone finally just update HTML to support
pulldown menus and menus that pop-up in other directions?

Hopefully never. If you want to create applications, use an
application framework, e.g., Java.

What I was getting at is that given GUIs are being done for the
web, then a revised markup language or a new one is needed to
meet that demand. Java is slow and bulky and buggy. By defining
additions to HTML or a new ML, users could benefit greatly
and get on with their GUIs.

As for HTML being a document language, a qualification is
needed: it is a web document language. A normal document
language has concepts like page breaks, multiple columns etc
which HTML does not. Furthermore most browsers don't even
print it very well, so really it is a web document language
for emphemeral text, not for serious documentation.

It really ought to be scrapped or seriously revised, IMHO.

QUOTE
Don't blame Javascript/HTML for the people who use it.

No but I can certainly blame the larger community for
not providing a decent markup language for GUIs.

flarkblark
QUOTE
<style type="text/css"
.menu {height:1em;}
.menuentry {
width:8em;
float:left;
}
.menu a {
display:block;
text-decoration:none;
background-color:#000040;
color:white;
}
.menu a:hover {
background-color:#004040;
color:white;
}

.submenu {
width:8em;
position:absolute;
display:none;
}
.submenu a {
background-color:#8080c0;
color:black;
}
.submenu a:hover {
background-color:#80c0c0;
color:black;
}
</style
<script type="text/javascript"
function showSubmenu(id,vis) {
document.getElementById(id).style.display=(vis?"block":"none");
}
</script
<div class="menu"
<div class="menuentry"
onmouseover="showSubmenu('submenu1',true);"
onmouseout="showSubmenu('submenu1',false);"
<a href="...">Main menu 1</a
<div id="submenu1" class="submenu"
<a href="...">Menu entry 1</a
<a href="...">Menu entry 2</a
<a href="...">Menu entry 3</a
<a href="...">Menu entry 4</a
</div
</div

<div class="menuentry"
onmouseover="showSubmenu('submenu2',true);"
onmouseout="showSubmenu('submenu2',false);"
<a href="...">Main menu 2</a
<div id="submenu2" class="submenu"
<a href="...">Menu entry 5</a
<a href="...">Menu entry 6</a
<a href="...">Menu entry 7</a
<a href="...">Menu entry 8</a
<a href="...">Menu entry 9</a
</div
</div
</div
---
Tested it IE6, Mozilla FB and Opera 7.2.

Incidentally, this approach doesn't work properly in Mozilla Firebird.
When the pointer leaves the submenu, the submenu doesn't disappear.

Albert Wagner
On 5 Oct 2003 13:15:43 -0700
[Email Removed] (flarkblark) wrote:
<snip>
QUOTE
No but I can certainly blame the larger community for
not providing a decent markup language for GUIs.

How so? Is this something you're willing to pay for? Or did you expect
someone else to do it.


--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)

flarkblark
QUOTE
Tim Berners-Lee became famous by inventing a way of viewing documents.

Why don't you become famous by inventing a way of running interactive
GUI applications.

Because this is a matter for the standards organization to deal with,
whereupon all those who kneel and pray five times per day to Silicon Valley,
or wherever W3C is located, will see their wisdom and implement the
feature in their browsers.

What you are effectively suggesting is that I create a new browser
for a GUI markup language, which is a much much bigger task than anything
Tim B-L ever did.

Lasse Reichstein Nielsen
[Email Removed] (flarkblark) writes:

QUOTE
Incidentally, this approach doesn't work properly in Mozilla Firebird.
When the pointer leaves the submenu, the submenu doesn't disappear.

Yes, I see it now. It is not always a problem, but sometimes, the
mouseout event isn't triggered when you leave the element. Odd.

/L
--
Lasse Reichstein Nielsen - [Email Removed]
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Csaba2000
Yes, I generally agree.

It's a matter of degree. Once one has bought into the notion
of accepting user input, the question becomes what types
of elements should one (the standards body) allow. Should
checkboxes which can be shown as "unset" be allowed?
Should multi-select SELECT elements be allowed? Note
that <BUTTON> is not one of the original input elements.
Also, note that radio buttons are equivalent to single
selection select elements while checkboxes are equivalent
(as far as results produced) to multi-select SELECT elements,
so why have both? Ultimately, the answer is one of
convenience.

Do we pay for not having the CMM (cascading menu manager)?
In Spades, because so many web sites have them, and this is
a wheel that is constantly reinvented and every reinvention is
developer time. I think this was not so very well thought out,
but it seems not to be so well thought out in windows either.

And as long as I'm handing out opinions so easily, let me add
that the other GUI that I really miss is (user definable, natch)
multi button alert boxes, which I miss on windows, too.

oPining in New York,
Csaba Gabor


PHP Help | Linux Help | Web Hosting | Reseller Hosting | SSL Hosting
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2005 Invision Power Services, Inc.