Menu Bar

[Total: 0    Average: 0/5]

This shows how to have a simple menu bar at the top of the window.

Head Code:

<script>

if(document.layers)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=track;
divref=(document.all)?"":"document.";
stlref=(document.all)?"style.":"";

function track(e){
var x=(document.all)?event.x:e.pageX;
var y=(document.all)?event.y:e.pageY;
if(x<1||x>65||y<3||y>73)eval(divref+"b."+stlref+"visibility='hidden'");     
if(x<80||x>145||y<3||y>73)eval(divref+"c."+stlref+"visibility='hidden'");  
if(x<160||x>225||y<3||y>73)eval(divref+"d."+stlref+"visibility='hidden'");
}

function reveal(menu){
eval(divref+menu+"."+stlref+"visibility='visible'");
}
</SCRIPT>

<STYLE TYPE="text/css">
BODY{color:black} A:link{color:white} A:visited{color:white} A:hover{color:red}

.bar{
  color        : white;
  position     : absolute;
  left         : 0;
  top          : 0px;
  width        : 780px; 
  height       : 20px;
  background   : steelblue;
  font-family  : verdana;
  font-size    : 10pt;
  border-color : white;
  border-width : 1px;
}

.menu
{
  position     : absolute;
  width        : 65px;
  height       : 50px;
  background   : steelblue;
  top          : 21px;
  visibility   : hidden;
  font-family  : verdana;
  font-size    : 10pt;
  border-color : white;
  border-width : 1px;
}

</STYLE>

Body Code:

<DIV ID="a" CLASS="bar">
<A HREF="#" ONMOUSEOVER="reveal('b')">&nbsp; Menu 1</A> |
<A HREF="#" ONMOUSEOVER="reveal('c')">&nbsp; Menu 2</A> &nbsp;  |
<A HREF="#" ONMOUSEOVER="reveal('d')">&nbsp; Menu 3</A> &nbsp;  | 
</DIV>
   
<DIV ID="b" CLASS="menu" STYLE="left:0">
<A HREF="#"> Item 1-A </A>
<A HREF="#"> Item 1-B </A>
<A HREF="#"> Item 1-C </A>
</DIV>

<DIV ID="c" CLASS="menu" STYLE="left:80">
<A HREF="#"> Item 2-A </A>
<A HREF="#"> Item 2-B </A>
<A HREF="#"> Item 2-C </A>
</DIV>
               
<DIV ID="d" CLASS="menu" STYLE="left:160">
<A HREF="#"> Item 3-A </A>
<A HREF="#"> Item 3-B </A>
<A HREF="#"> Item 3-C </A>
</DIV>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *