Menu bar for an inner fake window : Menu « GUI Components « JavaScript DHTML






Menu bar for an inner fake window


<html>
<head>
<title>JavaScript ToolBar Menu</title>
<!--
  http://sourceforge.net/projects/js-toolbar-menu/
  http://www.shanedevane.com
-->

<script language="Javascript">
<!--
//////////////////////////////////////////
//          //
//        shanedevane.net     //
//            - SFF -      //
//         2nd October 2002    //
//          //
//        IE browser toolbar menu  //
//         V 2 - July 2004    //
//          //
//////////////////////////////////////////

//init vars
var top_menu = new Array();
var menu_xpos = new Array();

var menu0_text = new Array();
var menu0_link = new Array();

var menu1_text = new Array();
var menu1_link = new Array();

var menu2_text = new Array();
var menu2_link = new Array();

var menu3_text = new Array();
var menu3_link = new Array();


//define vars
top_menu[0] = "Home";
top_menu[1] = "Portfolio";
top_menu[2] = "Sites";

//align 
menu_xpos[0] = 5;
menu_xpos[1] = 52;
menu_xpos[2] = 119;

//HOME menu
menu0_text[0] = "Main";
menu0_link[0] = "home.html";

menu0_text[1] = "Exit";
menu0_link[1] = "javascript:parent.document.location = parent.iframecontent.location";  //will only work when the current location is at the same server

//WEB SITES menu
menu1_text[0] = "shanedevane.com";
menu1_link[0] = "http://www.shanedevane.com";

menu1_text[1] = "freelanceireland.ie";
menu1_link[1] = "http://www.freelanceireland.ie";

//SEARCH ENGINES menu
menu2_text[0] = "google.com";
menu2_link[0] = "http://www.google.com";

menu2_text[1] = "Yahoo!";
menu2_link[1] = "http://www.yahoo.com";




//you can add more menu items as you need them






/////////////////////////////
// NO NEED TO CHANGE BELOW //
/////////////////////////////

var called = 0;
function sff_menu_main() {

  //code menu
  if (called == 0) {
  called = 1;
  write_out_menu_layers();

  //code nav bar
  } else if (called == 1) {
  called = 2;
  write_out_menu_bar();
  
  }

}




///////////////////
// SUB ROUNTINES //
///////////////////

function write_out_menu_bar() {

var code_top = "<table border=0 cellpadding=0 cellspacing=0 width=100%>";

code_top += "<tr>\n";
code_top += "<td class=\"qs_outerborder\">\n";
code_top += "<font class='qs_font'>\n";

code_top += "  <table border=0 cellpadding=0 cellspacing=0 width=100% height=24>\n";
code_top += "  <tr>\n";
code_top += "  <td class=\"qs_innerborder\">\n";

code_top += "    <table border=0 cellpadding=0 cellspacing=0 width=100%>\n";
code_top += "    <tr>\n";
code_top += "    <td width=3></td>\n";
code_top += "    <td>\n";

document.write(code_top);

  //for each item in menu
  for (var x = 0; x < top_menu.length; x++) {
  var code_button = "<input type=button onClick=\"toggle_layer('menu"+x+"',this,'SFF');\" onMouseover=\"button_hover(this);toggle_layer('menu"+x+"',this);\" onMouseout=\"button_hover(this)\" onFocus=\"this.blur()\" value=\" "+top_menu[x]+" \" class=\"buttonlink\">";
  document.write(code_button);
  }

var code_bottom = "    </td>";
code_bottom += "    </tr>\n";
code_bottom += "    </table>\n";

code_bottom += "  </td>\n";
code_bottom += "  </tr>\n";
code_bottom += "  </table>\n";

code_bottom += "</td>\n";
code_bottom += "</tr>\n";
code_bottom += "</table>\n";

document.write(code_bottom);

}

function write_out_menu_layers() {


  //for each item in menu
  for (var x = 0; x < top_menu.length; x++) {


  var layer_code = "<DIV id=\"menu"+x+"\" style='position: absolute; top:47px; left:1px; width:347px; height:190px; visibility:hidden'>";


  layer_code += "  <table border=0 cellpadding=0 cellspacing=0>\n";
  layer_code += "  <tr>\n";
  layer_code += "  <td class=\"fouterdarkborder\">\n";
  layer_code += "  <font class='qs_font'>\n";

  layer_code += "    <table border=0 cellpadding=0 cellspacing=0>\n";
  layer_code += "    <tr>\n";
  layer_code += "    <td class=\"finnerborder\" valign=top>\n";
  layer_code += "    <font class='qs_font'>\n";

  layer_code += "      <table border=0 cellpadding=0 cellspacing=0>\n";

          //sub items
          for (var y = 0; y < eval("menu" + x + "_text.length"); y++) {
          layer_code += "<tr>\n";
          layer_code += "<td height=19 onClick=\"toggle_layer();document.iframecontent.location='"+eval("menu"+x+"_link["+y+"]")+"'\" onMouseover=\"menu_hover(this,'0A246A')\" onMouseout=\"menu_hover(this)\">\n";


          layer_code += "<a href=\""+eval("menu"+x+"_link["+y+"]")+"\" target=\"iframecontent\" class=\"menulink\">";
          layer_code += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n";
          layer_code += eval("menu"+x+"_text["+y+"]");
          layer_code += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n";
          layer_code +="</a>\n";

          layer_code += "</td>\n";
          }



  layer_code += "      </tr> \n";
  layer_code += "      </table>\n";
  layer_code += "    </font>\n";
  layer_code += "    </td>\n";
  layer_code += "    </tr>\n";
  layer_code += "    </table>\n";

  layer_code += "  </td>\n";
  layer_code += "  </tr>\n";
  layer_code += "  </table>\n";

  layer_code += "  </td>\n";
  layer_code += "  </tr>\n";
  layer_code += "  </table>\n";

  layer_code += "</DIV>\n";
  

  //alert(layer_code);
  document.write(layer_code);
  }
}

