Dynamic menu: fly in : Menu « GUI Components « JavaScript DHTML






Dynamic menu: fly in

 <HTML>
<BODY>
<style REL="stylesheet" TYPE="text/css">
A.menu
  { font-family:Arial,Helvetica; font-weight:bold; color:green; text-decoration:underline; }
A.menu:hover
  { font-family:Arial,Helvetica; font-weight:bold; background-color:pink; }
A.menu:visited, A.menu:active
  { font-family:Arial,Helvetica; font-weight:bold; color:green; }
A.submenu
  { font-family:Arial,Helvetica; color:green; }
A.submenu:hover
  { font-family:Arial,Helvetica; background-color:pink; }
A.submenu:visited, A.submenu:active
  { font-family:Arial,Helvetica; color:green; }

</style>
<SCRIPT>
// JS-Menu 0.5.1 by Vitaly Polonetsky (faqer@topxioft.com) 
// GNU GENERAL PUBLIC LICENSE

//  ####################    SIZE / PLACE  CONFIGURATION    ####################
right_sided=0;                                      // Right sided (0-no,1-yes)
one_open_menu=0;                           // Show only one open menu at a time

right_side_margin=10;                               // HTML page's right margin
page_width=140;                                            // HTML page's width
top_menu=20;                             // Top location of the first main menu
left_main_menu=10;                               // Left location of main menus
left_sub_menu=20;                                 // Left location of sub menus
top_after_sub_menu=25;                          // Skip N pixels after sub menu
top_before_sub_menus=25;                       // Skip N pixels after main menu
top_after_sub_menus=30;                       // Skip N pixels before main menu

//  ####################    MENU  AMOUNT  CONFIGURATION    ####################
menu_len=4;                                               // Num. of main menus

var menucount;
menucount=new Array(menu_len+1);
menucount[0]=menu_len;
menucount[1]=2;                     // Num. of sub menus in the first main menu
menucount[2]=1;
menucount[3]=0;
menucount[4]=0;

var menu;
menu=new Array(menucount[0]+1);
for(i=1;i<=menucount[0];i++)
  menu[i] = new Array(menucount[i]+1);
menu[0]=new Array(menucount[0]+1);

//  #####################    MENU  TEXT  CONFIGURATION    #####################
menu[1][0]='SubMenu1';
menu[1][1]='Item1';
menu[1][2]='Item2';
menu[2][0]='SubMenu2';
menu[2][1]='Item';
menu[3][0]='<A HREF="http://www.java2s.com/">SingleItem1</A>';
menu[4][0]='SingleItem2';

// Public Variables
var timerevent=0;
var can_redraw=0;
//var net_ie=netscape_ie();
//var net6=netscape6();

    var agt=navigator.userAgent.toLowerCase();

    var is_major = parseInt(navigator.appVersion);
    var is_minor = parseFloat(navigator.appVersion);

    var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
                && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
                && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
    var is_nav2 = (is_nav && (is_major == 2));
    var is_nav3 = (is_nav && (is_major == 3));
    var is_nav4 = (is_nav && (is_major == 4));
    var is_nav4up = (is_nav && (is_major >= 4));
    var is_navonly      = (is_nav && ((agt.indexOf(";nav") != -1) ||
                          (agt.indexOf("; nav") != -1)) );
    var is_nav6 = (is_nav && (is_major == 5));
    var is_nav6up = (is_nav && (is_major >= 5));
    var is_gecko = (agt.indexOf('gecko') != -1);

    var is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
    var is_ie3    = (is_ie && (is_major < 4));
    var is_ie4    = (is_ie && (is_major == 4) && (agt.indexOf("msie 5")==-1) );
    var is_ie4up  = (is_ie && (is_major >= 4));
    var is_ie5    = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
    var is_ie5_5  = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));
    var is_ie5up  = (is_ie && !is_ie3 && !is_ie4);
    var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);

BuildMenu();
setTimeout('RedrawMenu();',500);


// ############################################################################


