SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Multi column drop down menu help

    hi all

    i used the multicolumn dropdown menu from Paul's website examples

    http://www.pmob.co.uk/temp/dropdown-fullwidth2.htm

    Now i want to modify it according to my needs :

    1) I want to increase width for "SERVICES" drop down menu and make it 3 column
    2) I want to make "CONTACT" Drop down menu right aligned so that it stays within the layout.

    So do i have to repeat all the "css" and modify it for every drop down menu.

    here is my example where contact dropdown is moving out of layout
    http://wdpixels.com/coding/dropdown-fullwidth2.htm



    vineet

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Try changing the following widths from 300px to 450px:

    Code:
    #nav li ul {
    position: relative;
    margin-left: -999em;
    left: 0;
    width: 450px;
    border-top: 1px solid red;
    }
    
    #nav li ul li {
    width: 450px;
    border: 1px solid red;
    border-top: none;
    background: #06C;
    float: left;
    padding: 2px;
    }

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi ralph

    You code increases width for all dropdown menus.
    I want to increase width for only 1 menu.

    vineet

    Quote Originally Posted by ralph.m View Post
    Try changing the following widths from 300px to 450px:

    Code:
    #nav li ul {
    position: relative;
    margin-left: -999em;
    left: 0;
    width: 450px;
    border-top: 1px solid red;
    }
    
    #nav li ul li {
    width: 450px;
    border: 1px solid red;
    border-top: none;
    background: #06C;
    float: left;
    padding: 2px;
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    O well, just give that services ul a special class (class="services"):

    Code:
    #nav li ul.services {
    width: 450px;
    }
    
    #nav li ul.services li {
    width: 450px;
    }
    Edit: actually, do this:

    Code:
    #nav li ul.services {
    width: 450px;
    }
    
    #nav li ul.services > li {
    width: 450px;
    }
    (One minor but important change.)

  5. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi ralph

    now the width is fine for "SERVICES" but it goes out of the layout

    http://wdpixels.com/coding/dropdown-fullwidth2.htm

    How can i center align it or right align it like the screenshot below

    http://wdpixels.com/coding/centermenu.gif

    vineet

  6. #6
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Another problem i noticed is that z-index doesnt works.

    the menu laps over the content

    see this link
    http://wdpixels.com/coding/dropdown-fullwidth2.htm

    vineet

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Those drop lists should be position: absolute rather than relative. See Paul's original example.

  8. #8
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ok thanks

    Quote Originally Posted by ralph.m View Post
    Those drop lists should be position: absolute rather than relative. See Paul's original example.

  9. #9
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi

    How can i split the "CLIENTS" list Drop down menu into 4 columns.

    It is a list of around 30 clients.

    http://wdpixels.com/coding/clients_1ul.htm

    all clients are inside single <ul></ul>

    vineet

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It's the same principle as for the Services drop down. Just repeat what you did there, with separate <ul>s for each column, and set the container widths to something like 600px.

  11. #11
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi ralph

    If i have to do it with single <ul></ul> then what will be the solution

    vineet

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by vinpkl View Post
    If i have to do it with single <ul></ul> then what will be the solution
    Not so easy. But why this restriction, given that you were able to do it with the Services items.

    You could float all of the List items, but their order would flow in rows rather then columns.

  13. #13
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi ralph

    i added this, but list items doesnt float left
    Code:
    #nav li ul.clients > li li {
    float:left;
    }
    http://wdpixels.com/coding/clients_1ul.htm

    vineet

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You didn't increase the width of the ul so that they can float:

    Code:
    #nav li ul.clients ul {
    position: relative;
    float: left;
    width: 600px;
    margin: 0 5px 0 0;
    display: inline;
    top: 0;
    border: none;
    }

  15. #15
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    oh yes i forgot.

    Thanks a lot Ralph.

    All is well now

    vineet

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Cool. Glad you got it working.


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
  •