Page 2 of 2 FirstFirst 12
Results 11 to 14 of 14

Thread: AnyLink Vertical AND Dropdown Menus

  1. #11
    Join Date
    Aug 2004
    Posts
    9,889
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    Well, having a drop down menu have a completely unique style of its own can be done by first removing the CSS that styles the ID of the drop down menu:

    Code:
    #dropmenudiv{
    position:absolute;
    background-color: #E3FFB0;
    border:1px solid black;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }
    
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: #C7FF5E;
    }
    Then, create separate classes with all the necessary CSS targeting either the top or side drop down menu. You can't define more than one drop down menu if that's what you're asking, as all menus on the page share that menu (with id="#dropdowndiv").

  2. #12
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default tried your code above

    and not matter what I try, i always get the sidemenudiv style sheet, I never got the topmenudiv style sheet no matter what i passed as istop.

  3. #13
    Join Date
    Aug 2004
    Posts
    9,889
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    I assume you've defined two CSS classes, something like:

    Code:
    .topmenudiv{
    position:absolute;
    background-color: lightblue;
    border:1px solid black;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }
    
    .topmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    }
    
    .topmenudiv a:hover{ /*hover background color*/
    background-color: #C7FF5E;
    }
    
    .sidemenudiv{
    position:absolute;
    background-color: silver;
    border:1px solid black;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }
    
    .sidemenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    }
    
    .sidemenudiv a:hover{ /*hover background color*/
    background-color: #C7FF5E;
    }

  4. #14
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Both AnyLinks, Multiple Classes

    For Using Both Drop Down and Vertical forms, i found the best solution for me was to keep both the .js separate, and simply rename one of them, so that all occurrences of the functions/divs were named different from the Drop Down version. In my case, I used "sidemenu" for the function. And "sidemenudiv" for the div names. I also made sure all my side menu array elements were named "side1", "side2" etc...

    For Multiple Class Function:

    change:
    Code:
    dropmenuobj.className=istop? topmenudiv : sidemenudiv
    to:
    Code:
    switch (istop)
    {
    case 1:
      dropmenuobj.className='yourclassone'
      break    
    case 2:
      dropmenuobj.className='yourclasstwo'
      break
    case 3:
      dropmenuobj.className='yourclassthree'
      break
    default:
      dropmenuobj.className='yourclassdefault'
    }
    your in page link:
    Code:
    <a href="#" onMouseover="sidemenu(this, event, side2, '150px', 1)" onMouseout="delayhidemenu()"
    hope this helps others who may not have found any other ways.

Tags for this Thread

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
  •