2011-06-20 20 views
1

私は、相互にネストされたレベルのサイトマップのフッターナビを作成しようとしています。私はパディングとマージンが一貫しており、ネストされた項目に応じて変更されないように石工を使用したい。その焼成式の石積みは、最初の(ul)を選択するために石工の呼び出しを変更した場合、相対的なスタイルを入れ子にしたulに追加すると、入れ子にされたliが1行に表示されます。jquery masonry on ul with nested ul

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

答えて