var button_clicked = 0;

function toggle_layer(layername,xpos,clicked) {

if (clicked) {
button_clicked = 1;
} 

//make sure user clicks first
if (button_clicked == 1) {

  //Create generic variables
    //Netscape
    if (navigator.appName == "Netscape") {
    var doc = "document.layers.";
    var prop = ".visibility";
    var val_on = "show";
    var val_off = "hide";

    var propleft = ".left";

    //IE
    } else {
    var doc = "document.all.";
    var prop = ".style.visibility";
    var val_on = "visible";
    var val_off = "hidden";

    var propleft = ".style.left";
    }

  var site_layers = new Array();


  var x_position = 0;

  //name of all layers (text)
  for (var x = 0; x < top_menu.length; x++) {
  site_layers[x] = "menu"+x;
  }



    //turn on layers turn off other layers 
    for (var x = 0; x < site_layers.length; x++) {

      //turn on layer
      if (layername == site_layers[x]) {
      eval(doc+site_layers[x]+prop+" = "+'val_on'+";");

      x_position = menu_xpos[x];

      //set x pos
      eval(doc+site_layers[x]+propleft+" = "+x_position+";");

      } else {
      eval(doc+site_layers[x]+prop+" = "+'val_off'+";");
      }
    }

} //end button clicked

//reset
if (!layername) {
button_clicked = 0;
}

}

//args: cell, colour
var changedm = 0;
var old_colourm = "SFF";
var last_clickm = "SFF";

function menu_hover(cell,colour,clicked) {

  if (!clicked && cell != last_clickm) {


    //mouse on
    if (changedm == 0) {
    changedm = 1;
    old_colourm = cell.style.backgroundColor
    cell.style.backgroundColor=colour;

    //mouse off
    } else {


      if (!colour) {
      changedm = 0;  
      cell.style.backgroundColor=old_colourm;
      } else {
      cell.style.backgroundColor=colour;
      }
    }


  } else {
  
    //remove colour from last clicked
    if (last_clickm != "SFF" && cell != last_clickm) {
    last_clickm.style.backgroundColor="";
    }
  cell.style.backgroundColor=colour;
  last_clickm = cell;
  }


}





//args: cell, colour
var changed = 0;
var old_colour = "SFF";
var last_click = "SFF";

function button_hover(cell,clicked) {

  if (!clicked && cell != last_click) {


    //mouse on
    if (changed == 0) {
    changed = 1;
    old_colour = cell.style.borderTopColor

    cell.style.borderTopColor="FFFFFF";
    cell.style.borderLeftColor="FFFFFF";

    cell.style.borderBottomColor="808080";
    cell.style.borderRightColor="808080";

    //mouse off
    } else {


    changed = 0;  
    cell.style.borderTopColor="#D4D0C8";
    cell.style.borderLeftColor="#D4D0C8";

    cell.style.borderBottomColor="#D4D0C8";
    cell.style.borderRightColor="#D4D0C8";
    }


  } else {
  
    //remove colour from last clicked
    if (last_click != "SFF" && cell != last_click) {
    last_click.style.backgroundColor="";
    }

  cell.style.borderTopColor="FFFFFF";
  cell.style.borderLeftColor="FFFFFF";

  cell.style.borderBottomColor="808080";
  cell.style.borderRightColor="808080";
  last_click = cell;
  }


}








//////////////////
// DOCUMENATION //
//////////////////
/*
HOW TO USE

1.   Edit the "top_menu" javascript arrays above, for the main menu items
  delete and add values as you need.

2.   Set the distance appart for the "drop down menus", annoyingly there is no way
  to dyanmically do this. So the X position of the sub menus need to be hard coded.

3.  For each "top_menu" array item, you will need to create a "menu0_text" array value 
  and a "menu0_link" array value. Please see the examples above.


*/
-->
</script>
<style type="text/css">
.qs_toolbody     { 
        border:0;
        background-color:threedface;
      }






.qs_outerborder    { 
        border-top: none;
        border-left: solid threedshadow 1px;

        border-bottom: solid threedhighlight 1px;
        border-right: solid threedhighlight 1px;
      }
.qs_innerborder    { 
        border-top: none;
        border-left: solid threedhighlight 1px;

        border-bottom: solid threedshadow 1px;
        border-right: solid threedshadow 1px;
        background-color: threedface;
      }