function RedrawMenu(menuindex)
{
  var layer_top=top_menu;
  var x1,y1;
  for(i=1;i<=menucount[0];i++)
  {
    if(menu[0][i]+''=='undefined')
    {
      menu[0][i]=-1;
      is_nav4?
      document.layers['menu'+i].top=top_menu+((i-1)/2)*((i-1)/2)*100:
      is_ie4?
      document.all('menu'+i).style.top=top_menu+(((i-1)/2)*((i-1)/2))*100:
      document.getElementById('menu'+i).style.top=top_menu+(((i-1)/2)*((i-1)/2))*100;
      if(!right_sided)
      {
        is_nav4?
        document.layers['menu'+i].left=-page_width:
  is_ie4?
        document.all('menu'+i).style.left=-page_width:  
        document.getElementById('menu'+i).style.left=-page_width;
      }
      else
      {
        is_nav4?
        document.layers['menu'+i].left=page_width:
  is_ie4?
        document.all('menu'+i).style.left=page_width:
        document.getElementById('menu'+i).style.left=page_width;
      }
      is_nav4?
      document.layers['menu'+i].visibility='show':
      is_ie4?
      document.all('menu'+i).style.visibility='visible':
      document.getElementById('menu'+i).style.visibility='visible';
      MoveLayer('menu'+i,left_main_menu,layer_top);
    }
    else
    {
      // SUB menus
      if((menu[0][i]==1)&&(!one_open_menu||can_redraw==1))
      {
        layer_top+=top_before_sub_menus;
        sub_menu_top=layer_top;
        add_top=top_before_sub_menus;
        for(j=1;j<=menucount[i];j++)
        {
          // SUB MENU LAYER HEADER
          if(is_nav4)
            document.layers['menu'+i+'submenu'+j].top=layer_top;
          else
            if(menuindex==i)
              is_ie4?
        document.all('menu'+i+'submenu'+j).style.top=layer_top:
        document.getElementById('menu'+i+'submenu'+j).style.top=layer_top;

          // SUB MENU LAYER FOOTER      
          if(j<menucount[i])
          {
            layer_top+=top_after_sub_menu;
            add_top+=top_after_sub_menu;
          }
        }

        if(menuindex==i)
        {
          // MOVE MAIN MENUS
          for(temp0=menucount[0];temp0>i;temp0--)
          {
            if(menu[0][temp0]==1)
              for(temp02=menucount[temp0];temp02>0;temp02--)
        {
                MoveLayer('menu'+temp0+'submenu'+temp02,'undefined',is_nav4?document.layers['menu'+temp0+'submenu'+temp02].top+add_top:net6px(is_ie4?document.all('menu'+temp0+'submenu'+temp02).style.top:document.getElementById('menu'+temp0+'submenu'+temp02).style.top)+add_top);
        }
            MoveLayer('menu'+temp0,'undefined',is_nav4?document.layers['menu'+temp0].top+add_top:net6px(is_ie4?document.all('menu'+temp0).style.top:document.getElementById('menu'+temp0).style.top)+add_top);
          }

          // BRING SUB MENUS
          for(j=1;j<=menucount[i];j++)
          {
            is_nav4?
            y2=document.layers['menu'+i+'submenu'+j].top:
            y2=net6px(is_ie4?document.all('menu'+i+'submenu'+j).style.top:document.getElementById('menu'+i+'submenu'+j).style.top);
            is_nav4?
            document.layers['menu'+i+'submenu'+j].top=sub_menu_top+((j-1)/2)*((j-1)/2)*100:
      is_ie4?
            document.all('menu'+i+'submenu'+j).style.top=sub_menu_top+(((j-1)/2)*((j-1)/2))*100:
            document.getElementById('menu'+i+'submenu'+j).style.top=sub_menu_top+(((j-1)/2)*((j-1)/2))*100;
            if(!right_sided)
            {
              is_nav4?
              document.layers['menu'+i+'submenu'+j].left=-page_width:
        is_ie4?
              document.all('menu'+i+'submenu'+j).style.left=-page_width:
              document.getElementById('menu'+i+'submenu'+j).style.left=-page_width;
            }
            else
            {
              is_nav4?
              document.layers['menu'+i+'submenu'+j].left=page_width:
        is_ie4?
              document.all('menu'+i+'submenu'+j).style.left=page_width:
              document.getElementById('menu'+i+'submenu'+j).style.left=page_width;
            }
            is_nav4?
            document.layers['menu'+i+'submenu'+j].visibility='show':
      is_ie4?
            document.all('menu'+i+'submenu'+j).style.visibility='visible':
            document.getElementById('menu'+i+'submenu'+j).style.visibility='visible';
            !right_sided?
            MoveLayer('menu'+i+'submenu'+j,left_sub_menu,y2):
            MoveLayer('menu'+i+'submenu'+j,left_sub_menu-right_side_margin,y2);
          }
        }
      }
      else
      {
        if(!(one_open_menu&&menuindex==i&&menu[0][menuindex]==1))
        if(!(one_open_menu&&menuindex!=i&&menu[0][i]==-1))
        {
          menu[0][i]=-1;
          add_top=-top_before_sub_menus;
          for(j=1;j<=menucount[i];j++)
          {
            if((menuindex==i)||(one_open_menu))
            {
              if(!right_sided)
        {
                is_ie4?
    MoveLayer('menu'+i+'submenu'+j,-page_width,layer_top+top_before_sub_menus+((j-1)/2)*((j-1)/2)*100,"document.all('menu"+i+"submenu"+j+"').style.visibility=\"hidden\";"):
    MoveLayer('menu'+i+'submenu'+j,-page_width,layer_top+top_before_sub_menus+((j-1)/2)*((j-1)/2)*100,"document.getElementById('menu"+i+"submenu"+j+"').style.visibility=\"hidden\";");
        }
        else
        {
                is_ie4?
                MoveLayer('menu'+i+'submenu'+j,page_width,layer_top+top_before_sub_menus+((j-1)/2)*((j-1)/2)*100,"document.all('menu"+i+"submenu"+j+"').style.visibility=\"hidden\";"):
                MoveLayer('menu'+i+'submenu'+j,page_width,layer_top+top_before_sub_menus+((j-1)/2)*((j-1)/2)*100,"document.getElementById('menu"+i+"submenu"+j+"').style.visibility=\"hidden\";");
        }
              if(is_nav4)
                document.layers['menu'+i+'submenu'+j].visibility="hide";
            }

            if(j<menucount[i])
            {
              add_top-=top_after_sub_menu;
            }
          }

          // MOVE MAIN MENUS
          if(menuindex==i||one_open_menu)
            for(temp0=i+1;temp0<=menucount[0];temp0++)
            {
              MoveLayer('menu'+temp0,'undefined',is_nav4?document.layers['menu'+temp0].top+add_top:net6px(is_ie4?document.all('menu'+temp0).style.top:document.getElementById('menu'+temp0).style.top)+add_top);
              if(menu[0][temp0]==1)
                for(temp02=1;temp02<=menucount[temp0];temp02++)
                  MoveLayer('menu'+temp0+'submenu'+temp02,'undefined',is_nav4?document.layers['menu'+temp0+'submenu'+temp02].top+add_top:net6px(is_ie4?document.all('menu'+temp0+'submenu'+temp02).style.top:document.getElementById('menu'+temp0+'submenu'+temp02).style.top)+add_top);
            }
        }
      }
    }
    layer_top+=top_after_sub_menus;
  }

  // OPEN ONE MENU
  if(one_open_menu&&menu[0][menuindex]==1)
  {
    if(can_redraw==1)
      can_redraw=0;
    else
    {
      can_redraw=1;
      timerevent+=10;
      setTimeout('RedrawMenu('+menuindex+'); timerevent-=10;',timerevent);
    }
  }
}

