Help required with Anylink Drop Down Menu!

**monique** · 10-14-2006, 11:45 AM

1) Script Title: Anylink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem:

See following website for design and code: http://www.arti-mo.com/watubedoelt. Note this is still under construction and the links don't work yet!

I have used images for the menu. Suppose this is no problem in respect to accesibility for search engines?

My question is the following:

The friend I am making this website for wants the menu to be shown at the bottom with the submenu going up (in stead of drop down) and horizontal (in stead of vertical). Can this be made? What should I change in the script to make it work as required?

Thanks for any good help you can give me!

Regards,
Monique

**jscheuer1** · 10-16-2006, 06:23 AM

There is nothing so special about the menu images that they couldn't be rendered as styled text but, as long as you have the alternate attributes for the images well defined, it shouldn't be too much of a problem for search engines, text would be better for them though.

However, you've got bigger problems than that. Try looking at the page in a standards compliant browser like Fire Fox or Opera. The menu triggers and the rest of the page look similar to IE but the dropmenudiv appears at the top of the page when activated.

This is due to an overuse of position:absolute in the design of the page.

To get the menus to always move up, comment out these lines as shown:

Code:

else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
//if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
//if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
//edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
//}
}
return edgeoffset
}

But, even in IE, with all that absolute positioning, this causes them to drop up behind the other content. To fix that, add this to the style:

Code:

#dropmenudiv {
	position:absolute;
	width:820px;
	bottom:20px;
	z-index:1;
}

However, as I indicated, the entire page should be redesigned without so much absolute positioning if you want it to be accessible in other browsers.

**jscheuer1** · 10-16-2006, 06:57 AM

I looked into this a bit more, here is an alternate stylesheet that makes this layout work in other browsers as well as IE:

Code:

<style type="text/css">

body {
	background-color:#F5D388;
	scrollbar-face-color:#f5d388;
	scrollbar-highlight-color:#f5c55c;
	scrollbar-3dlight-color:#f3ede0;
	scrollbar-darkshadow-color:#f5c55c;
	scrollbar-shadow-color:#f3ede0;
	scrollbar-arrow-color:#502800;
	scrollbar-track-color:#f3ede0;
}

#bg {
	position:relative;
	width:820px;
	height:520px;
	background-image: url(afbeeldingen/bg.jpg);
	border:0px;
	font-family:"verdana","arial","helvetica","sans-serif";
	font-size:12px;
	color:#502800;
	margin:5% auto;
}

* html #bg {
top:expression(Math.max(document.documentElement.clientHeight/2-260, 0)+'px');
}

#logo {
	position:relative;
	width:200px;
	height:100px;
}

#tekst {
	position:relative;
	width:770px;
	height:300px;
	background-color:transparent;
	text-align:left;
	overflow:auto;
}

#menu {
	position:relative;
	width:820px;
	margin-left:8px;
}
#menu a {
display:block;
float:left;
}

#dropmenudiv {
	position:absolute;
	z-index:1;
}

</style>

It requires a DOCTYPE for the page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>

<head>
<title>Wat U bedoelt - tekstbureau, tekstschrijven, teksttrainingen, laten schrijven, leren schrijven</TITLE>

These changes to the script:

Code:

var menuwidth='150px' //default menu width
var menubgcolor='transparent'  //menu bgcolor

And the width parameter used here and similar should be 150px:

Code:

onMouseover="dropdownmenu(this, event, menu1, '200px')"

not 200px as shown.

**monique** · 10-16-2006, 10:45 AM

Thanks very much John.

I hadn't checked yet in the other browsers, and you were absolutely right, it looked awfull. Further I didn't realise that absolute positioning could cause such big problems...

I have followed your advise and made all the changes. Now it looks much better than before (in all browsers).

Have to bother you with two more questions, an 'old' one and a 'new' one:

1) Is there a way to show the submenu in a horizontal way in stead of the vertical block?

2) After the changes now in IE there is a slight stroke right from bg in a lighter colour which shouldn't be there. It only appears in IE, not in the other browsers. How did that come and how can I improve that?

Thanks again and have a nice day.

Regards,
Monique

**jscheuer1** · 10-16-2006, 11:04 AM

I'm not clear on what you mean by "show the submenu in a horizontal way". About the "stroke", that is the background image bleeding, add this:

Code:

#bg {
	position:relative;
	width:820px;
	height:520px;
	background-image: url(afbeeldingen/bg.jpg);
	background-repeat:no-repeat;
	border:0px;
	font-family:"verdana","arial","helvetica","sans-serif";
	font-size:12px;
	color:#502800;
	margin:5% auto;
}

**jscheuer1** · 10-16-2006, 11:15 AM

I think I got an idea of what you might mean by horizontal, if you make these like so:

Code:

onMouseover="dropdownmenu(this, event, menu1, '480px')"

and:

Code:

onMouseover="dropdownmenu(this, event, menu2, '640px')"

The menus will be horizontal. All that appears to be required is that there be enough width provided and they will stretch out by themselves but, at some point you will (especially in smaller windows) come up against the right edge of the window, this may have odd results.

Added Later:

I figured out a way to modify the script for this new problem, if this type of horizontal display is what you have in mind.

**monique** · 10-17-2006, 08:44 AM

I changed the code for the background-image accordingly and it looks much better now. How simple can it sometimes be...?

Indeed you had the right idea of what I meant by 'horizontal'. If you now look again on the site (http://www.arti-mo.com/watubedoelt) you will see the menu horizontal. Meanwhile I created a few more items in the various menus (for this I used the image of 'persbericht' a few times). Is there a way to start the submenu always on the left - so that it will always start above 'home'? Or do you think that will look 'confusing' to visitors of the site?

Thanks very much again!

Monique

**jscheuer1** · 10-18-2006, 08:51 AM

All you need to do is set the home link as the object in the function dropdownmenu(obj, e, menucontents, menuwidth). To do that, add this line:

Code:

function dropdownmenu(obj, e, menucontents, menuwidth){
var obj=document.getElementById? document.getElementById('setleft') : document.all['setleft'];
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhid . . .

And add the id to the home link:

Code:

<a id="setleft" href="home.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '480px')" onMouseout="delayhidemenu()"><img src="afbeeldingen/menuknophome.jpg" border="0" alt="home"></a>

**monique** · 10-18-2006, 06:09 PM

Wow, this is really wonderful!

I very much envy your knowledge about all this!

Tomorrow I have a meeting with my friend to discuss everything. Hope she'll like it too...

Thanks, Monique

**monique** · 10-25-2006, 02:54 PM

Hi John,

Sort of promised you to come back on my 'challenges'. As said I had a meeting with my friend to discuss the design for her website. She loved much of it though not all, so I had to make some changes again. The submenu is now again showing vertical... all that effort for nothing... Well I believe I have learned a lot anyway

Personally I would make the colours/design a bit more vivid, but than, who am I... it's her website...

Can I ask you one more question please?

You know I have fallen in love with Dynamic Drive and I definitely want to use only Dynamic Drive scripts Does Dynamic have a script like this: http://www.websonic.nl/javascripts/s...lk/status1.php? I'd like to set up a text in the status bar that is "being typed" while reading it... Or do I have to ask this question in another forum?

Many many thanks,
Monique

Thread: Help required with Anylink Drop Down Menu!

Thread Tools

Search Thread

Help required with Anylink Drop Down Menu!

Bookmarks

Bookmarks

Posting Permissions