.fouterborder    { 
        border-top: solid threedshadow 1px;
        border-left: solid threedshadow 1px;

        border-bottom: solid threedhighlight 1px;
        border-right: solid threedhighlight 1px;
      }
.finnerborder    { 
        border-top: solid threedhighlight 1px;
        border-left: solid threedhighlight 1px;

        border-bottom: solid threedshadow 1px;
        border-right: solid threedshadow 1px;
        background-color: threedface;
      }

.fouterdarkborder  { 
        border-top: none;
        border-left: none;

        border-bottom: solid threeddarkshadow 1px;
        border-right: solid threeddarkshadow 1px;
      }




.menubartext    {
        font-family: Tahoma;
        color:#000000;
        font-size: 11px;
      }


.outermainbody    { 
        border-top: solid threedshadow 1px;
        border-left: solid threedshadow 1px;

        border-bottom: solid threedhighlight 1px;
        border-right: solid threedhighlight 1px;
      }
.innermainbody    { 
        border-top: solid threeddarkshadow 1px;
        border-left: solid threeddarkshadow 1px;

        border-bottom: solid threedface 1px;
        border-right: solid threedface 1px;
        background-color: e6e6e6;
      }


.qs_font    { 
        font-size: 11px;
        font-family:Tahoma; 
        color: 000000;
      }
      
.buttonlink    {
        font-size:11px; 
        font-family:Tahoma; 
        color: #000000;

        background-color: buttonface;  

        border-top: solid buttonface 1px;
        border-left: solid buttonface 1px;

        border-bottom: solid buttonface 1px;
        border-right: solid buttonface 1px;

      }








a:link.menulink    { 
        font-size:11px; 
        font-family:Tahoma; 
        color: #000000;
        textDecorationNone;
      }
a:visited.menulink  { 
        font-size:11px; 
        font-family:Tahoma; 
        color: #000000;
        textDecorationNone;
      }

a:visited:hover.menulink{ 
        font-size:11px; 
        font-family:Tahoma; 
        color: #ffffff;
        textDecorationNone;
      }

a:hover.menulink  { 
        font-size:11px; 
        font-family:Tahoma; 
        color: #ffffff;
        textDecorationNone;
      }
</style>
</head>

<body class="qs_toolbody" scroll="no" topmargin=0 leftmargin=0>

<script language="JavaScript" type="text/javascript">
<!--

sff_menu_main();

//-->
</script>


<center>
<font class='qs_font'>

<table border=0 cellpadding=0 cellspacing=0 width=100% height=100%>
<tr>
<td>
<font class='qs_font'>

  <table border=0 cellpadding=0 cellspacing=0 width=100%>
  <tr>
  <td class="qs_outerborder">
  <font class='qs_font'>

    <table border=0 cellpadding=0 cellspacing=0 width=100% height=24>
    <tr>
    <td class="qs_innerborder" valign=top>
    <font class="spacer">&nbsp;</font>
    <font class="menubartext">

      <script language="JavaScript" type="text/javascript">
      <!--

      document.write(document.title);

      //-->
      </script>
    </font>
    </td>
    </tr>
    </table>


  </td>
  </tr>
  </table>

</td>
</tr>


<tr>
<Td>
<script language="JavaScript" type="text/javascript">
<!--

sff_menu_main();

//-->
</script>

</td>
</tr>

<tr>
<td height=100%>

    <table border=0 cellpadding=0 cellspacing=0 width=100% height=100%>
    <tr>
    <td class="outermainbody">
    <font class='qs_font'>
      <table border=0 cellpadding=0 cellspacing=0 width=100% height=100%>
      <tr>
      <td class="innermainbody" valign=top align=center>
      <font class='qs_font'>

      </td>
      </tr>
      </table>
    </td>
    </tr>
    </table>
</td>
</tr>
</table>
           
       








Related examples in the same category

1.Application Menubar Example
2.[DOM Menu] :: Example 1 :: Horizontal Menu
3.[DOM Menu] :: Example 2 :: KDE Keramik Style Menu
4.[DOM Menu] :: Example 3: Brainjar.com 'Revenge of the Menubar' Style Menu
5.[DOM Menu] Example 4: Vertical Menu
6.[DOM Menu] :: Example 5 :: Two Menus
7.[DOM Menu] :: Example 6 :: Flash Hiding
8.Fly in Menu item
9.Not too fancy menu with toolbar
10.Custom Contextual Menu(content sensitive)
11.Drop-Down Menus
12.Menu with sound
13.Menu based on Javascript
14.popup menu (content sensitive menu)
15.Complete Source Code for the Menu
16.Slide out menu
17.Dynamic menu: fly in
18.Menu and submenu
19.Slide out menu with i18N
20.Menu: XP, win 98 style
21.Simple drop-down menu example with layer
22.Build a simple fancy menu
23.Add/delete menu items
24.Customizable layout: customize menu layout
25.Vertical layout menu
26.Easy skinable menu with CSS
27.Menu Item properties
28.Direct link menu
29.Context menu: popup menu
30.Black Menu
31.Dropdown menu