Website Menus

[Ooble]

Hi there. This is the first post - I feel special. Anyhoo, on to my problem. I'm trying to create a sliding menu for a website. Unfortunately, I'm the sort of person who likes to understand the code he's using, but some of the stuff out there makes no sense. Can anyone give me some basic code that makes a floating table appear when I pass the mouse over a link or something?

[Drake]

Are you coding this menu in Javascript?

Check out this menu: http://dynamicdrive.com/dynamicindex1/slideinlink.htm

The code has comments.

[Ooble]

It doesn't seem to do anything. It wasn't what I was looking for either. I've been doing some thinking, and all I need to know is how to make a table visible and invisible at will. The rest'll be easy.

[Drake]

You have to click on the Menu for it to slide over. I know it's not exactly what you wanted, but I thought the code might help.

I think you can create the menu you want in a similar way that menu was coded. Create an IF statement inside a function that's triggered by a mouseover event.

You should link to the menu when you're finished so we can all check it out.

[Ooble]

It's not finished, but I managed to get it working. Unfortunately, it only works in IE, because the code I used was direct from the MSDN. This is the code I used:

Code: Select all

onMouseOver="menu1.style.visibility='visible'" onMouseOut="menu1.style.visibility='hidden'"

menu1 is just a selection of links, bundled up in a div tag with the id menu1. Any idea on how to make this cross-browser compatible?

[Drake]

Try this for Netscape compatability:

visibility:show;
visibility:hide;

[Ooble]

So how do I change the stylesheet in the above events?

[Ooble]

OK... I've been doing a lot of fiddling. All I need to know is where to put this event:

Code: Select all

onClick="document.getElementById('menu1').style.visibility='hidden'"

so that wherever I click, the event executes. Anyone in the know?

[SlyckChuck]

Isn't nutscrape lower that IE??? I remember many complaining about that browser.

[nebin333]

Netscape compatability. That means Mozilla and Firefox.

[Ooble]

Don't worry - I've got it working. Took a bit of JavaScript. If anyone wants the code to make something happen no matter where you click, post and I'll demonstrate.

[Drake]

I'd like to see your code.

[Ooble]

OK, here we go. First, create a function that does whatever you want it to do, and put it in script tags in the head:

Code: Select all

<script>
<!--

function x() {
    // insert code here
}

// -->
</script>

Then place this code inside those script tags:

Code: Select all

if (parseInt(navigator.appVersion) > 3) {
   document.onmouseup = x;
   if (navigator.appName=="Netscape")
      document.captureEvents(Event.MOUSEDOWN);
}

Just replace x with your function name. I used this to hide a menu that popped up when you click a button - it's pretty useful.

(code above courtesy of Google and someone helpful in some forum)