PDA

View Full Version : AnyLink Drop Down Menu



Zaph
03-14-2005, 11:17 AM
Script: AnyLink Drop Down Menu
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

Just a quick (simple) question from a newbie:
How do I make this script highlight each link on mouseover with a different bg colour?

Thanks!

ddadmin
03-16-2005, 07:00 AM
Ok, do the following:

1) Add the below rules to your CSS style sheet for the script:


#dropmenudiv a{
display: block;
width: 100%;
}

#dropmenudiv a:hover{
background-color: yellow;
}

2) Then, remove the <br> tags at the end of each your menu links code, for example:


//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu1[3]='<a href="http://builder.com">Builder.com</a>'

In other words, the <br> in menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a><br>'

That's it!

Zaph
03-22-2005, 04:48 PM
Thanks a bunch for that, it looks great now!

I do have one more question regarding this script though which may be a little more difficult.

Is there any way i can have a single copy of the script hidden away somewhere, and all pages that contain the menu just point to it, instead of hard coding it in to each page?
I'm finding it a little tedious haveing to go to each page within my site to make a simple change such as the bg colour or adding a new link.

Thanks again

jscheuer1
03-24-2005, 06:45 AM
It should be possible.

First save the style to a file without the <style type="text/css"> and the </style> tags, call that file anylink.css

Second save the script to a file without the <script type="text/javascript"> and the </script> tags, call that file anylink.js

Put these two files in the same directory as your pages that use them (or in special directories, many folks put *.css files in a directory call style and *.js files in one called scripts). In the head of each page where you want the menu to appear, put these two statements (if using special directories, include the path to these files in their respective statements):


<link rel="stylesheet" href="anylink.css" type="text/css">
<script src="anylink.js" type="text/javascript"></script>

That's the relative easy part. You will still need to put the HTML markup for the menu on each page unless you make another file that will help do that for you. I will tell you how to make that file but, it will help tremendously if you know how to construct valid document.write statements in javascript, incase the converter makes a booboo. Go to:Convert HTML to JavaScript (http://www.htmlshop.com/tools/html2java2.asp)

Paste the HTML for your menu into the form provided and submit it. It will be converted to document.write format. Or if you know how to write the code, write it. Save the new code to a file without the beginning:

&lt;SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JavaScript-Impaired Browsers

and ending:

// End Hiding -->
</SCRIPT>
<!-- Size: 456 bytes -->

statements, if using the converter. Call that file any_menu.js and put it in the directory of the pages that will use it or in the scripts directory. Then on each page at the spot where you want the menu to appear, put this:


<script src="any_menu.js" type="text/javascript"></script>

For another example, let's say you put the file in the scripts directory just off of the directory where the page you want it on is located, then use:


<script src="scripts/any_menu.js" type="text/javascript"></script>That's about all there is to it, except be sure that any file, page or URL you reference from either of these *.js files is expressed in absolute terms (ex: http://www.wherever.com/somedirectory/somefile.htm), unless you understand how a relative path (ex: pictures/gallery.htm) will be interpreted.

Zaph
03-26-2005, 10:36 PM
Hi, I'm having a few problems putting this into action - I must inform you that i'm a total newbie, and i'm learning the whole trade as i go along!

I followed your instructions as best i could but i get a runtime error when i preview my test page saying i have an unterminated string constant. have i made a simple error or is something more major happening here?

I think the problem might be a result of my conversion of the html markup into js, as i haven't got a clue what i'm doing here. :o

Here is the contents of the css file:


#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
display: block;
width: 100%;
}

#dropmenudiv a:hover{
background-color: 'FAFD73';
}

Here is what came out of the conversion using the website you recommended:


