PDA

Click to See Complete Forum and Search --> : Invisible Sub-menu

bobbabuoy
12-17-2003, 11:51 AM
I want to create a sub-menu for a menu item. I would like the sub-menu to show up on the mouse-over event. However I can already get one to show up in the current cell of the td (this just expands the current menu table vertically to allow for the sub-menu items). I would like one that actually opens up the sub-menu almost as a tiny pop-up window. Any ideas?

Thanks!
Daniel T
12-17-2003, 12:28 PM
to do this, u need 2 use layers. here is a menu script that has worked good 4 me:

insert into head of document:




<script language="JavaScript" src="navcond.js"></script>
<script language="JavaScript">

/*
Top Navigational Bar II (By Mike Hall)
Last updated: 00/05/08
Permission granted and modified by Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

var myNavBar1 = new NavBar(0);
var dhtmlMenu;

//define menu items (first parameter of NavBarMenu specifies main category width, second specifies sub category width in pixels)
//add more menus simply by adding more "blocks" of same code below

dhtmlMenu = new NavBarMenu(100, 0);
dhtmlMenu.addItem(new NavBarMenuItem("Home", "http://dynamicdrive.com"));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(100, 120);
dhtmlMenu.addItem(new NavBarMenuItem("News", ""));
dhtmlMenu.addItem(new NavBarMenuItem("CNN", "http://www.cnn.com"));
dhtmlMenu.addItem(new NavBarMenuItem("MSNBC", "http://msnbc.com"));
dhtmlMenu.addItem(new NavBarMenuItem("ABCNews", "http://www.abcnews.com"));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(110, 120);
dhtmlMenu.addItem(new NavBarMenuItem("Technology", ""));
dhtmlMenu.addItem(new NavBarMenuItem("News.com", "http://www.news.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Techweb", "http://www.techweb.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Wired", "http://www.wired.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Dynamic Drive", "http://www.dynamicdrive.com"));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(100, 150);
dhtmlMenu.addItem(new NavBarMenuItem("Search", ""));
dhtmlMenu.addItem(new NavBarMenuItem("Yahoo", "http://www.yahoo.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Alta Vista", "http://www.altavista.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Infoseek", "http://www.infoseek.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Excite", "http://www.excite.com"));
dhtmlMenu.addItem(new NavBarMenuItem("HotBot", "http://www.hotbot.com"));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(100, 150);
dhtmlMenu.addItem(new NavBarMenuItem("Webmaster", ""));
dhtmlMenu.addItem(new NavBarMenuItem("Dynamic Drive", "http://dynamicdrive.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Website Abstraction", "http://wsabstract.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Freewarejava.com", "http://freewarejava.com"));
dhtmlMenu.addItem(new NavBarMenuItem("BrainJar", "http://brainjar.com"));
myNavBar1.addMenu(dhtmlMenu);

//set menu colors
myNavBar1.setColors("#000000", "#000000", "#C0C0C0", "#ffffff", "#666666", "#000000", "#cccccc", "#ffffff", "#000080")

//uncomment below line to center the menu (valid values are "left", "center", and "right"
//myNavBar1.setAlign("center")

var fullWidth;

function init() {

// Get width of window, need to account for scrollbar width in Netscape.

fullWidth = getWindowWidth()
- (isMinNS4 && getWindowHeight() < getPageHeight() ? 16 : 0);

myNavBar1.resize(fullWidth);
myNavBar1.create();
myNavBar1.setzIndex(2);
//UNCOMMENT BELOW LINE TO MOVE MENU DOWN 50 pixels
//myNavBar1.moveTo(0, 50);
}
</script>





setup <body> tag like so:

<body onLoad="init()">




last of all, download the following file and extract to the folder where your page is located:

http://www.dynamicdrive.com/dynamicindex1/exfiles.zip





u can see this script in action at:

http://www.dynamicdrive.com/dynamicindex1/topnavbar.htm


hope this helps,
-Dan
bobbabuoy
12-17-2003, 01:10 PM
Thanks, Dan! Exactly what I needed!!

Bobba Buoy