Programming Wiki: Dynamic Collapsable/Expandable Menus

Programming Wiki : DynamicMenus

WikiHomePage :: Categories :: PageIndex :: RecentChanges :: RecentlyCommented :: Login/Register

Dynamic Collapsable/Expandable Menus

JavaScript


Found a much better way of doing this with events and toggle() javascript functions as described here:
http://www.dustindiaz.com/top-ten-javascript/


These code snippets describe how I created menus that can collapse and expand. I use javascript for the collapse/expand functionality and php for feeding the menu code into the web page. This makes it so that when you want to modify the menu you will only have to change the code in one place. I was using SSI for that and it works fine also.

This code will describe the menus on my index page at http://www.hypexr.org.

I have variables that are holding images for the roll over effect that I want preloaded so I keep them in an individual file that will be inserted into the HEAD area of the html code. Any functions can be thrown in here also.

menu_header.html
<script language="javascript" type="text/javascript">
// LOAD THE "ON" BUTTONS
i0on=new Image();  i0on.src="./gfx/m_top_h.png";
i1on=new Image();  i1on.src="./gfx/mb_index_h.png";
i2on=new Image();  i2on.src="./gfx/mb_gnu_h.png";
i3on=new Image();  i3on.src="./gfx/mb_programming_h.png";
i4on=new Image();  i4on.src="./gfx/mb_articles_h.png";
i5on=new Image();  i5on.src="./gfx/mb_photoblog_h.png";
i6on=new Image();  i6on.src="./gfx/mb_discussion_h.png";
i7on=new Image();  i7on.src="./gfx/mb_links_h.png";
i8on=new Image();  i8on.src="./gfx/mb_contact_h.png";
mvon=new Image();  mvon.src="./gfx/mm_v_h.png";

// LOAD THE "OFF" BUTTONS
i0off=new Image();  i0off.src="./gfx/m_top.png";
i1off=new Image();  i1off.src="./gfx/mb_index.png";
i2off=new Image();  i2off.src="./gfx/mb_gnu_g.png";
i3off=new Image();  i3off.src="./gfx/mb_programming.png";
i4off=new Image();  i4off.src="./gfx/mb_articles_g.png";
i5off=new Image();  i5off.src="./gfx/mb_photoblog.png";
i6off=new Image();  i6off.src="./gfx/mb_discussion_g.png";
i7off=new Image();  i7off.src="./gfx/mb_links.png";
i8off=new Image();  i8off.src="./gfx/mb_contact_g.png";
mvoff=new Image();  mvoff.src="./gfx/mm_v.png";

// FUNCTIONS TO SWITCH THE BUTTONS ON MOUSE EVENTS
function imgOn(whichButton) {
  document.images[whichButton].src=eval(whichButton+"on.src");
}
function imgOff(whichButton) {
  document.images[whichButton].src=eval(whichButton+"off.src");
}

// Functions to colapse and raise menu
function menuColap(whichMenu) {
  if( whichMenu == "main" ) {
    document.getElementById('main_menu').innerHTML = "<a href='javascript:void(0)' onClick=menuExp('main'); return true; onmouseover=imgOn('mv'); window.status=''; return true; onmouseout=imgOff('mv'); window.status=''; return true;><img border=0 src=./gfx/mm_v.png alt='Main Menu Shrunk' name='mv'></a>";
  }
  if( whichMenu == "linux" ) {
    document.getElementById('linux_menu').innerHTML = "<a href='javascript:void(0)' onClick=menuExp('linux'); return true; onmouseover=imgOn('mlv'); window.status=''; return true; onmouseout=imgOff('mlv'); window.status=''; return true;><img border=0 src=./gfx/ml_v.png alt='Linux Menu Shrunk' name='mlv'></a>";
    document.getElementById('lines').innerHTML = "<img border='0' src='./gfx/lines2.png'>";
  }
  if( whichMenu == "programming" ) {
    document.getElementById('programming_menu').innerHTML = "<a href='javascript:void(0)' onClick=menuExp('programming'); return true; onmouseover=imgOn('mpv'); window.status=''; return true; onmouseout=imgOff('mpv'); window.status=''; return true;><img border=0 src=./gfx/mp_v.png alt='Programming Menu Shrunk' name='mpv'></a>";
  }
}