document.write("<p align='center'></font><font size="
+"'4'><a href='index.htm'>Home</a> |&nbsp;<a onClick"
+"='return clickreturnvalue()' onMouseover='dropdown"
+"menu(this, event, menu1, '150px')' onMouseout='del"
+"ayhidemenu()'>
News</a> |&nbsp;<a onClick='retur"
+"n clickreturnvalue()' onMouseover='dropdownmenu(th"
+"is, event, menu2, '150px')' onMouseout='delayhidem"
+"enu()'>Mail
Outs</a> |&nbsp;<a onClick='return c"
+"lickreturnvalue()' onMouseover='dropdownmenu(this,"
+" event, menu3, '150px')' onMouseout='delayhidemenu"
+"()'>Contact
Details</a> |&nbsp;<a onClick='retur"
+"n clickreturnvalue()' onMouseover='dropdownmenu(th"
+"is, event, menu4, '150px')' onMouseout='delayhidem"
+"enu()'>Office
Toolbar</a></p>
");

Thanks once again for all your help, you're doing a great job! :cool:

jscheuer1
03-27-2005, 03:37 AM
Try this for the any_menu.js file:


with(document){
writeln("<p align='center'></font><font size='4'><a href='index.htm'>Home</a> |&nbsp;<a ");
writeln("onClick='return clickreturnvalue()' onMouseover='dropdownmenu(this, event, menu1, '150px')' ");
writeln("onMouseout='delayhidemenu()'> News</a> |&nbsp;<a onClick='return clickreturnvalue()' ");
writeln("onMouseover='dropdownmenu(this, event, menu2, '150px')' onMouseout='delayhidemenu()'>Mail Outs</a> |&nbsp;");
writeln("<a onClick='return clickreturnvalue()' onMouseover='dropdownmenu(this, event, menu3, '150px')' ");
writeln("onMouseout='delayhidemenu()'>Contact Details</a> |&nbsp;<a onClick='return clickreturnvalue()' ");
writeln("onMouseover='dropdownmenu(this, event, menu4, '150px')' onMouseout='delayhidemenu()'>Office Toolbar</a></p> ");
}I did say it would help if you knew about document.write, not your fault that you didn't.

Zaph
03-27-2005, 03:59 AM
Thanks for that, i had a look at other document.write files, and saw that mine looked very different!

I've just added what you said, but now i'm getting a syntax error. Is there something else I've missed? :confused:

I'm determined to get this sorted!

here is the code for the test page:


<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test 1</title>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Microsoft Theme" content="none, default">
<meta name="Microsoft Border" content="none, default">

<link rel="stylesheet" href="anylink.css" type="text/css">
<script src="anylink.js" type="text/javascript"></script>

</head>

<script src="any_menu.js" type="text/javascript"></script>

</body>

</html>

Many thanks (once again!)

jscheuer1
03-27-2005, 06:45 AM
OK, here is the thing. I took the demo HTML markup and converted, no problem:
document.writeln('<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, \'150px\')" onMouseout="delayhidemenu()">Web Design</a> |');
document.writeln('<a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, \'200px\')" onMouseout="delayhidemenu()">News Sites</a> (onclick)');so either write your code into this as a template or post the plain HTML markup, make sure it works first, and I'll convert it for you. Hopefully you will soon be an expert at doing this yourself. What I did to convert the example code was simply:

1) substitute \' for all ' (that's a single quote).
2) begin each line with:
document.writeln('3)end each line with:
');I didn't use that converter, I'm beginning to think it is of less value than I had originally thought (read useless). Anyways, there is one other thing, on your example page you have no <body> tag. That did not cause the problem though.

Zaph
03-27-2005, 12:24 PM
Success!

It works perfectly now! Thanks for all your help with this, you've just gone straight to the top of my xmas card list! :D

Keep up all the good work, this site is amazing. :cool:

Added:
Ok, it WAS working perfectly, but now on some pages the last drop down is appearing too far to the right and slightly below where it should. Any ideas whats gone wrong?

I've been adding the necessary code and removing the old stuff from each page, and the first few work fine, but all subsequent pages have this problem, even though they are in the same subfolder as the working ones.

Added:
Right, not sure what the problem was, but i think it had something to do with me replacing the old code which was contained in a text box with the new script sourcing. I simply deleted the old text box an recreated it again, and now it works fine, so ignore my previous question, and i'll finish by saying thanks again!

jscheuer1
03-27-2005, 05:05 PM
I would have to see this to fix it. If you use the code that you have in the external files directly on the problem pages, is there still a problem? Where I am going with that question is - was the set-up on the now problem pages somehow different than what you are using in your external files?

Zaph
03-27-2005, 09:56 PM
As i added to my previous post, the problem of the drop down being in the wrong position is no longer an issue. I now have a new problem though :o

I previously had all pages in the same folder, but i have now moved them so each section of the menu corresponds to it's own folder. If I have a single copy of the css and js files in the root of my site it automatically adds the folder name to the path without the need for me to change anything, but it only does this for pages in the root (eg index.htm).
Now, this site is an internal intranet for work, and as such will be published to a server there, and not the web. therefore, when i create the call to the js and css files you said i need to put the absolute path in. My question is do i put in the path for where i am doing the work (my pc hdd) or the path on the server where it will eventually be published?

If that doesn't make sense then just say so... it's pretty confusing, i know!

jscheuer1
03-27-2005, 10:07 PM
Well, I'm glad we don't have to mess with that positioning thing, especially on an intranet where I can't see it, phew! The absolute path should be the path on the server. For testing keep things relative. Even once on the server, relative paths can work as long as they point to the right files. Like for a directory one level above the root:

src=../file.js

should work if 'file.js' is in the root.

Zaph
03-27-2005, 10:40 PM
OK, i get that part... however my computer doesn't seem to be on the same wavelength! for some reason it is putting the folder name that contains all the pages from menu1 in front of the folder names for all the other pages, eg instead of showing /site/menu2/file1.html it is creating the link /site/menu1/menu2/file1.html.
The only page that it is working correctly on is the index.html, which is in the main root folder anyway.

jscheuer1
03-27-2005, 11:23 PM
What are you using to edit these files? Might be time to pull out the text editor (notepad in win, I forget what the mac people call theirs, if you have nothing else) for the finishing touches.

Zaph
03-28-2005, 12:03 AM
I'm using FrontPage 2003 to build the site and do all of my editing. The code tab is pretty useful, as it colour codes all the html for me, which makes it easier to spot mistakes such as missing close tabs, etc.

jscheuer1
03-28-2005, 02:28 AM
I don't like the WYSIWYG's but, it is how I and many others got started and some nice looking work comes out of them. That being said, one of the problems with Front Page and other programs like it is how they treat paths. I'm sure there must be a way to get them to use relative paths but, it must not be very intuitive because I often hear of folks having trouble getting them to do it. There is no harm in opening up a file in notepad and at least seeing what it looks like. I use Edit Pad Pro which has syntax coloring and can find open tags fairly well. It also has a clip collection so once you add something to it, it is always available for reuse. It can launch pages in the browser, edit multiple files at one pass and open links directly from your code for testing. It also does regular expression editing which is a very powerful way of changing every string that matches a general sort of structure instead of having to have an exact match. It also does many other languages besides JavaScript and HTML. Back to your situation, just set the relative paths using a text editor. Back up these copies and then launch them in FP, hopefully it will maintain your changes. If not, you have your back-ups.

Zaph
03-28-2005, 10:47 PM
OK, i downloaded the demo of Editpad Pro and I noticed that FP had ignored the ../ part of the links and replaced it with the folder name of menu1... stupid Microsoft. I'll need to do some more checking, but it all seems to be working fine now (fingers crossed and touch wood, etc.)

I thank you once again for your great help! :cool:

Added:
Ok, spoke too soon... sort of. the anylink.js file which contains the contents of the drop downs is located in the root folder of the site. This is also where the index.htm file is. Now, as all the other pages in the site are in subfolders i needed to add in ../ to each link to make them work. The problem I have now is that when i access the .js file from the index page it tries to go back a folder too many when creating the link. Is there a simple way around this?
I have thought of two easy ways, one of which would mean editing every page (again) and the other would be a little bit of a cheat.

1) Move anylink.js to it's own subfolder, but would require changing every page to look in new subfolder for this file.

