so i'm a few years behind, but i'm finally getting around to trying to update my sites so they're responsive and will work on mobiles/tablets/touchscreen/laptop/desktop
mostly its been fine, media queries are great, i've got pages full screen from my desktop to a mini mobile, navigation menus change to mobile friendly menus at set sizes, side menus drop below content, all good
then i noticed a problem ... its not really a responsive issue, and its always been a possibility, i'd just never noticed it before
this is how things should be;
but if a menu 0 option is too near the right edge of the screen, any dropdown menu from that displays off the screen
i have one site that has loads of menu options, and without setting the width, you never know where any one option will end up
in css you can display the dropdown to the left or right, but - and this is the problem! - you can't choose to display it left or right depending on its location and available screen width!
so in the second picture, menu 2 is ok, but menu 3 should display to the left
i've been googling this problem all day, i thought there must be a solution to this - a premade jquery menu or something, but i've found nothing
anyone else ever come across this? anyone found a solution to it?! any ideas on one?!
i'm trying to work on some jquery at the moment to work out based on postition and screen width if it should display left or right, and then change the css to display left or right, but its a nightmare. i've kinda got it working one level down, but anything further and it all goes to shit
