I want to position all
the divs to line up to
the left on
the same x coordinate so it looks nice.
Notice
the picture below, how based on
the number of nested categories
the div (and its contents) show up at slightly different x coordinates. I need to have
the div's line up at exactly
the same x coordinate no matter how deeply nested. Note,
the bottom most category always has a div for
the content, but that div has to be situated
inside the last < li .
I am using an unordered list to display
the menu and thought
the best solution would be to grab
the root category (Cat 2, and mCat1) and obtain their left offset using jquery, then simply use that value to update
the positioning of
the div...but I couldn't seem to get it to work just right. I would appreciate any advice or help that you are willing to give.
Heres
the HTML
<ul id="nav>
<li>Cat 2
<ul>
<li>sub cat2</li>
</ul>
</li>
<li>mCat1
<ul>
<li>Subcat A
<ul>
<li>Subcat A.1
<ul>
<li>Annie</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Heres some jquery I tried (I have do insert
the div
inside this .each() loop in order to retrieve some values, but basically, this selector is grabbing
the last < li in
the menu tree and placing a div after it and that is
the div that I want to position.
the 245 value was something I was playing around with to see how I could get things to line up, and I know its out of wack, but
the problem is still
the same no matter what I do:
$("#nav li:not(:has(li))").each(function () {
var self = $(this);
var position = self.offset();
var xLeft = Math.round(position.left)- 245;
console.log("xLeft:", xLeft );
self.after( '<div id="' + self.attr('p_node') + '_p_cont_div" class="property_position" style="display:none; left:' + xLeft + 'px;" /> ' );
});
Heres
the css:
.property_position{
float:left;
position: relative;
top: 0px;
padding-top:5px;
padding-bottom:10px;
}
