Web Design
Table of Contents
by Arnold Kling
Creating a Fancy Menu

The next assignment is to create a fancy menu that can be placed on all of your project pages. Below is a sample of the type of menu that I have in mind.

The History of Othello Analysis and Strategy Other Othello Sites

It is important to write programs in small chunks. You get a piece working, save it, and move on to the next piece.

The opposite approach is to try to tackle a big project in one fell swoop and hope that everything works. That is not a good strategy with JavaScript, because it is a scripting language that has lousy features for de-bugging.

I recommend that you first try to get new styles and scripts working within a single page. Once they are working, you can transfer them to your project.css and library.js pages.

  1. Open up one of the pages in your project. It might be your main page.

  2. We need to create two new styles. We need a hideit style to hide text when it is not in use. And we need a showit when we want the text to be seen.

    In theory, there are visibility controls that allow you to do this. However, I have not gotten these to work. So I hide text by setting the font-size to 0. I declared the classes as follows:

    <style>
    .hideit{
    font-size: 0%;
    }
    .showit{
    color: #cc0000;
    }
    </style>

    I put this code in between the <head> and the </head> tags. When it is working, you move it to project.css page and delete the <style> and the </style> tags.

    Next, we test these classes to make sure that they work. We can set up this initial test code.

    <table>
    <tr>
    <td><a href = "history.html">The History of Othello</a>
    </td></tr>
    <tr>
    <td>
    <div id = "menutext" class = "showit">Scroll your mouse over the links for more information
    </div>
    <div id = "menuhistory" class = "hideit">Origins of the Game, Records of Major Tournaments, Computer Othello</div>

    If the showit and hideit classes are working properly, then we should see the menu text but not the menu for history. If they are working properly, then we can move the classes to project.css.

    Now, we want to put in JavaScript so that when someone runs their mouse over the link, the menutext gets hidden and the menuhistory becomes visible.

  3. Now, we start to add the JavaScript functions to swap between hideit and showit. In between the <head> and </head> you put

    <script language = "JavaScript">
    function setClass(classID, newClass){
    document.all[classID].className = newClass;
    }
    function showMenu(classID){
    setClass(classID, 'showit');
    setClass('menutext', 'hideit');
    }
    </script>

    The setClass() function is what we used before to change styles. The showMenu() function uses setClass to change two classes at once. We show the menu detail, and we hide the initial text.

    Next, we invoke these functions in the HTML code. We change the link code to read

    <td><a href = "history.html"
    onMouseOver = "showMenu('menuhistory');"
    onMouseOut = "setClass('menuhistory', 'hideit');">The History of Othello</a>

    Now, test this code. Make sure that the mouse-over and mouse-out effects work as expected.

    Once the JavaScript is working, move the functions over to your library.js page. You should delete the <script> and </script> tags.

  4. Now, you can work on developing an entire menu for your project site. Add code to your HTML page to set up a table of links to all of the pages on your site, as well as a longer description of each link.

  5. The final step is to move the HTML code off of the page and put it into library.js. That way, it will automatically load onto every one of your pages.

    In library.js you had code that says

    header = headercss + headertopright;

    You want to change this to read

    header = headercss + headertopright + menu;

    Before this line, you have to define menu. I recommend first testing with the line

    menu = 'This will be a menu';

    When you have this working, then we change it. NOTE: You can use this utility to automatically do what is discussed below.

    We want to say

    menu = '<table><tr><td><a href =' + etc.

    However, some of the code that we want to put on the HTML page has included in it single quotes ('). Those will be interpreted by JavaScript as terminating the menu variable. So, whenever we come across a single quote, we put a \ in front of it. This is known in programming as an "escape" character. It will cause the quote that follows it to be treated as a quote within the variable, rather than as the end of the variable.

    For our test HTML, we would write

    menu = '<table><tr><td>'
    + '<a href = "history.html"'
    +' onMouseOver = "showMenu(\'menuhistory\');"'
    +' onMouseOut = "setClass(\'menuhistory\', \'hideit\');" >'
    +'The History of Othello</a>'
    + '</td></tr><tr><td>'
    + '<div id = "menutext" class = "showit">'
    +'Scroll your mouse over the links for more information'
    +'</div>'
    +'<div id = "menuhistory" class = "hideit">'
    +'Origins of the Game, Records of Major Tournaments, Computer Othello</div>';

    Of course, for your own menu, you will have to transfer your own HTML code. You will have to put the \ as needed. This may seem like tedious work. However, when you want to change your menu, it will be less tedious to go in to one JavaScript file and change it than to go into every single one of your pages.