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;
}