function BuildMenu()
{
  var layer_top=top_menu;
  for(i=1;i<=menucount[0];i++)
  {
    // MAIN MENU LAYER HEADER
    is_nav4?
    document.writeln('<LAYER ID="menu'+i+'" VISIBILITY="hide" TOP='+layer_top+' LEFT='+left_main_menu+' WIDTH='+(page_width-left_main_menu-right_side_margin)+'>'):
    document.writeln('<DIV ID="menu'+i+'" BORDER=1 STYLE="visibility:hidden;position:absolute;top:'+layer_top+'px;left:'+left_main_menu+'px;">');

    if(right_sided)
    {
      is_nav4?
      document.writeln('<DIV ALIGN="right">'):
      document.writeln('<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH="'+(page_width-left_main_menu-right_side_margin)+'px"><TR><TD ALIGN="right">');
    }

    // MAIN MENU LAYER BODY
    if(menucount[i]>0)
    {
      is_ie4up||is_nav6up?
      document.write('<A HREF="javascript:open_close_sub_menus('+i+');" CLASS="menu" onMouseOver="setTimeout(\'self.status=\\\''+menu[i][0]+'\\\';\',1);" onMouseOut="self.status=\'\';">'):
      document.write('<A HREF="javascript:open_close_sub_menus('+i+');" CLASS="menu" onMouseOver="self.status=\''+menu[i][0]+'\'; return true;" onMouseOut="self.status=\'\'; return true;">');
    }
    document.write(menu[i][0]);
    if(menucount[i]>0)
      document.write('</A>');
    document.writeln();

    // MAIN MENU LAYER FOOTER
    if(right_sided)
    {
      is_nav4?
      document.writeln('</DIV>'):
      document.writeln('</TD></TR></TABLE>');
    }

    is_nav4?
    document.writeln('</LAYER>'):
    document.writeln('</DIV>');

    // SUB MENUS
    for(j=1;j<=menucount[i];j++)
    {
      // SUB MENU LAYER HEADER
      is_nav4?
      document.writeln('<LAYER ID="menu'+i+'submenu'+j+'" VISIBILITY="hide" TOP='+layer_top+' LEFT='+left_sub_menu+' WIDTH='+(page_width-left_sub_menu-right_side_margin)+'>'):
      document.writeln('<DIV ID="menu'+i+'submenu'+j+'" STYLE="visibility:hidden;position:absolute;top:'+layer_top+'px;left:'+left_sub_menu+'px;">');

      if(right_sided)
      {
  is_nav4?
        document.writeln('<DIV ALIGN="right">'):
        document.writeln('<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH="'+(page_width-left_sub_menu-right_side_margin)+'px"><TR><TD ALIGN="right">');
      }

      // SUB MENU LAYER BODY
      document.writeln(menu[i][j]+'<BR>');

      // SUB MENU LAYER FOOTER
      if(right_sided)
      {
  is_nav4?
        document.writeln('</DIV>'):
        document.writeln('</TD></TR></TABLE>');
      }

      is_nav4?
      document.writeln('</LAYER>'):
      document.writeln('</DIV>');
    }
    layer_top+=top_after_sub_menus;
  }
}

