Flyout Menu
Note: You will need to download Mozilla Firefox 3 to preview your files.
This is a tab-enabled flyout menu that is based on JavaScript and CSS. If a user has JavaScript turned off, the user will still be able to access the menu.
The following is an image of the menu when JavaScript is turned off. All flyouts will be automatically exposed:
To Add The Flyout Menu
- Open your .php template page.
Find:
</head><body class="column2">
And replace with:
<link href="http://www.calstatela.edu/flyoutMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.calstatela.edu/flyoutMenu.js" language="JavaScript"></script>
</head><body class="column2" onload="menu_init(0,12,1,-20,10)">
Note: class may be column2 or column3.
- Save your document.
-
Open your vertical menu in your preferred HTML editor. (Make sure you are in Code View).
-
Find:
<h1 class="hideme">Menu</h1>
<ul class="mc">
<li><a href="#">Link</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul> -
And replace with:
<h1 class="hideme">Menu</h1>
<ul id="menunav">
<li><a href="#maincontent" class="menua">Link 1</a>
<ul>
<li><a href="#maincontent">1a</a></li>
<li><a href="#maincontent">1b</a></li>
<li><a href="#maincontent">1c</a></li>
<li><a href="#maincontent">1d</a></li>
</ul>
</li>
<li><a href="#maincontent" class="menua">Link 2</a>
<ul>
<li><a href="#maincontent">2a</a></li>
<li><a href="#maincontent">2b</a></li>
<li><a href="#maincontent">2c</a></li>
<li><a href="#maincontent">2d</a></li>
</ul>
</li>
<li><a href="#maincontent">Link 3</a></li>
<li><a href="#maincontent" class="menua">Link 4</a>
<ul>
<li><a href="#maincontent">4a</a></li>
<li><a href="#maincontent">4b</a></li>
<li><a href="#maincontent">4c</a></li>
<li><a href="#maincontent">4d</a></li>
</ul>
</li>
<li><a href="#maincontent">Link 5</a></li>
</ul>
- Save your document.
- To preview your menu, open Mozilla Firefox. Use the program menu at the top of your screen and choose File\Open File and navigate to your two or three column web page file.
-
Note: The class menua will display an arrow signifying the sublevel links.
-
Add, remove, and edit links as needed.
-
Study the structure of the menu before adding any additional links. Any missing tags will disable the menu from functioning correctly. Use W3C Markup Validation Service to varify your page.