SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    12
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Remote rollover with clickable links

    Hi, I have a client that wants a menu that flys out to another cell in a table. I know this can be done with a remote rollover. The problem is that when the menu flys out into the other cell there are two links that will be available there (see screenshot).I cannot figure it out. Any ideas would be appreciated.
    screen.gif

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Vertical rollovers are pretty easy to do. It's not quite clear what you want, though. Something like this?

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

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    12
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The menu must span two table cells.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sausydog View Post
    The menu must span two table cells.
    That's not very clear. Firstly, forget table cells, as they have no business here. Do you mean a vertical version of this, where there multiple levels of submenus?

    http://www.pmob.co.uk/temp/drop-down-multi.htm

  5. #5
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    12
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It is a redesign of a site with tables. The client wants the navigation in the left cell and have the menu appear in the right cell (as per the screenshot) It is not a basic flyout menu. Those are a breeze. I have included another screenshot with more explanation.
    screen1.gif

  6. #6
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    12
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi, Where would I go to alter the position from the top. I want to move the menu up slightly. Does that make sense? Thanks.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Assuming that the menu is written with a list, and assuming that vertical margins have not been zeroed, you can do this:
    Code:
    ul {margin:0}
    Another guess would be to reduce any vertical padding in the td's.

    A link to the site would be most helpful so we could see the actual code at work.

  8. #8
    Team SitePoint
    Join Date
    Jan 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey @sausydog ;
    We're running a test of our live CSS problem solving product today.
    If you want to utilise our experts to get your site sorted out immediately, you can check it out here http://codefix.sitepoint.com/

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Your client is wrong ( sometimes you have to explain that to them) , semantically you should use tables for anything else BUT tabular data. and a menu is NOT tabular.

    Also, a drop down menu is semantically a nested list, which conveniently allows for what you are trying to do since the sub menu are contained in the parent elements.


    anyway, assuming your client is stubborn and insist on laying out his/her site with tables I would.. CHEAT

    1. code the menu in the form of a list and place it in ONE TD, leave the other one 'blank'
    2. wrap the menu in a div ( because TDs wont take position :relative ) , and give the DIV position relative the same dimensions as the cell.
    3. AP the UL ULs to appear to left:100%; and with the same height and width as the parent DIV
    4. tweak as need be.

    BONUS: This is possibly even more robust than if what you were asking for were actually possible because if your content extends past the container it can overflow w/o breaking the whole layout. If this were possible to code with tables ( let's assume through the 'magic' of .js) if your content ever extended past the originally planed dimension the TDs would stretch and thus break the layout. Really tables for this= bad.

    hope that helps


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
  •