The Beest Codes

Jump to Comments

Although the Wildebeest is currently in the throes of final exams, he has been able to find a few quiet moments to relieve some stress by playing around with javascript. In addition, he has been undaunted by the fact that all major keyboard manufacturers continue to practice blatant discrimination against those with non-standard manual endowments. Ok, designing a keyboard for people with cloven hooves may not necessarily increase your bottom line, but society could definitely stand to broaden its conceptions of manual identity to include non-traditional paradigms of digital configuration. I mean, how’s a Beest supposed to get ahead when The Man is always holding him down?

Nevertheless, he has managed to bang out a few lines of code, and it has brought back pleasant memories of messing around with BASIC in the early 90s. Although he’s pretty sure all he managed to write back then were programs that would count to ten and then output a randomly generated number for good measure.

Anyway, this is a navigation bar with a set of sub-menus that drop down when a user mouses over them (ok, not the most original thing in the world, but you have to start somewhere). Here’s the code (formatting has been screwed up by WordPress):

function change() {
    var length=document.getElementById('nav').childNodes.length;
		for (i=0; i<=length; i++)  {
			var sm=document.getElementById('submenu'+i)
     		if (sm)
				{sm.style.display='none';}
		}
		for (i=0; i<=length-1; i++) {
			var dropmenu=document.getElementById('nav').childNodes[i];
			dropmenu.onmouseover=function ()
			    {
          if (this.getElementsByTagName('ul')[0])
          {this.getElementsByTagName('ul')[0].style.display='block';}
          }
 			dropmenu.onmouseout=function ()
          {
          if (this.getElementsByTagName('ul')[0])
          {this.getElementsByTagName('ul')[0].style.display='none';}
          }
		}
}
window.onload=change;

The HTML should be a series of nested unordered lists, with the parent getting an id of “nav” and each sub-menu getting an id of “submenuX” (submenu0, submenu1, etc…)

<ul id="nav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Drop-Down Stuff</a>
    <ul id="submenu0">

      <li><a href="#">Item One</a></li>
      <li><a href="#">Item Two</a></li>
      <li><a href="#">Item Three</a></li>
    </ul>
  </li>
  <li><a href="#">Fishies</a>
    <ul id="submenu1">
      <li><a href="#">One Fish</a></li>

      <li><a href="#">Two Fish</a></li>
      <li><a href="#">Red Fish</a></li>
      <li><a href="#">Blue Fish</a></li>
    </ul>
  </li>
  <li><a href="#">Another Menu</a>
    <ul id="submenu2">

      <li><a href="#">Link One</a></li>
      <li><a href="#">Link Two</a></li>
    </ul>
  </li>
</ul>

And that’s pretty much it. You can see them in action (in a very basic way) here, and if there are any comments or suggestions from those with much more experience than the Wildebeest they will be most welcome.

2 Comments

Filed under New Fangled Stuff