Menu icon Foundation
Vertical sub-nav

Is it possible to make a vertical sub-nav? In the doc page there's only the horizontal one and I can't find out how to display the elements vertically

sub-nav

Is it possible to make a vertical sub-nav? In the doc page there's only the horizontal one and I can't find out how to display the elements vertically

Droideka over 5 years ago

You can find that in the doc http://foundation.zurb.com/docs/components/sidenav.html

Made you a live exemple : http://jsfiddle.net/gRtrX/84/

<div class="row">
  <div class="small-2 columns">
    <ul class="side-nav">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </div>
  <div class="small-10 columns">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem earum eius ex illum tempore reiciendis, perferendis id numquam asperiores hic. Officia fugit vero est quisquam eius cumque inventore, tenetur maiores?
  </div>
</div>

Joe Windeknecht over 4 years ago

Hey there Luca, you would just need to add a clear:
CSS
.sub-nav dt,
.sub-nav dd,
.sub-nav li {
clear: both;
}