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.
The sheer amount of Javascript required was amazing
and frankly revolting.
Don't blame Javascript for the shortcommings of the users.
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.
That is to say, it is a sophomoric hack job, a hideous kludge.
Much code out there on the net is.
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.
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
