Question

I’m building a website for a company and having a hard time with positioning. I want the drop-down menus to position either left or right based on where they are on the screen. Here’s a screenshot of what happens currently: link

Also, If you want to take a look at the live site, here’s a link to the demo.

Any help would be appreciated.

Thanks!

Edit: Not to throw another confusing element in, but this particular site is responsive. When I go down to an Ipad size screen the problem get’s worse.

Answer 1

Your container is 960px. The dropdown menu has an auto width so you’ll need to estimate the width of each menu (let’s say 200px).

Now, you can use document.body.offsetWidth to determine the width of the browser window. This is what I would suggest:

function on_hover() {
    ...
    dropdown_width = 200;
    container_width = 960;
    if (document.body.offsetWidth < container_width + dropdown_width) {
        dropdown_from_left();
    } else {
        dropdown_from_right();
    }
    ...
}

Hopefully this is enough for you to get started. Enjoy and good luck!