Menu icon Foundation
Top bar + side bar + content + footer

Hi!
I need to create a lyout where I have four main parts: a top bar, a side bar, a content and a footer. I've created a top-bar and a icon-bar, but now I don't know how to put the content and the footer.

Can you help me, please? I'm new to Foundation and I'm learning and discovering this fantastic framework.
Thank you in advance.

  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">Minha empresa</a></h1>
      </li>
       <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="active"><a href="#">Ajuda</a></li>
        <li class="has-dropdown">
          <a href="#">Fulano de tal</a>
          <ul class="dropdown">
            <li><a href="#">Configurações pessoais</a></li>
            <li><a href="#">Sair do sistema</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </nav>

  <div class="icon-bar vertical five-up">
    <a class="item">
      <i class="fi-home"></i>
      <label>Item 1</label>
    </a>
    <a class="item">
      <i class="fi-bookmark"></i>
      <label>Item 2</label>
    </a>
    <a class="item">
      <i class="fi-info"></i>
      <label>Item 3</label>
    </a>
    <a class="item">
      <i class="fi-mail"></i>
      <label>Item 4</label>
    </a>
    <a class="item">
      <i class="fi-like"></i>
      <label>Item 5</label>
    </a>
  </div>

Mylayout1

top-barbarnavbar

Hi!
I need to create a lyout where I have four main parts: a top bar, a side bar, a content and a footer. I've created a top-bar and a icon-bar, but now I don't know how to put the content and the footer.

Can you help me, please? I'm new to Foundation and I'm learning and discovering this fantastic framework.
Thank you in advance.

  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">Minha empresa</a></h1>
      </li>
       <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="active"><a href="#">Ajuda</a></li>
        <li class="has-dropdown">
          <a href="#">Fulano de tal</a>
          <ul class="dropdown">
            <li><a href="#">Configurações pessoais</a></li>
            <li><a href="#">Sair do sistema</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </nav>

  <div class="icon-bar vertical five-up">
    <a class="item">
      <i class="fi-home"></i>
      <label>Item 1</label>
    </a>
    <a class="item">
      <i class="fi-bookmark"></i>
      <label>Item 2</label>
    </a>
    <a class="item">
      <i class="fi-info"></i>
      <label>Item 3</label>
    </a>
    <a class="item">
      <i class="fi-mail"></i>
      <label>Item 4</label>
    </a>
    <a class="item">
      <i class="fi-like"></i>
      <label>Item 5</label>
    </a>
  </div>

Mylayout1
Asif almost 5 years ago

Joel,

Did you check out the templates section which gives you a good starting point for common layouts, you

http://foundation.zurb.com/templates.html

-Asif