2) Create a second anylink.js file just for the index page to use, however this sort of defeats the object of only needing to edit a single file.

Any thoughts on this or should I just go with one of those?

Zaph
03-30-2005, 08:21 AM
OK, I've gone for option 2 as it involves the least amount of editing to all the other files, although if someone does have a better way round it I would be very grateful, as like I said, it kinda defeats the object of only needing a single copy of the script.

jscheuer1
03-30-2005, 08:54 AM
One simple work around is to use absolute paths in anylink.js.

Zaph
04-25-2005, 09:22 AM
I changed all the links to absolutes and it works fine now.

One final question (i hope!) is backgrounds.
I currently have the menu sitting in a text box so that I can put a background colour behind it. This obviously makes the code very messy.
Is there anything i can put in the style sheet to get the same effect?

Thanks,
Martyn.

Zaph
04-26-2005, 12:32 PM
Curiouser and cusriouser...
As most of the page that the menu is on is a large table I added an extra row and placed the
<script src="any_menu_index.js" type="text/javascript"></script> in a central cell.
However, for some reason when I view the page in IE6 it doubles the height of the row, and I am unable to find a way of overriding it.

I then had the idea of highlighting the menu, which works. Unfortunately I get a similar problem when trying to put a border round the menu area, as it goes right to the edges of the page.

