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

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » GUI Components » Menu 
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[inew 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.java2java.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=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=CELLPADDING=CELLSPACING=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=CELLPADDING=CELLSPACING=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_nav4waitspeed=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
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.