SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    698
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Stop wide menu children going off screen

    Hi guys,

    Simple query, dunno about the solution though; I have a horizontal menu built in un-ordered lists and powered simply by CSS. The children drop down vertically below. Same as many menus. The problem is that the drop downs are quite wide and as you get across towards the right they tend to overflow off the screen. I've seen some solutions whereby the right hand edge of the menu never goes past the right hand edge of the viewport but can I find one? Does anyone have a solution or an example I could take a look at? I am using jQuery on the site as well so if there's a jQuery solution then that would be acceptable too. I suspect I basically need to do some checking of whether the right hand side is wider than the container and then move it left by how ever many pixels it's gone over by?

    Thanks

  2. #2
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI Antnee
    provide your website's link
    so i can check
    b/w u can try with css style
    "position:absolute;
    right:0;"

    for dropdown menu
    Last edited by ralph.m; Jun 22, 2012 at 00:58. Reason: removed fake sigs

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    698
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    I can't give you a URL because it's on an intranet, however it's a very simple, traditional CSS only horizontal menu with vertical drop downs that just happen to be very wide.

    Your CSS solution has no effect.

    I've come up with a jQuery solution that works, though I'm sure it could be prettier:

    Code JavaScript:
    $('#headerMainMenu li').hover(function(){
        var marginAdjust = 100;
        var parentElement = $(this).parent();
     
        var navPosition = $(parentElement).position();
        var navWidth = $(parentElement).width();
        var navRight = navPosition.left+navWidth;
     
        var position = $(this).position();
        var thisWidth = $(this).children('ul').width();
        var thisRight = position.left+thisWidth-marginAdjust;
     
        if (thisRight > navWidth) $(this).children('ul').css('margin-left', navWidth-thisRight);
    });

    It requires a little adjusting because of margins etc, but otherwise that pretty much does the job. The menus now no longer go past the right hand side of the screen

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There is no automatic way to do this with CSS and you would need js logic to determine when menus are too wide to fit - as you have done.

    I usually just do it manually and add a class to the menu items near the right edge and make them pop out using right:0 instead of left:0 as mentioned by the previous poster.

  5. #5
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    698
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that won't work in my case because the page is responsive (and the menus vary) so I don't know where the menu will be until it opens up. I need the same CSS to apply to all menus as well. Either way I figured a solution all by myself. I feel so grown up

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Antnee View Post
    Either way I figured a solution all by myself. I feel so grown up
    lol - well done

  7. #7
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    698
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's a shame you can't do something like min-right-margin:0px; isn't it? No? Just me?


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
  •