jquery masonry on ul with nested ul
- by Adam Wright
I'm trying to create a footer nav of a sitemap with levels nested within each other. i want to use masonry so the padding and margin is consistant and not changed depending on nested items. its firing masonry but its adding the relative style to the nested ul if i change the masonry call to select just the first() ul then nested li appear on one line.
any ideas?
<div id="links">
<ul ><li class="box"><a href="/Industries.aspx" >Industries</a></li><li class="box"><a href="/Services.aspx" >Services</a></li><li class="box"><a href="/Quality---Regulatory.aspx" >Quality & Regulatory</a></li><li class="box"><a href="/About.aspx" >About</a><ul ><li class="box"><a href="/About/Our-Story.aspx" >Our Story</a></li><li class="box"><a href="/About/Our-Mission.aspx" >Our Mission</a></li><li class="box"><a href="/About/Our-Core-Values.aspx" >Our Core Values</a></li></ul></li><li class="box"><a href="/News.aspx" >News</a><ul ><li class="box"><a href="/News/Events.aspx" >Events</a></li></ul></li><li class="box"><a href="/Careers.aspx" >Careers</a></li><li class="box"><a href="/Contact.aspx" >Contact</a></li><li class="box"><a href="/tests.aspx" >tests</a></li></ul>
</div>
<script type="text/javascript">
$('#links ul').masonry({
singleMode: true,
// Disables measuring the width of each floated element.
// Set to true if floated elements have the same width.
// default: false
columnWidth: 182,
// Width in pixels of 1 column of your grid.
// default: outer width of the first floated element.
itemSelector: '.box:visible',
// Additional selector to specify which elements inside
// the wrapping element will be rearranged.
// Required for Infinite Scroll with window resizing.
resizeable: true,
// Binds a Masonry call to window resizes
// so layout appears fluid.
// default: true
animate: false,
// Animates layout rearrangements.
// default: false
saveOptions: true
// Masonry will use the options from previous Masonry
// calls by default, so you only have to enter in options once
// default: true
});
</script>
