Zurb Foundation's tab in quadrant layout -


i use code found zurb foundation documentation. unfortunately, tabs laid out horizontally. need them - enter image description here

here tab code zurb foundation , link well

http://foundation.zurb.com/docs/components/tabs.html#tabs-deeplink-2

<ul class="tabs" data-tab role="tablist">    <li class="tab-title active" role="presentational" ><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">tab 1</a></li>    <li class="tab-title" role="presentational" ><a href="#panel2-2" role="tab" tabindex="0"aria-selected="false" controls="panel2-2">tab 2</a></li>    <li class="tab-title" role="presentational"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">tab 3</a></li>    <li class="tab-title" role="presentational" ><a href="#panel2-4" role="tab" tabindex="0" aria-selected="false" controls="panel2-4">tab 4</a></li>  </ul>  <div class="tabs-content">    <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">      <h2>first panel content goes here...</h2>    </section>    <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">      <h2>second panel content goes here...</h2>    </section>    <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">      <h2>third panel content goes here...</h2>    </section>    <section role="tabpanel" aria-hidden="true" class="content" id="panel2-4">      <h2>fourth panel content goes here...</h2>    </section>  </div>

if use max width on .tabs should work fine.

.tabs {   max-width: 300px; } 

because tabs inline , float: left max-width constrain them , make them go down vertically.

working example: http://codepen.io/nathanw/pen/zxgjro


Comments

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

datatable - Matlab struct computations -