I was thinking I could put something in the css or document.write files that I call up for the menu, but I haven't a clue what to put.
Here is the css I'm currently using:

#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
display: block;
width: 100%;
}

#dropmenudiv a:hover{
background-color: 'FAFD73';
}
And the document.write:

with(document){
document.writeln('<p align="center"></font><font size="4"><a href="../index1.htm">Home</a> |&nbsp;');
document.writeln('<a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, \'150px\')" onMouseout="delayhidemenu()">News</a> |&nbsp;');
document.writeln('<a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, \'150px\')" onMouseout="delayhidemenu()">Mail Outs</a> |&nbsp;');
document.writeln('<a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, \'150px\')" onMouseout="delayhidemenu()">Contact Details</a><p>');
document.writeln('<a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, \'150px\')" onMouseout="delayhidemenu()">Office Toolbar</a></p>');
}
Any help would be most appreciated!

jscheuer1
04-26-2005, 01:12 PM
I'm not sure what you mean by a 'text box', what does that look like in HTML? One thing that occurs to me is that, if things are too wide, you might be able to make them skinnier in the style section:


#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
width:75%
}You can change 75% to be whatever % works or, depending upon how things work with your page layout, use pixels. I am really just (to mix a metaphor) grasping at straws in the dark here though. If you could post your entire page code along with any external files used, or better yet, attach a zipped version of everything with paths recursed. Or, provide enough code to replicate the situation in a simplified form (if you choose this option, make sure it works locally on your computer). I could set up a demo on my computer for testing.

Zaph
04-26-2005, 02:44 PM
When I say text box I mean the container created by Frontpage for displaying and formatting a block of text, which in actual fact turns the text into an image: and in HTML in looks absolutely terrible, hence my trying to do away with them.

I've attached all the relevant files so you can see what i mean.

Martyn.

jscheuer1
04-26-2005, 06:52 PM
As there is no table and no border behaving oddly in the example files you provide, it will be hard to fix:


However, for some reason when I view the page in IE6 it doubles the height of the row, and I am unable to find a way of overriding it.

I then had the idea of highlighting the menu, which works. Unfortunately I get a similar problem when trying to put a border round the menu area, as it goes right to the edges of the page.However, I'll give it a shot when I get more time, hopefully though you will provide more clues by then.

TODDMAN
04-26-2005, 09:32 PM
Hey Zaph,
I just read through the posts rather quickly & didn't see a link, but I noticed you are using FP2003. You can use the include command on your pages and probaly solve most of your problems. Make a new page called nav.html & build your menu their. Then on the pages you want to post your menu make a table and insert nav.html. to do this go to "insert" > "web compent" > "include content" > "page". Then any change you make to nav.html will be displayed on all pages as soon as you save it.

Zaph
04-26-2005, 09:35 PM
Sorry, thought you just wanted to see the "text box" version.
I have included into the same page a table showing the issue, along with the previous version of how i want it to look.

As you will see, the table version is a hell of a lot neater (even though it could probably be better still!) the the text box. That's WYSIWYG's for you though :rolleyes:

