Web Page Menu Bar

JavaScript Widget

by Mark Brautigam

Get It

You can make this project with just these two files:

» hfsmenu2.js
» hfsmenu.css


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:

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">
    • Rationale

Getting Started

Here is how to use this on your own page.

  1. 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>
  2. 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";

    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.

  3. Add this HTML code into your file where you would like the widget to appear.
    <div id="hfsmenu"><div>

Making Your Menus

  1. 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.

  2. 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.
  3. The script will make the Validate menu dynamically and automatically if you have a menu that has the ID #jsval.
Copyright © 2007–2014 Mark Brautigam

The Purpose

I wanted to have menus so users can quickly navigate from project to project within each category (e.g. Animation, JavaScript, PHP/mySQL).

I also wanted to show the assignment, rationale, or case study for each project without it intruding on the project itself.

And I wanted to have quick access to validation methods that I use frequently while doing development.