Web Page Menu Bar

Get It

You can make this project with just these two files:

Purpose

The purpose of this project is to show the JavaScript code and CSS for the kind of menus at the top of this page.

This menu bar has four different kinds of menus:

Home This is a totally static menu with HTML encoded into a JavaScript string.
Rationale This is not actually a list of menu items but a description of the page that is stored in a separate HTML DIV and moved to this location after page load.
Projects This is a folder-specific menu that is chosen at page load. The menu might be different on a page in a diferent folder.
Validate This dynamic menu changes from page to page and, in order to implement validation, requires that the page be online, so it gives warnings if the page is being run offline.

How It Works

The overall structure of the menus looks like this. You can see that the menu structure looks pretty simple compared to some other frameworks.

The menu bar is a UL element, and each menu is in a LI element inside it.

Each menu is a UL element that has two LI elements inside. The first LI element has the menu title. The second LI element has the list of invisible menu items that pop up when you click on the menu. This list has another UL inside that has a LI element for each menu item.

So the whole menu bar is a set of ULs nested three deep. First level is the menu bar, second level is the menu, third level is the menu items.

The only special classes and IDs are menu on each regular menu, aboutmenu on the Rationale menu so we can style it differently, #casestudy on the menu that will get the Rationale content, so we can copy it efficiently, and #jsval on the Validate menu list so we can dynamically construct the validate links there.

<div id="hfsmenu">
  

     
      
        Home
        
          
            Menu item 1.1
            Menu item 1.2
          
        
      
    

     
      
        Rationale
        
          
        
      
    

     
      
        Projects
        
          
            Menu item 3.1
            Menu item 3.2
          
        
      
    

     
      
        Validate
        
          
          
        
      
    

  
</div>

Getting Started

Here is how to use this on your own page.

Download the file hfsmenu2.js and reference it in the head section of your HTML file like this:
```
<script type="text/javascript" src="hfsmenu2.js"></script>
```
Download the file hfsmenu.css and reference it in the head section of your HTML file like this:
```
<style type="text/css">
@import "hfsmenu.css";
<style>
```
You can also reference your other styles and stylesheets here.

You can change the styling of the menus in this file. The default is a dark brown menu bar with a subtle gradient and light text. The menus are light brown and have dark brown text. The colors are easy to change. You may find the gradients more difficult to change if you are not familiar with gradients. The gradients can be commented out for a flatter effect and they will still look great.
Add this HTML code into your file where you would like the widget to appear.
```
<div id="hfsmenu"><div>
```

Making Your Menus

Add your menus in hfsmenu2.js
The easiest way to do this is to write the menus as HTML, then put them in quotes and concatenate them together into one long JavaScript string for each menu. As examples, see the string variables menuStringAnim, menuStringJS, and menuStringPHP.
Put a DIV in your code with the ID #assignment and the script will copy its contents into the menu that has the ID #casestudy. You can give this DIV its own styling.
The script will make the Validate menu dynamically and automatically if you have a menu that has the ID #jsval.