TODDMAN
04-26-2005, 10:21 PM
I viewed your menu in FP2003 and & noticed several things. 1. you are using xml (I'm not that fillar with the coding) 2. you have two menu's displayed, 1 at the top & 1 down and on the right side. 3. you have no coding as in "charset=iso-8859-1" 4. your DIV tags are not defined. Maybe starting a new page with just plain html and the menu code & see how this works. Right now your at 49 lines of code for a menu thats starting to bloat.
Sometimes we have to go backwards before we move on, this hold true with FP2003.

Forget item #2, I see what you mean,

Zaph
04-26-2005, 10:46 PM
TODDMAN,
Most of the extra code on that page is stuff added by FP2003 itself. All the junk in the head section:

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">and:

<!--[if !mso]>
<style>
v\:* { behavior: url(#default#VML) }
o\:* { behavior: url(#default#VML) }
.shape { behavior: url(#default#VML) }
</style>
<![endif]-->
<link rel="File-List" href="menu_test_page_1_files/filelist.xml">
<!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
is for formatting of the text box, and not added for any particular reason by myself. FP seems to create the text box in the most uneconomic way possible, and then turns the contents of the box into an image that it dumps in a folder and needs to link to.
All I did was add in my 2 lines in the head for the css call, create a text box in design view and then add the js call into the box. FP then bloated the code by 400%!
The fact it come to 49 lines is my main problem! The menu looks just how I want it with the text box, but I'm having difficulty in getting the same look just by using the table. When I take out the text box and just have the table version it comes to a staggering 16 lines in total.

With regards to

you have no coding as in "charset=iso-8859-1"
As I'm very new to the whole thing I'm not sure what you mean here.

Thanks for your help though!

Martyn.

mwinter
04-26-2005, 11:59 PM
Just so you know, I haven't been following this thread. However, I was curious what was happening three pages on, so I thought I'd take a quick peek.


Most of the extra code on that page is stuff added by FP2003 itself.That's why I can't stand the thing, but I'm not here to rant on WYSIWYG software. :p


With regards to


you have no coding as in "charset=iso-8859-1"As I'm very new to the whole thing I'm not sure what you mean here.As you may (not) be aware, HTML has an explicit character set: ISO/IEC 10646, which is basically all of Unicode. This allows you to create documents which can contain pretty much any character used in virtually any language. However, it is unrealistic to expect authors to create documents that use such a large repertoire (several thousand). After all, most text editors can only handle ASCII or ISO-8859-1 (Latin-1). So, to get around this, every document should declare a particular subset of characters. This subset - the character set - can then be used to map values onto the universal character set (UCS). With me so far? :)

There are three ways of declaring the character set. They are listed below in order of both priority and preference (highest to lowest).


The Content-Type HTTP header. Your server should be sending the MIME type of each resource transmitted. Examples are text/html, image/png, and audio/mpeg. Along with these types, you may be able to send parameters. For the text/html type, there is the optional parameter, charset. For instance,

Content-Type: text/html; charset=ISO-8859-1

How you'd get the server to send this information depends on your software. However, this is the recommended approach.


A meta element. It is possible to use a meta element to convey this information, as long as everything in the document so far has been represented in plain ASCII (which is fine for documents in English, and most Western European languages). The meta element - which should be placed right after the opening head tag, if possible - is surprisingly similar to the header syntax:


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
The last method is the charset attribute. This is only available on links to other resources (a, link, script), so I'll only mention it for completeness.
If you don't know what your server is sending, you can always find a header viewer for download on the Web. If you know Java, you could knock up your own tool with just a couple of statements involving the HttpURLConnection class.

In case you're wondering, "What if I need to use characters outside my character set?" Well, that's where character entity references come in. Though most character sets should contain characters represented by common entities like &amp; and &quot;, they may not contain &ldquo; and &rdquo; (left and right double quotes) or &eacute; (). Using entity references, you can address any character in Unicode, using either its name (if it has one) or its Unicode code point value.

Hope that helps,
Mike

TODDMAN
04-27-2005, 12:02 AM
Sounds like you need to setup the defaults in FP. The help menu (F1) will give you some help. Try this, open FP you should have a blank page. Go to File > properties > Language > under save & reload select US/WESTERN European (ISO). You should now have a blank page looking like this:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>New Page 1</title>
</head>
<body>
</body>
</html>
now insert your code per earlier instructions & see if this doesn't help your cause. FP likes to take control, you just need to let it know who's boss!

jscheuer1
04-27-2005, 07:16 AM
Zaph,

Here is a new example page:


<html><head>
<title>Menu Test Page 1</title>
<link rel="stylesheet" href="anylink_example.css" type="text/css">
<script src="anylink_example.js" type="text/javascript"></script>
</head>
<body><br>&nbsp;
<div align="center">
<table><tr>
<td style="border:1px solid black;background:#7CC6FA;text-align:center;vertical-align:center;height:2em;width:25em">
<script src="any_menu_example.js" type="text/javascript"></script></td></tr></table>
</div></body></html>I got rid of this line:

display: block;from your style sheet. I made your 'any_menu_example.js' file look like this:


with(document){
writeln('<font size="4"><a href="index.htm">Home</a> |&nbsp;');
writeln('<a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, \'150px\')" onMouseout="delayhidemenu()">News</a> |&nbsp;');
writeln('<a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, \'150px\')" onMouseout="delayhidemenu()">Mail Outs</a> |&nbsp;');
writeln('<a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, \'150px\')" onMouseout="delayhidemenu()">Contact Details</a></font>');
}I didn't touch the other .js file. All the other files in the archive were useless.

P.S. All that inline style for the <td> tag could go into the style sheet, like:


#mtd {
border:1px solid black;
background:#7CC6FA;
text-align:center;
vertical-align:center;
height:2em;
width:25em
}then change the <td> tag to just:

<td id="mtd">

jscheuer1
04-27-2005, 07:58 AM
Zaph,

For added browser compatibility and simplicity's sake, here is another version of the page and style sheet, use with my changed any_menu_example.js file from the previous post and your anylink_example.js:


<html><head>
<title>Menu Test Page 1</title>
<link rel="stylesheet" href="anylink_example.css" type="text/css">
<script src="anylink_example.js" type="text/javascript"></script>
</head>
<body><br>&nbsp;
<div align="center">
<table><tr>
<td id="mtd">
<script src="any_menu_example.js" type="text/javascript"></script></td></tr></table>
</div></body></html>

CSS code:

#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
display: block;
width: 100%;
}

#dropmenudiv a:hover{
background-color:#FAFD73;
}

a:visited {
color: blue
}

body {
margin-top:-5;
}
h1 {
margin-top:-5;
text-align:center;
}

#mtd {
border:1px solid black;
background:#7CC6FA;
text-align:center;
vertical-align:center;
height:2em;
width:25em
}

Zaph
04-27-2005, 09:29 AM
Well, I seem to be getting much closer to where I want to be with this script!

That's why I can't stand the thing, but I'm not here to rant on WYSIWYG software. :p I feel the same way, but due to my vast lack of knowledge on the subject I'm stuck with it - at least for now ;)

FP likes to take control, you just need to let it know who's boss!I've already threatened it with a large industrial magnet - that along with your suggestions seem to have made it slightly more agreeable now, but it's still not great. Still, at least it doesn't have the little paperclip...

jscheuer1:
Thats just what I needed! The menu now looks exactly how I wanted it to look in the first place. Seems so simple when I look over it, but I never would have managed it on my own.

One (final) question though; In reality I have two of these menus set up on my intranet - the menu that appears on the index page appears thus:
with(document){
writeln('<font size="4">');
writeln('<a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, \'150px\')" onMouseout="delayhidemenu()">News</a> |&nbsp;');
writeln('<a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, \'150px\')" onMouseout="delayhidemenu()">Mail Outs</a> |&nbsp;');
writeln('<a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, \'150px\')" onMouseout="delayhidemenu()">Contact Details</a></font>');
}
Is there any way to make the width of the box dynamic, so that if I add or remove any menu headings the box resizes? e.g. set the width of the box as "width of menu + 5px" or something?

Thanks for all your work guys, you've been a great help.

Martyn.
(Now i'm off to read JavaScript For Dummies)

jscheuer1
04-27-2005, 09:38 AM
Yes, you can substitute padding for width, height and alignment in the style for the <td> tag, like so:


#mtd {
border:1px solid black;
background:#7CC6FA;
padding: .4em 2.5em;
}

Zaph
04-27-2005, 10:11 AM
That works lovely now, thanks again.

I just tried to be clever but it didn't work out. I need the menu positioned higher than it will go on it's own, and tried to modify something mentioned in another thread I started for positioning a heading:
body {
margin-top:-5;
}
h1 {
margin-top:-5;
text-align:center;
}
And this is what I tried to do:

body {
margin-top:-5;
}
h1 {
margin-top:-5;
text-align:center;
}
h2 {
margin-top:10;
text-align:centre;
}and then added
<h2><span>"table here"</span></h2>around the table.

All this seemed to do was keep the menu where it was but moved the rest of the page contents downwards. I have a funny feeling that I may have mis-interpreted the code original given to me somewhat. :o

Any thoughts on a solution?

Thanks again,
Martyn.

jscheuer1
04-27-2005, 10:50 AM
Well, in my demo I have a:

<br>&nbsp;

before the table, if you take that out, it just about touches the top of the page. If that's not good enough, add this for the table tag:

<table style="margin-top:-2px">

Zaph
04-27-2005, 12:06 PM
That worked much better than my way, and a lot less effort involved!

Thanks a lot.

Martyn.