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?
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:
$('#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
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.
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
