Search code examples
javascriptjquerydrop-down-menualignmentsubmenu

Searching for formula to align submenus direction in menu along the width

Currently I'm trying to achieve this

submenus aligning

With this: http://jsfiddle.net/EJXNV/3/

HTML:

<div>
<ul>
<li><a href="">Menu</a>
    <ul>
        <li><a href="">Menu item 1</a></li>
        <li><a href="">Menu item 2</a></li>
        <li><a href="">Menu item 3</a></li>
    </ul>
</li>
<li><a href="">Menu</a>
    <ul>
        <li><a href="">Menu item 1</a></li>
        <li><a href="">Menu item 2</a></li>
        <li><a href="">Menu item 3</a></li>
    </ul>    
</li>
<li><a href="">Menu</a>
    <ul>
        <li><a href="">Menu item 1</a></li>
        <li><a href="">Menu item 2</a></li>
        <li><a href="">Menu item 3</a></li>
    </ul>
</li>
<li><a href="">Menu</a>
    <ul>
        <li><a href="">Menu item 1</a></li>
        <li><a href="">Menu item 2</a></li>
        <li><a href="">Menu item 3</a></li>
    </ul>
</li>
<li><a href="">Menu</a>
    <ul>
        <li><a href="">Menu item 1</a></li>
        <li><a href="">Menu item 2</a></li>
        <li><a href="">Menu item 3</a></li>
    </ul>    
</li>
<li><a href="">Menu</a>
    <ul>
        <li><a href="">Menu item 1</a></li>
        <li><a href="">Menu item 2</a></li>
        <li><a href="">Menu item 3</a></li>
    </ul>
</li>

JS:

var coef = 7.5;

$("div > ul > li").each(function () {
$(this).children("ul").css("left", 
                       ($(this).position().left 
                       / coef) 
                       * (-1));
 });

But I can't figure out from where I should took that coefficient = 7.5 (I've got it empirically).

Please, help me to find out what formula I should use to get this coefficient.

Solution

  • I was able to figure out it by myself:

    $("div > ul > li").each(function () {
var coef = $("div > ul > li").last().position().left / ($(this).children("ul").width() -  $(this).width());
$(this).children("ul").css("left", ($(this).position().left / coef) * (-1));
 });

    http://jsfiddle.net/EJXNV/4/

    Works with any width of any element (except the container, it must be fixed width and relative).