jquery masonry on ul with nested ul

Posted by Adam Wright on Stack Overflow See other posts from Stack Overflow or by Adam Wright
Published on 2011-06-20T09:12:19Z Indexed on 2011/06/20 16:22 UTC
Read the original article Hit count: 274

Filed under:
|

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 &amp; 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>

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-masonry