Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Multiple Columns in drop down box?

  1. #1
    Join Date
    May 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Multiple Columns in drop down box?

    1) Script Title:
    AnyLink Drop Down Menu

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

    3) Describe problem:
    Hi there,

    I am using the script designed above to create drop down boxes on my site. The problem is a couple of them have MANY (30+) options in the drop down, so it adjusts to start at the top of the page when you hover over it. Here's the link, so you can see.

    http://www.ucslhh.com/ucsl.html

    The first 2 ("league info" and "season info") work fine, but you'll see what I mean when you hover over "clubhouses".

    There are so many options that you have to scroll down to see them all.

    I was wondering if there's a way to make that drop down box become 2 columns, that way the links will start BELOW the actual image they're coming off of (as they do on the first 2), it won't go all the way to the bottom of the screen, and it's easier to find the option needed without having to scroll down. Is it possible?

    Thanks in advance,

    Mike

  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 worked out well here. First, I made up a class in the stylesheet for the clubhouse menu (note - these styles will get added to the #dropmenudiv a ones, but only for links with the class="clubs"):

    Code:
    <style type="text/css">
    
    #dropmenudiv{
    position:absolute;
    border:1px solid black;
    border-bottom-width: 0;
    font:normal small-caps 10px Agency;
    line-height:18px;
    z-index:1;
    }
    
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: light;
    }
    
    #dropmenudiv a.clubs {
    width:50%;
    float:left;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: lightgray;
    }
    
    .style1 {color: #FFFFFF}
    </style>
    Next, I inserted the class name for each link in that menu's array:

    Code:
    var menu3=new Array()
    menu3[0]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T10.htm" target="1">Anaheim Angels</a>'
    menu3[1]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T25.htm" target="1">Arizona Diamondbacks</a>'
    menu3[2]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T14.htm" target="1">Atlanta Braves</a>'
    menu3[3]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T0.htm" target="1">Baltimore Orioles</a>'
    menu3[4]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T1.htm" target="1">Boston Red Sox</a>'
    menu3[5]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T19.htm" target="1">Chicago Cubs</a>'
    menu3[6]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T5.htm" target="1">Chicago White Sox</a>'
    menu3[7]='<a class="clubs" href="http://ucslh . . . etc.
    Finally, I edited the call for menu3 to allow it to be wide enough for two columns:

    Code:
    <a href="default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu3, '250px')" onMouseOut="delayhidemenu()"><img src="images/ucsl_10.jpg" alt="" width=85 height=22 border="0"></a>
    Notes: The clubs class adds to the #dropmenudiv a styles as I said and actually changes the width to 50%. The float left appears to be required to create the columnar look. However, a float often needs to be later cleared. I didn't do that in this case as, it didn't seem to be necessary.
    - John
    ________________________

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

  3. #3
    Join Date
    May 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wow, that's awesome. Thank you very much.

    Now I'm more than likely going to run into that problem with the "salaries" one too, because it's going to have a similar number of links. Should I just put them as the class "clubs" as well (in the link for that menu's) array, or should I add another class in the style sheet for them separately, as you did with that? I'm assuming I can just give them the class "clubs", since I'm not doing anything really different there, but I just wanted to make sure. As you could probably tell if you viewed the code, I've never done this before, and am just taking the learn as I go approach, after my friend got it all started.

    Thanks again, I really appreciate it.

  4. #4
    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

    You can probably use the same class for salaries, as long as you make sure that the menu call (the 'finally' part from my last post) for the salaries drop down is set wide enough to allow two columns.
    - John
    ________________________

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

  5. #5
    Join Date
    May 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yup, that worked.

    On a semi-unrelated note...is there a way to make it so the links don't change color after they are visited? Right now it's set to have them all blue (I'd prefer black, but that's no big deal), but when you click them they become purple, which I definitely want to do away with. I don't see anything in the code for visited links.

  6. #6
    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

    You can add a rule like that:

    Code:
    #dropmenudiv a:visited, #dropmenudiv a.clubs:visited { /*visited color*/
    color: #000000;
    }
    - John
    ________________________

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

  7. #7
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    You can add a rule like that:

    Code:
    #dropmenudiv a:visited, #dropmenudiv a.clubs:visited { /*visited color*/
    color: #000000;
    }
    that only accounts for the visited, he said he would prefer it to all be black so I would add that into your declaration

    Code:
    #dropmenudiv a:link, #dropmenudiv a.clubs:link { /*original color*/
    color: #000000;
    }
    #dropmenudiv a:visited, #dropmenudiv a.clubs:visited { /*visited color*/
    color: #000000;
    }
    #dropmenudiv a:active, #dropmenudiv a.clubs:active { /*while link is being clicked color*/
    color: #000000;
    }
    #dropmenudiv a:hover, #dropmenudiv a.clubs:hover { /*mouseover color*/
    color: #000000;
    }
    or you can just do a generic one to cover all your bases

    Code:
    #dropmenudiv a, #dropmenudiv a.clubs{ /*color for all link states*/
    color: #000000;
    }

    Note: if you want all of your links on the page to be this way, get rid of the prefix's and just set
    Code:
    a { /*color for all link states*/
    color: #000000;
    }

  8. #8
    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

    Quote Originally Posted by boogyman View Post
    that only accounts for the visited, he said he would prefer it to all be black so I would add that into your declaration

    . . .

    or you can just do a generic one to cover all your bases

    Code:
    #dropmenudiv a, #dropmenudiv a.clubs{ /*color for all link states*/
    color: #000000;
    }

    Note: if you want all of your links on the page to be this way, get rid of the prefix's and just set
    Code:
    a { /*color for all link states*/
    color: #000000;
    }
    These last two ideas won't work in IE, perhaps others.
    - John
    ________________________

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

  9. #9
    Join Date
    May 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Awesome, that worked! Looks much better now.

    Now one of the people who visited is having a problem. I don't have any in FF or IE, but he does in IE 7.
    all the links(except for the news link) for me send me to www.ucslhh.com/default/

    then i get a no web page found error...

    internet explorer 7 is my browser...even that on says default on it

    when i goto league info...all i get is a web page that is a bigger version of the info on the front page...

    just trying to help you out with the info
    Does anyone know why he'd be having this problem? Everything works fine for me, so I'm a little lost here...I probably slopped up some code that effects him but not me, I'd imagine...

  10. #10
    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

    Your friend has javascript disabled and is talking about the link behavior with no drop downs. Without javascript enabled the 'header' links are active. You should either configure them to lead to alternate, javascript disabled content or to a page (perhaps targeted into the iframe) that informs folks that they need to enable javascript to view the page properly.
    - John
    ________________________

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

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
  •