theme 220 html full part

<!--     maziekeen's theme 221 - MASONRY NAVIGATION HTML FULL PART    -->
<h3>one column style</h3>
<p>use the class <strong>one-column</strong> next to the main class <strong>masonry-navigation-item</strong> to use a column of items. if you want a list like it, use ul li. use a paragraph to blocks of texts.</p>
<p><strong>masonry-navigation</strong> is the div <strong>main of each section</strong>. as you can see it always <strong>ends in a gray line</strong>, so you notice here the separation of each session from <em>one column</em>, <em>two columns</em>, and <em>three columns</em>. so it goes: div <strong>masonry-navigation</strong> with div <strong>masonry-navigation-item</strong> inside always.</p>
<div class="masonry-navigation">
<div class="masonry-navigation-item one-column">
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
<div class="masonry-navigation-item one-column">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
</div>
</div>
<h3>two columns style</h3>
<p>use the class <strong>two-columns</strong> next to the main class <strong>masonry-navigation-item</strong> to use two columns of items. each div with the two classes mentioned will be a new column. you can use multiple ul inside one div (ex: title 4 and title 5)</p>
<p>the order will be by size of each list and not by the html, as you can see below. if you want correct order, you will have to distribute your content accordingly and try to achieve the desired order.</p>
<div class="masonry-navigation">
<div class="masonry-navigation-item two-columns">
<p><strong>title 1</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
<div class="masonry-navigation-item two-columns">
<p><strong>title 2</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
<div class="masonry-navigation-item two-columns">
<p><strong>title 3</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
<div class="masonry-navigation-item two-columns">
<p><strong>title 4</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
<p><strong>title 5</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
</div>
<h3>three columns style</h3>
<p>they stayed next to each other and the height will be defined by the content. if you don&rsquo;t want this to happen, you can add the <strong>scroll</strong> class next to <strong>masonry-navigation-item</strong>, and a scrollbar will be added. you can customize the box size and style in css.</p>
<div class="masonry-navigation">
<div class="masonry-navigation-item three-columns">
<p><strong>title 1</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
<p><strong>title 2</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
<div class="masonry-navigation-item three-columns">
<p><strong>title 3</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
<div class="masonry-navigation-item scroll three-columns">
<p><strong>title 4</strong></p>
<ul>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
<li><a href="/tagged/">lorem ipsum</a></li>
</ul>
</div>
</div>
<!--     maziekeen's theme 221 - MASONRY NAVIGATION HTML FULL PART    -->