function menuExp(whichMenu) {
  if( whichMenu == "main" ) {
    document.getElementById('main_menu').innerHTML = getFile("menu.html");
  }
  if( whichMenu == "linux" ) {
    document.getElementById('linux_menu').innerHTML = getFile("linux_menu.html");
    document.getElementById('lines').innerHTML = "<img border='0' src='./gfx/lines.png'>";
  }
  if( whichMenu == "programming" ) {
    document.getElementById('programming_menu').innerHTML = getFile("programming_menu.html");
  }
}

function getFile(filename)
  { oxmlhttp = null;
    try
      { oxmlhttp = new XMLHttpRequest();
        oxmlhttp.overrideMimeType("text/xml");
      }
    catch(e)
      { try
          { oxmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
          }
        catch(e)
          { return null;
          }
      }
    if(!oxmlhttp) return null;
    try
      { oxmlhttp.open("GET",filename,false);
        oxmlhttp.send(null);
      }
    catch(e)
      { return null;
      }
    return oxmlhttp.responseText;
  }
</script>


I first load all of the images into variables. Then I have functions that will be called within the html <a href> tag to do the rollover effect.
menuColap replaces an area of code that I have defined within a div/span area with the id set to either main_menu, linux_menu, or programming_menu. When these functions are called (on a mouse click on the top of the menu) I will pass menu, linux, or programming so that it will know which menu to replace the code for.
menuExp uses the getFile function to suck the html code that displays the menu into a variable and then menuExp displays it. getFile works fine for me in current firefox and ie versions but it was no go in Opera.

Here are my other header files that just load the images for the other menus into variables. I have it broken up because not all of the menus are used on all of the pages.

linux_menu_header.html
<script language="javascript" type="text/javascript">
// LOAD THE "ON" BUTTONS
il0on=new Image();  il0on.src="./gfx/ml_top_h.png";
il1on=new Image();  il1on.src="./gfx/mbl_linux_documents_h.png";
il2on=new Image();  il2on.src="./gfx/mbl_linux_links_h.png";
il3on=new Image();  il3on.src="./gfx/mbl_cartoons_h.png";
mlvon=new Image();  mlvon.src="./gfx/ml_v_h.png";

// LOAD THE "OFF" BUTTONS
il0off=new Image();  il0off.src="./gfx/ml_top.png";
il1off=new Image();  il1off.src="./gfx/mbl_linux_documents.png";
il2off=new Image();  il2off.src="./gfx/mbl_linux_links_g.png";
il3off=new Image();  il3off.src="./gfx/mbl_cartoons.png";
mlvoff=new Image();  mlvoff.src="./gfx/ml_v.png";
</script>


programming_menu_header.html
<script language="javascript" type="text/javascript">
// LOAD THE "ON" BUTTONS
ip0on=new Image();  ip0on.src="./gfx/mp_top_h.png";
ip1on=new Image();  ip1on.src="./gfx/mbp_projects_h.png"
ip2on=new Image();  ip2on.src="./gfx/mbp_wiki_h.png"
ip3on=new Image();  ip3on.src="./gfx/mbp_resources_h.png"
mpvon=new Image();  mpvon.src="./gfx/mp_v_h.png"

// LOAD THE "OFF" BUTTONS
ip0off=new Image();  ip0off.src="./gfx/mp_top.png";
ip1off=new Image();  ip1off.src="./gfx/mbp_projects.png"
ip2off=new Image();  ip2off.src="./gfx/mbp_wiki_g.png"
ip3off=new Image();  ip3off.src="./gfx/mbp_resources.png"
mpvoff=new Image();  mpvoff.src="./gfx/mp_v.png"
</script>



So now all of our header information can be imported into the head section of the page. We are going to import the following files where we want the actual menus to apear on the page.

