This menu bar has four different kinds of menus:
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.
Here is how to use this on your own page.
<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.
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.