Page 1 of 1

Website Menus

PostPosted: Mon Jul 05, 2004 9:00 pm
by 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?

PostPosted: Mon Jul 05, 2004 9:13 pm
by Drake
Are you coding this menu in Javascript?

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

The code has comments.

PostPosted: Mon Jul 05, 2004 9:23 pm
by 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.

PostPosted: Mon Jul 05, 2004 9:28 pm
by 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.

PostPosted: Mon Jul 05, 2004 10:00 pm
by 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?

PostPosted: Tue Jul 06, 2004 11:52 am
by Drake
Try this for Netscape compatability:

visibility:show;
visibility:hide;

PostPosted: Tue Jul 06, 2004 4:23 pm
by Ooble
So how do I change the stylesheet in the above events?

PostPosted: Tue Jul 06, 2004 9:28 pm
by 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?

Website Menus

PostPosted: Wed Jul 07, 2004 5:32 pm
by SlyckChuck
Isn't nutscrape lower that IE??? I remember many complaining about that browser.

PostPosted: Wed Jul 07, 2004 5:42 pm
by nebin333
Netscape compatability. That means Mozilla and Firefox.

PostPosted: Wed Jul 07, 2004 5:59 pm
by 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.

PostPosted: Wed Jul 07, 2004 6:42 pm
by Drake
I'd like to see your code.

PostPosted: Wed Jul 07, 2004 8:25 pm
by 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)