bamboozled - tableless cross-browser menu thing

tableless cross-browser menu thing

[ bamboo ] 17:39, Tuesday, 5 October 2004

Webdesigning me? Nah... Just the old javascript/CSS/XHTML reality check every now and then.

So here it goes to Leonardo:

   1:<html>
   2:<head>
   3:<style>
   4:.body
   5:{
   6:    font-family: verdana;
   7:    font-size: 10pt;
   8:}
   9:
  10:.menuItem, .menuItemHover
  11:{    
  12:    background-color: blue;
  13:    font-weight: bold;
  14:    padding: 5px;
  15:    color: white;
  16:    display: inline;
  17:    cursor: pointer;
  18:}
  19:
  20:.menuItemHover
  21:{
  22:    background-color: lightblue;
  23:}
  24:</style>
  25:
  26:<script language="javascript">
  27:document.onmouseover = function(ev)
  28:{
  29:    var element = getEventTarget(ev);
  30:    if ("menuItem" == element.className)
  31:    {
  32:        element.className = "menuItemHover";
  33:    }
  34:}
  35:
  36:document.onmouseout = function(ev)
  37:{
  38:    var element = getEventTarget(ev);
  39:    if ("menuItemHover" == element.className)
  40:    {
  41:        element.className = "menuItem";
  42:    }
  43:}
  44:
  45:function getEventTarget(ev)
  46:{
  47:    return (ev && ev.target) || window.event.srcElement;
  48:}
  49:
  50:</script>
  51:</head>
  52:<body>
  53:
  54:<div id="menuBar">
  55:<div class="menuItem">
  56:<img src="images/arrow.gif" />
  57:About US
  58:</div>
  59:<div class="menuItem">
  60:<img src="images/arrow.gif" />
  61:Products
  62:</div>
  63:</div>
  64:
  65:
  66:</body>
  67:</html>

The same old few conclusions:

CSS has really nice features, how can be people not using it more?
tableless html is easier to read, easier to write, easier to change (at least if you are using jedit such as myself)
tableless html is easier to relayout (think skins)

so again, why do we still have deeply nested tables everywhere? Dreamweaver?

TrackBack

IMHO the javascript is completely unnecessary.
You could use something like

.menuItem:hover
{
background-color: lightblue;
}

Not sure about the compatibility, but works fine on IE and Firefox.

Cheers!

--hammett, October 7, 2004 11:21 PM