|
Navigation Bar | ||||||||||||||||||||
|
Mouse over the headers at the top of the page and you'll get a drop down menu.
The individual menu items are highlighted when under the cursor and can be
clicked to link to a new page. The headers themselves can also be set as links.
The script defines a navigation bar as a JavaScript object, making it easy to create, configure, change and manipulate. This also allow you to define several bars on the same page, each with it's own individual look. Features Fonts, colors, spacing and width can be set independently for each bar. Headers and menus can be set to a fixed width or you can let them default to fit the header text. Bars can be resized dynamically, and the headers can be aligned to the left, center or right of the bar or set at a fixed position. You can try some of these features out with the links below. (Note that a second bar is defined but is initially hidden.)
Note that the stacking order of the bars is changed in the above examples so that whichever bar is closest to the top of the page will appear on top of the other when they overlap. Also note that the menus can be made to open above the bar. You are not limited to using simple links for the menu items. The script allows you to specify JavaScript code to be executed when an item is clicked on, providing more functionality and flexibility. Using the Script First you'll need to include either both the dhtmllib.js and navbar.js files in your page or the single, condensed navcond.js file. See the notes on the Source section at the end of this article. Then you need to add some code to define each bar and build it on the page. There are three distinct steps to creating a navigation bar.
The details of each step are outlined below. I. Defining a Navigation Bar A navigation bar is made up of three distinct objects: one for the bar itself, one for drop down menus and one for individual items. You use these objects and their associated methods to construct a bar. Here is some sample code.
var myNavBar, menu;
myNavBar = new NavBar(500);
myNavBar.setSizes(1, 2, 1);
myNavBar.setColors("#000000",
"#ffffff", "#669999", "#000000", "#66cccc",
"#ffffff", "#339999", "#000000", "#99ffff");
myNavBar.setFonts("Arial, Helvetica", "plain", "bold", "10pt",
"Arial, Helvetica", "plain", "bold", "10pt");
menu = new NavBarMenu(80, 100);
menu.addItem(new NavBarMenuItem("Header 1", "blank.html"));
menu.addItem(new NavBarMenuItem("Item 1-1", "blank.html"));
menu.addItem(new NavBarMenuItem("Item 1-2", "blank.html"));
menu.addItem(new NavBarMenuItem("Item 1-3", "blank.html"));
menu.addItem(new NavBarMenuItem("Item 1-4", "blank.html"));
myNavBar.addMenu(menu);
menu = new NavBarMenu(80, 100);
menu.addItem(new NavBarMenuItem("Header 2", "blank.html"));
menu.addItem(new NavBarMenuItem("Item 2-1", "blank.html"));
menu.addItem(new NavBarMenuItem("Item 2-2", "blank.html"));
menu.addItem(new NavBarMenuItem("Item 2-3", "blank.html"));
myNavBar.addMenu(menu);
...
You can place the code to define a navigation bar anywhere on your page although generally you would place it between the <HEAD> and </HEAD> tags of your HTML code so that it can run as the page loads. The constructors and methods for each object are described below. The NavBar Object This object defines the navigation bar itself. Once you define a NavBar you can set its colors, fonts, etc. and add menus to it using the methods described below.
There are additional methods defined for the NavBar object which are discussed later but the ones shown here are used strictly for constructing a navigation bar and defining its appearance. They must all be used before the bar is actually built and added to the page otherwise they will have no effect. The NavBarMenu Object This object defines a single header and drop down menu.
The NavBarMenuItem Object
The text for a menu item can include simple HTML tags like <CENTER></CENTER> or <IMG> tags along with the plain text. The link can be one of three things: a URL, a null string ("") or a string of JavaScript code (any string beginning with "javascript:"). For a URL, the link is loaded into the current window or frame when the item is clicked on. When a null string is specified, it creates a 'dead' link. Clicking on the item does nothing, but it will still be highlighted and if it is a header, the drop down menu will still appear when it is moused over. Menu items are not like normal HTML links (<A HREF="...">) so you cannot specify a target frame or window or event handlers like onmouseover. You can, however, use JavaScript code to achieve some of the same effects. Any link string that begins with "javascript:" is executed using the built-in eval() function when the item is clicked. This means that you can load pages in frames like this.
new NavBarMenuItem("Table of Contents",
"javascript:top.frames['main'].location = 'toc.html'");
Which loads the URL 'toc.html' into a frame called 'main'. You can open a link in a new browser window using the window.open() method. The code below produces the same result as using TARGET="_blank" in a link.
new NavBarMenuItem("Table of Contents",
"javascript:window.open('toc.html')");
See the notes on Using Navigation Bars in Frames if you intend to use the script in a frameset. II. Building a Navigation Bar Once you've defined a navigation bar and its menus you need to build the necessary DHTML elements for it and add it to the page. This is done by simply calling the NavBar create() method. You can only call create() after the page has finished loading. Once created, you cannot change the colors or fonts of the bar or add new menus or items to it. The easiest way to do this it so set up a function to call via the onload event in the <BODY> tag. Here is a typical page setup.
<html>
<head>
<title></title>
<script language="JavaScript" src="dhtmllib.js"></script>
<script language="JavaScript" src="navbar.js"></script>
<script language="JavaScript">
// Define the navigation bars.
var myNavBar1 = new NavBar(400);
var myNavBar2 = new NavBar(0);
/* ... see code above for configuring the navigation bars ... */
function init() {
// Create the navigation bars.
myNavBar1.create();
myNavBar2.create();
}
</script>
</head>
<body onload="init()">
<!-- your page contents -->
</body>
</html>
Once the bar has been added to the page, you can reposition it, resize it, hide and show it, etc. as desired. Page 1 - Page 2
|
||||||||||||||||||||
|
Home | ||||||||||||||||||||