function MoveLayer(layer_name,left,top,after_move_action)
{
  var dont_move=0;
  index_menu=layer_name.indexOf("menu");
  index_submenu=layer_name.indexOf("submenu");
  name_length=layer_name.length;
  if(index_menu==0)
  {
    if(index_submenu!=-1)
    {
      if(menu[layer_name.substr(index_menu+4,index_submenu-4)][layer_name.substr(index_submenu+7,name_length)]=="")
        dont_move=1;
    }
    else
    {
      if(menu[layer_name.substr(index_menu+4,name_length)][0]=="")
        dont_move=1;
    }
  }
  if(dont_move!=1)
  {
    layer=is_nav4?document.layers[layer_name]:is_ie4?document.all(layer_name):document.getElementById(layer_name);
    x1=is_nav4?document.layers[layer_name].left:eval(is_ie4?document.all(layer_name).style.pixelLeft:document.getElementById(layer_name).style.pixelLeft);
    y1=is_nav4?document.layers[layer_name].top:eval(is_ie4?document.all(layer_name).style.pixelTop:document.getElementById(layer_name).style.pixelTop);
    if(left+''=='undefined')
      left=x1;
    if(top+''=='undefined')
      left=y1;
    // Netscape 6:
    if(x1+''=='undefined')
      x1=net6px(is_ie4?document.all(layer_name).style.left:document.getElementById(layer_name).style.left);
    if(y1+''=='undefined')
      y1=net6px(is_ie4?document.all(layer_name).style.top:document.getElementById(layer_name).style.top);
    x2=left;
    y2=top;
    speed=30;
    if(is_nav4) waitspeed=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))/110*50;
    for(temp=0;temp<speed;temp++)
    {
      // MOVE ACTION
      if(is_nav4)
      {
        layer.left=x1-(x1-x2)/speed*temp;
        layer.top=y1-(y1-y2)/speed*temp;
        for(temp2=0;temp2<waitspeed*5;temp2++);
      }
      else
      {
        timerevent+=10;
  is_ie4?
        setTimeout('document.all(\''+layer_name+'\').style.left='+(x1-(x1-x2)/speed*temp)+'; document.all(\''+layer_name+'\').style.top='+(y1-(y1-y2)/speed*temp)+'; timerevent-=10;',timerevent):
        setTimeout('document.getElementById(\''+layer_name+'\').style.left='+(x1-(x1-x2)/speed*temp)+'; document.getElementById(\''+layer_name+'\').style.top='+(y1-(y1-y2)/speed*temp)+'; timerevent-=10;',timerevent);
      }
    }

    if(is_nav4)
    {
      layer.left=x2;
      layer.top=y2;
    }
    else
    {
      timerevent+=10;
      is_ie4?
      setTimeout('document.all(\''+layer_name+'\').style.left='+x2+'; document.all(\''+layer_name+'\').style.top='+y2+'; timerevent-=10;',timerevent):
      setTimeout('document.getElementById(\''+layer_name+'\').style.left='+x2+'; document.getElementById(\''+layer_name+'\').style.top='+y2+'; timerevent-=10;',timerevent);

      if(after_move_action)
      {
        timerevent+=10;
        setTimeout(after_move_action+" timerevent-=10;",timerevent);
      }
    }
  }
}

function open_close_sub_menus(menuindex)
{
  timerevent+=10;
  setTimeout("open_close_sub_menus_call("+menuindex+"); timerevent-=10;",timerevent);
}

function open_close_sub_menus_call(menuindex)
{
  menu[0][menuindex]==-1?menu[0][menuindex]=1:menu[0][menuindex]=-1;
  RedrawMenu(menuindex);
}

function net6px(value)
{
  var text=value;
  var length=text.length;
  var retval=text.substr(0,length-2);
  retval=retval*1;
  return retval;
}

</SCRIPT>
</BODY>
</HTML>


           
       








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.Menu bar for an inner fake window
9.Fly in Menu item
10.Not too fancy menu with toolbar
11.Custom Contextual Menu(content sensitive)
12.Drop-Down Menus
13.Menu with sound
14.Menu based on Javascript
15.popup menu (content sensitive menu)
16.Complete Source Code for the Menu
17.Slide out menu
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