drop down menu like on microsoft.com

[dbnoll03]

Hi all! I am looking for a drop down menu applet like the one on microsoft.com. I found one that I like at navsurf.com called NavBar Deluxe. But the problem with it is that you have to make the applet's hight as long as the menus which leaves a huge white space between the menu and the text. I want one that will drop down over the text. This is kind of a tuffy. Help is greatly appriciated!

dbnoll03

[hallam2003]

i belive you could use some DHTML for that. try looking around at www.projectcool.com, (http://www.projectcool.com,) primarily under the "DHTML" links, haven't been there in a while, not sure what you'll find, on the main page, you'll have to get to the "devlopers" section, or something like that, it's kinda confusing

Hallam

[DemonKnight]

http://www.dynamicdrive.com/dynamicindex1/index.html they might have what you want.

[HomeYield]

Here (http://www.htmlgoodies.com/tutors/forms.html) is another good html site. This guy goes into some serious detail and real easy to follow. Scoll on down the page and you'll find what you are looking for.

[doggabone]

DHTML is definitely the way to go. The question is - which browsers do you need to support? Presumably not text browsers http://www.sysopt.com/forum/smile.gif.

Opera 5.11? Netscape 4.7? Mozilla 0.9/Netscape 6.1? Internet Explorer 5.5? ... that's most of the ones I can think of, and the most current versions of each so far as I know. There's more. Not all DHTML works in all browsers. For example, the drop-down menus @ microsoft.com just return java/ecmascript errors to me in my browser (Opera 5.11), and they don't drop down in Mozilla 0.9, or Netscape 4.7. I assume it's true for Netscape 6.1 too. (I only use the build from Mozilla - it's the same engine, but more closer to the finial product.)

I've got one that works in Opera, Mozilla/Netscape 6, and Internet Explorer 5.5 - I just posted it to http://www.kuru.ca/menu.htm, 'cause I can't remember where I got the source I started with.

Still can't upgrade it to XHTML Strict, but I don't use these sort of menus much. I haven't done work for sites so large where I felt it was a benefit or worth the effort. (Personal preference.) Totally tanks in NS4, by the way.

[izzzy12k]

You can do it in javascript too.

http://webdeveloper.earthweb.com/pagedev/webjs/item/0,3602,12760_31841,00.html

Just use small fonts and background colors.

izzy

[dbnoll03]

Thank you golfcart, that helps me alot. Now I don't have to create an entirely new menu. Phew! On to the next thing... I have also been looking for a simple script that will change the background color of a cell when the mouse rolls over it. Any suggestions for his one peeps?

[golfcart]

Ask and you shall recieve (http://javascript.internet.com/bgeffects/cell-bg-changer.html) http://www.sysopt.com/forum/smile.gif Oops just noticed that one is IE only. Will see if i can dig up another.

[This message has been edited by golfcart (edited 06-22-2001).]

[dbnoll03]

THANK YOU! Especially doggabone and golfcart! You peeps are lifesavers. http://www.sysopt.com/forum/smile.gif

[This message has been edited by dbnoll03 (edited 06-22-2001).]

[dbnoll03]

Thanks again! And I have 2 more questions.

1. How do you force a hyperlink's color. My style sheet makes links red, but in one part of the page I need links to be white. Is it possible?

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

In that script I want to change the font, etc. They say to use the method "setFonts(hdrFamily, hdrStyle, hdrWeight, hdrSize, itmFamily, itmStyle, itmWeight, itmSize)" without the quotes of course. They also say to use standard CSS values. When I put this line of code in, the page errors, any help?

Code: myNavBar1.setFonts(Verdana, normal, normal, 12px, Verdana, normal, normal, 12px)

Is something wrong with it? Maybe I am putting it in the wrong place, I am befuddled!

[golfcart]

Question 1 example:

<a href="somewhere"><font color="ffffff">link</font></a>

Question 2: I didn't get that far into the script, but I would like to try it out. Will let you know what I come up with http://www.sysopt.com/forum/smile.gif

[dbnoll03]

Now I am wondering if this dropdown is causing me more trouble then it is worth. The drop down menu errors every time I save it as a tempate in Dreamweaver! This one is way, way over my head.

[golfcart]

ok i managed to change the fonts...code is on the same page i linked to earlier. http://www.sysopt.com/forum/smile.gif

[dbnoll03]

Dammit, I used the drop down from dynamicdrive.com, and it won't work is Netscape I hear? That is not good. It has to work in all browsers. Well I will try one of the others...and after all that work. http://www.sysopt.com/forum/frown.gif

[golfcart]

I tried one from dynamic drive just for kicks. It works perfect in IE and NS. I put it here (http://www.mich1hosting.net/menu.html) if you want to take a look. Feel free to grab the code off the page. http://www.sysopt.com/forum/smile.gif

[doggabone]

WHUUUUPS.

I thought I would be clever and "clean up" that script I posted for the cascading menu for IE 5+/Mozilla 0.9/NS 6, and broke it, a little. Also, I had left an event.cancelBubble out, so a sub-sub menu was not showing up. Sorry to those who tried to use my glitched one (wish I could remember the site where I got the original LOL). I put the repaired one back at http://www.kuru.ca/menu.htm.

Fixed, posted, also for background rollovers,
onmouseover="style.backgroundColor='#FFFF00'; onmouseout="style.backgroundColor='#00FFFF';". Made a quick example at http://www.kuru.ca/rollover.htm

Or you can use a script:

function tdRollOver(tdCell){
tdCell.style.backgroundColor='#000066';
tdCell.style.color='#FFFFFF';
tdCell.style.border='1px solid #CCCCCC';
tdCell.background='#000066';
} function tdRollOut(tdCell){
tdCell.style.backgroundColor='transparent';
tdCell.style.border='1px solid #000099';
tdCell.style.color='#CC33FF';
}

and in the HTML:

onmouseover="tdRollOver(this);" onmouseout-"tdRollOut(this);".

My band's website uses it, you can read the code (http://www.kuru.ca) and read the script I am using (so far http://www.sysopt.com/forum/wink.gif) at http://www.kuru.ca/enhancedUI.js. I am trying to push the standards-compliant CSS thing real hard here, before I take it to a dynamic server model. Which means I still got a lot of work to do, and so I gotta apologize to the Mac users (and probably *nix too) for some of the design issues http://www.sysopt.com/forum/frown.gif.

Fixes are comin' http://www.sysopt.com/forum/wink.gif.

I'm not a big fan of the FONT tag http://www.sysopt.com/forum/wink.gif so I suggest a better way to force a link to be a different color than the rest. Use Style Sheets and classes.

A{
color="#FF0000";
}

.specialA{
color=#"FFFFFF";
}

So your special link would be:
a class="specialA" href="whatever.htm" ... etc.

[doggabone]

OH - no periods after links, you say? LOL dangit!!

Div-based menu, recently repaired after my bungle (NS6/Mozilla 0.9/IE5 only): http://www.kuru.ca/menu.htm

Demonstrate rollover effect: http://www.kuru.ca/rollover.htm

Script my band uses for website with some of this stuff in it: http://www.kuru.ca/enhancedUI.js

+ read the code of pages @ http://www.kuru.ca for implementation.

P.S. That script @ Dynamic Drive doesn't work in Opera, or on my Mac very well.

Mind you, the one @ microsoft.com doesn't either http://www.sysopt.com/forum/biggrin.gif.

Sorry about the goof-ups, folx.

[doggabone]

Hey, lookit what I found:
http://www.helpfromtechs.com/ubb/Forum8/HTML/000111.html

Seems someone else wanted to rollover the background color in Netscape 4.

Here is what the code looked like:

<table width=100 cellpadding=0 cellspacing=0>
<tr>
<td bgcolor=FFFFFF onMouseOver="this.bgColor = 'FF0000'" onMouseOut="this.bgColor = 'FFFFFF'">
<ilayer width=100%>
<layer width=100% onMouseover="this.bgColor='FF0000'" onMouseout="this.bgColor='FFFFFF'">
<center>Your text</center>
</layer>
</ilayer>
</td>
</tr>
</table>

In other words, the code looked like work hehehe.

[dbnoll03]

I am using a class to force the links white, but I dont want the links on the sidebar of my page to underline, but I do want the links in the body of my page to underline. How do I do that?

[doggabone]

Use multiple classes, such as:

A {
color:#FFFFFF;
}

A.sidebarLink
{
text-decoration : overline;
}

You could have a class for your body links, such as

A.bodyLink{
text-decoration : underline;
}

but it would not be needed - the A.bodyLink class would inherit the text-decoration of the root "A" class. If you don't specify it in the root class, it will be underlined by default. You could use the bodyLink to change the colour, as in

A.bodyLink{
color : #FF0000;
}

and it would still be underlined.

Here's the code for the example, which I can't post since I fdisk'ed yesterday and haven't installed all my proggies yet :|.

<html>
<head>
<style type="text/css">
<!--
BODY, TD {
background: #000000;
color : silver;
font-family : "Bookman Old Style", "Times New Roman", serif;
font-size: 32px;
text-align: left;
}
A {
color:#FFFFFF;
}

A.sidebarLink
{
text-decoration : none;
}

A.bodyLink{
color : #FF0000;
}
//-->
</style>
<body>
<a href="#">PLAIN</a><br>
<a class="sidebarLink" href="#">SIDEBAR</a><br>
<a class="bodyLink" href="#">BODY</a>
</body>
</html>