menu.html
<table style="line-height:0px; font-size:0px;" border="0" cellspacing="0" cellpadding="0">
  <tr><td>
      <a href="javascript:void(0)" onClick="menuColap('main'); return true;"  onmouseover="imgOn('i0'); window.status=''; return true;"
      onmouseout="imgOff('i0'); window.status=''; return true;">

      <img border="0" src="./gfx/m_top.png" alt="Hide Menu" name="i0"></a>
  </td></tr><tr><td>
      <a href="./index.php" onmouseover="imgOn('i1'); window.status=''; return true;"
      onmouseout="imgOff('i1'); window.status=''; return true;">

      <img border="0" src="./gfx/mb_index.png" alt="Index" name="i1"></a>
  </td></tr><tr><td>
      <a href="./linux_documents.php" onmouseover="imgOn('i2'); window.status=''; return true;"
      onmouseout="imgOff('i2'); window.status=''; return true;">

      <img border="0" src="./gfx/mb_gnu_g.png" alt="GNU Linux" name="i2"</a>
  </td></tr><tr><td>
      <a href="./programming.php" onmouseover="imgOn('i3'); window.status=''; return true;"
      onmouseout="imgOff('i3'); window.status=''; return true;">

      <img border="0" src="./gfx/mb_programming.png" alt="Programming" name="i3"></a>
  </td></tr><tr><td>
      <a href="./articles.php" onmouseover="imgOn('i4'); window.status=''; return true;"
      onmouseout="imgOff('i4'); window.status=''; return true;">

      <img border="0" src="./gfx/mb_articles_g.png" alt="Articles" name="i4"></a>
  </td></tr><tr><td>
      <a href="http://photoblog.hypexr.org" onmouseover="imgOn('i5'); window.status=''; return true;"
      onmouseout="imgOff('i5'); window.status=''; return true;">

      <img border="0" src="./gfx/mb_photoblog.png" alt="Photoblog" name="i5"></a>
  </td></tr><tr><td>
      <a href="http://forums.hypexr.org" onmouseover="imgOn('i6'); window.status=''; return true;"
      onmouseout="imgOff('i6'); window.status=''; return true;">

      <img border="0" src="./gfx/mb_discussion_g.png" alt="Discussion" name="i6"></a>
  </td></tr><tr><td>
      <a href="./links.php" onmouseover="imgOn('i7'); window.status=''; return true;"
      onmouseout="imgOff('i7'); window.status=''; return true;">

      <img border="0" src="./gfx/mb_links.png" alt="Links" name="i7"></a>
  </td></tr><tr><td>
      <a href="./contact_info.php" onmouseover="imgOn('i8'); window.status=''; return true;"
      onmouseout="imgOff('i8'); window.status=''; return true;">

      <img border="0" src="./gfx/mb_contact_g.png" alt="Contact Information" name="i8"></a>
  </td></tr>
</table>


linux_menu.html
<table style="line-height:0px; font-size:0px;" border="0" cellspacing="0" cellpadding="0">
  <tr><td>
      <a href="javascript:void(0)" onClick="menuColap('linux'); return true;" onmouseover="imgOn('il0'); window.status=''; return true;"
      onmouseout="imgOff('il0'); window.status=''; return true;">

      <img border="0" src="./gfx/ml_top.png" alt="Hide Linux Menu" name="il0"></a>
  </td></tr><tr><td>
      <a href="./linux_documents.php" onmouseover="imgOn('il1'); window.status=''; return true;"
      onmouseout="imgOff('il1'); window.status=''; return true;">

      <img border="0" src="./gfx/mbl_linux_documents.png" alt="Linux Documents" name="il1"></a>
  </td></tr><tr><td>
      <a href="./linux.php" onmouseover="imgOn('il2'); window.status=''; return true;"
      onmouseout="imgOff('il2'); window.status=''; return true;">

      <img border="0" src="./gfx/mbl_linux_links_g.png" alt="Linux Links" name="il2"</a>
  </td></tr><tr><td>
      <a href="./comics.php" onmouseover="imgOn('il3'); window.status=''; return true;"
      onmouseout="imgOff('il3'); window.status=''; return true;">

      <img border="0" src="./gfx/mbl_cartoons.png" alt="Linux/Computer Cartoons" name="il3"></a>
  </td></tr>
