Results 1 to 3 of 3

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

  1. #1
    Join Date
    Aug 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink Drop Down Menu - Possible to move the menu a few pixels down and to the left?

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    <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:

    Code:
    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:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wow!

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

    Much appreciated!!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •