PDA

View Full Version : AnyLink Drop Down Menu - Possible to move the menu a few pixels down and to the left?



mcgmark
08-12-2006, 10:28 PM
1) Script Title:
AnyLink Drop Down Menu

2) Script URL (on DD):
http://dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem:

It is not a problem just a question.

I understand that the menu drops down aligned with the edge of the link.

I would like to add to or change the javascript to move the drop down menu a certain amount of pixels down and to the left.

Possible?

Thanks,

Mark

jscheuer1
08-13-2006, 04:59 AM
This is a little trickier than it might at first seem. Moving it left or right a little makes practically no difference and can be done easily in a number of ways. Moving it down, only a little bit will create at least a small zone between the trigger and the drop down where, if the mouse is held there for a few brief moments, the drop down will disappear as, the mouse is no longer technically over it.

To overcome this problem requires a bit of styling gymnastics to make the drop down appear as though it is lower when the fact is that it just looks that way. For example, substitute these styles for use with the default menu from the demo page (additions/changes red):


<style type="text/css">

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

* html #dropmenudiv { /*Overcomes IE bug regarding transparent backgrounds*/
background-color:red!important;
filter:chroma(color=red);
}

#dropmenudiv a {
width: 100%;
display: block;
text-indent: 3px;
border: 1px solid black;
border-bottom-width:0;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
background-color:lightyellow; /* new way to give drop down a background color */
}

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

</style>

and change the bgcolor in the configuration to transparent:


var menuwidth='165px' //default menu width
var menubgcolor='transparent' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

It is this part for the #dropmenudiv { style block:


padding-top:10px;
margin-left:-10px;

That actually moves the apparent position of the drop downs, the rest just restyles the drop down to look OK with these changes. In my example, the drop downs will now appear 10px to the left and 10px lower than the default version.

mcgmark
08-14-2006, 05:06 PM
Wow!

Thank You so much! for the quick response and easy to understand!

Much appreciated!!