</table>


programming_menu.html
<table style="line-height:0px; font-size:0px;" border="0" cellspacing="0" cellpadding="0">
  <tr><td>
      <a href="javascript:void(0)" onClick="menuColap('programming');" onmouseover="imgOn('ip0'); window.status=''; return true;"
      onmouseout="imgOff('ip0'); window.status=''; return true;">

      <img border="0" src="./gfx/mp_top.png" alt="Hide Programming Menu" name="ip0"></a>
  </td></tr><tr><td>
      <a href="./programming.php" onmouseover="imgOn('ip1'); window.status=''; return true;"
      onmouseout="imgOff('ip1'); window.status=''; return true;">

      <img border="0" src="./gfx/mbp_projects.png" alt="Programming Projects" name="ip1"></a>
  </td></tr><tr><td>
      <a href="http://wiki.hypexr.org" onmouseover="imgOn('ip2'); window.status=''; return true;"
      onmouseout="imgOff('ip2'); window.status=''; return true;">

      <img border="0" src="./gfx/mbp_wiki_g.png" alt="Programming Wiki" name="ip2"</a>
  </td></tr><tr><td>
      <a href="./programming_resources.php" onmouseover="imgOn('ip3'); window.status=''; return true;"
      onmouseout="imgOff('ip3'); window.status=''; return true;">

      <img border="0" src="./gfx/mbp_resources.png" alt="Programming Resources" name="ip3"></a>
  </td></tr>
</table>



Now whats left is sticking this code in the web page that is requested. I am using php now becasue I wanted to use some other php stuff in my code. I will show an example of a Server Side Include (SSI) which is less code.

Snippets to include the code in the html page:

I have this code in my HEAD section so that the images are preloaded.
<?php
$menu_header_html ='';
$fh = fopen('./menu_header.html','r') or die($php_errormsg);
while (! feof($fh)) {
    $menu_header_html .= fread($fh,1048576);
}
fclose($fh);

$linux_menu_header_html ='';
$fh = fopen('./linux_menu_header.html','r') or die($php_errormsg);
while (! feof($fh)) {
        $linux_menu_header_html .= fread($fh,1048576);
}
fclose($fh);

$programming_menu_header_html ='';
$fh = fopen('./programming_menu_header.html','r') or die($php_errormsg);
while (! feof($fh)) {
        $programming_menu_header_html .= fread($fh,1048576);
}
fclose($fh);

echo $menu_header_html, $linux_menu_header_html, $programming_menu_header_html;
?>

This is the code is the same but located in the BODY to load the menu html code.
<span id="main_menu">
    <?php
           $main_menu_html ='';
           $fh = fopen('./menu.html','r') or die($php_errormsg);
           while (! feof($fh)) {
              $main_menu_html .= fread($fh,1048576);
           }
           fclose($fh);
           echo $main_menu_html;
    ?>
</span>


<span id="linux_menu">
    <?php
          $linux_menu_html ='';
          $fh = fopen('./linux_menu.html','r') or die($php_errormsg);
          while (! feof($fh)) {
             $linux_menu_html .= fread($fh,1048576);
          }
          fclose($fh);
            echo $linux_menu_html;
    ?>
</span>


<span id="programming_menu">
    <?php
          $programming_menu_html ='';
          $fh = fopen('./programming_menu.html','r') or die($php_errormsg);
          while (! feof($fh)) {
                 $programming_menu_html .= fread($fh,1048576);
          }
          fclose($fh);
              echo $programming_menu_html;
    ?>
</span>



And thats what makes it work. You will of couse want the appropriate images to make it all look pretty.

Here is a SSI script that is equivalent to one of the php blocks above:
<!--#include virtual="./menu.html" -->

There are no comments on this page. [Add comment]

Powered by Wikka Wakka Wiki 1.1.6.0
Page was generated in 0.2284 seconds