JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Top Navigational Bar II		[View Sample]

One of the best of it's kind, this is Mike's two-level menu bar script. Use it to intelligently organize your site's links while adding a touch of DHTML coolness at the same time. Wonderfully useful and cool a creation this is.


Insert into <HEAD>
<script language="JavaScript" src="navbar.js"></script> <script language="JavaScript" src="dhtmllib.js"></script> <script language="JavaScript"> // Define navigation bar settings. navBarX = 0; navBarHeaderWidth = 115; navBarMenuWidth = 190; navBarBorderWidth = 1; navBarPaddingWidth = 2; navBarBorderColor = "#000000"; navBarHeaderBgColor = "#999999"; navBarHeaderFgColor = "#000000"; navBarActiveBgColor = "#666666"; navBarActiveFgColor = "#ffffff"; navBarItemBgColor = "#cccccc"; navBarItemFgColor = "#000000"; navBarHighBgColor = "#000080"; navBarHighFgColor = "#ffffff"; navBarHeaderFontFamily = "Verdana,Arial,Helvetica,sans-serif"; navBarHeaderFontStyle = "plain"; navBarHeaderFontWeight = "bold"; navBarHeaderFontSize = "10pt"; navBarItemFontFamily = "Verdana,Arial,Helvetica,sans-serif"; navBarItemFontStyle = "plain"; navBarItemFontWeight = "bold"; navBarItemFontSize = "8pt"; // Define navigation bar menus. Extend beyond 4 as desired navBarMenus[0] = new Array("Home", "http://dynamicdrive.com"); navBarMenus[1] = new Array( "News", "", "CNN", "http://www.cnn.com", "MSNBC", "http://msnbc.com", "ABCNews", "http://www.abcnews.com"); navBarMenus[2] = new Array( "Technology", "", "News.com", "http://www.news.com", "TechWeb", "http://www.techweb.com", "Wired", "http://wired.com"); navBarMenus[3] = new Array( "Search", "", "Yahoo", "http://www.yahoo.com", "AltaVista", "http://www.altavista.com", "InfoSeek", "http://www.infoseek.com", "Excite", "http://www.excite.com", "HotBot", "http://www.hotbot.com"); navBarMenus[4] = new Array( "Webmaster", "", "Dynamic Drive", "http://dynamicdrive.com", "Website Abstraction", "http://wsabstract.com", "Freewarejava.com", "http://freewarejava.com", "BrainJar", "http://brainjar.com"); </script>
Step 2: Add the below event handler into the tag itself. as follows: Step 3: Finally, the code of Step 1 references two external JavaScript files, which you'll need to download below, and upload along with your page. The two files ("navbar.js" and "dhtmllib.js") are contained inside the following zip file: external.zip (click or click with shift key depressed for NS users) Remember, upload what's contained inside to your webpage directory, or the script won't run! Enjoy!
Insert into <BODY>
<body onload="navBarInit()">

Other Options
Configuring the menu You obviously will want to modify the bar links to your own. All configurations are done in the code of Step 1. Simply refer to comments inside (don't worry, it's self explanatory and extremely easy). Hats off again to Mike for making the setup process a walk in the park. Setting Up Item Links (By Mike Hall, author). When you define a the link for a menu item there are three options. It can be 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 when moused over. Item links 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 JavaScript eval() function when the item is clicked. This means that you can load pages in another frame or in a new window. For example: "javascript:top.frames['main'].location = 'about.html'" would load the frame called "main" with the page "about.html", javascript:window.open('about.html') opens the page "about.html" in a new browser window.